[Dreamhack] STAGE2. Background - web (4)
Web Hacking - Tools : Browser DevTools
웹 개발을 하며 발생하는 버그, 마음에 들지 않는 css가 있을 경우, 코드 에디터와 브라우저를 오가며 수정을 반복해야 함
- Devtools : 이러한 불편함을 감소시켜주는 도구로, F12를 사용하여 동작할 수 있음 (=마우스 오른쪽 버튼 -> 검사) //
그러나 웹 서비스를 진단하는 데에 도움을 주는 도구인만큼 웹 취약점을 발견하는 데에도 유용하게 사용 됨
주요 기능
- Inspect, Device Toolbar
Inspect : 특정 요소의 정보를 파악하고, 이와 관련된 코드를 찾을 수 있음
Device Toolbar : 현재 브라우저의 화면 비율과 User-Agent를 원하는 값으로 변경하여 다른 장치에서 잘 작동하는 지 검사할 수 있음 - Elements : 화면을 구성하는 HTML의 코드를 읽고, 수정할 수 있음
- Console : 프론트엔드의 JS 코드에서 발생하는 메세지를 출력하고, 입력된 코드를 실행할 수 있도록 해 줌. 웹 페이지가 구동될 때 오류가 발생한다면 이 또한 Console 패널에서 확인할 수 있음
-
Sources : 화면을 구성하는 웹 리소스들을 확인할 수 있음. 리소스 파일 트리, 파일 시스템을 제공하며 그 중 선택한 리소스를 상세하게 볼 수 있음. 또한, 우측 창에서는 디버깅 정보를 확인할 수 있음
디버깅 정보
Watch : 원하는 JS 식을 입력하여 코드 실행 과정에서 해당 식의 값 변화를 확인
Call Stack : 함수의 호출 순서를 스택 형태로 보여줌
Scope : 정의되어 있는 모든 변수의 값을 확인 가능
Breakpoints : 브레이크 포인트를 확인하고, 각각을 활성화 또는 비활성화 할 수 있음 - Network : 서버와 오가는 데이터를 확인할 수 있으며, 원하는 항목을 선택하면 해당 요청 및 응답 데이터를 확인 가능함. 특정 로그를 우클릭한 후, Copy에서 원하는 형태로 복사를 진행할 수 있는데, 이때 Copy as fetch로 HTTP request를 복사한 후 콘솔 패널에서 싱행하면, 동일한 요청을 서버에 재전송할 수 있다
- Performance : 페이지의 로딩 성능을 측정할 수 있는 도구이며, 녹화버튼을 누른 후 새로고침하면, 렌더링이 진행되는 과정을 스냅샷으로 찍어 확인할 수 있다
- Memory : 웹 페이지의 메모리 사용량 정보를 확인할 수 있으며, JS가 실시간으로 사용하는 메모리 할당 정보를 모니터링할 수 있다
- Application : 쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있다. 이 때 Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고, 수정할 수 있다
- Security : 현재 페이지의 도메인 보안 접속 결과를 보여주며, 리소스를 가져온 링크 도메인에 대한 보안 접속 여부까지 확인이 가능하다. 보안접속을 하지 않은 경우, 빨간색으로 구분해 보여준다
- Lighthouse : 페이지에 대한 분석 결과를 리포트로 제공하며, 리포트에는 성능, 접근성, SEO 등에 대한 상세 분석 결과가 포함된다.
- Error & Warning Message : 현재 페이지에서 발생한 에러 및 경고 메세지를 확인
Secret Browsing mode
시크릿 모드(단축키 : Ctrl+Shift+N)에서는 새로운 브라우저 세션이 생성되며, 브라우저를 종료햇을 때 다음 항목이 저장되지 않는다. 시크릿 모드로 생성한 탭은 쿠키를 공유하지 않기 때문에, 같은 사이트를 여러 세션으로 사용하며 다수의 계정으로 서비스를 점검할 때 유용하다.
- 방문 기록
- 쿠키 및 사이트 데이터
- 양식에 입력한 정보
- 웹사이트에 부여된 권한