DH Web Hacking
✏️ Background - Web / Tools: Browser DevTools
📌 개발자 도구
브라우저에서 F12로 실행, HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있으며, 자바스크립트 코드를 대상으로 디버거도 제공한다.
서버와 오가는 HTTP 패킷도 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 쉽게 발견할 수 있다.
◽요소검사
특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있다.
◽디바이스 툴바
현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경할 수 있다.
자신이 개발한 웹 서비스가 다른 장치에서도 잘 작동하는지 점검할 때 사용한다.
◽Elements
HTML 읽기: 현재 페이지를 구성하는 HTML 코드를 읽을 수 있다.
HTML 수정: 코드를 F2를 누르거나 더블 클릭하면 수정 할 수 있다.
Console: 프론트엔드의 자바스크립트 코드에서 발생한 각종 메세지를 출력하고, 이용자가 입력한 자바스크립트 코드를 실행해주는 도구
◽Sources
현제 페이지를 구성하는 웹 리소스들을 확인할 수 있고, 자바스크립트를 디버깅할 수도 있다.
◽Network
서버와 오가는 데이터를 확인할 수 있다.
로그를 Copy하는 텝에서 Copy as fetch로 복사한 후 Console 패널에 붙여서 실행하면, 동일한 요청을 서버에 재전송할 수 있다.
◽Application
쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있다.
