<WEB Hacking> Browser DevTools

■개발자 도구

● : 요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar)

● : 기능을 선택하는 패널

      - Elements : 페이지를 구성하는 HTML 검사

      - Console : Javascript를 실행하고 결과를 확인할 수 있음

      - Source : HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅할 수 있음

      - Network : 서버와 오가는 데이터를 확인할 수 있음

      - Performance

      - Memory

      - Application : 쿠키를 포함하여 웹 애플리케이션과 관련된 데이터를 확인할 수 있음

      - Security

      - Lighthouse

● : 현재 페이지에서 발생한 에러 및 경고 메시지

● : 개발자 도구 설정

 

■요소 검사

- 요소 검사를 활용하면 특정 요소의 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있음

- 요소 검사 버튼을 누르고 웹 페이지의 원하는 요소에 마우스를 올리면, 대상의 정보가 출력되고, 클릭하면 이와 관련된

  HTML 코드가 하이라이팅됨

 

■디바이스 툴바

- 디바이스 툴바(Device Toolbar)를 활용하면 현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경할 수 있음

- 이를 이용해 자신이 개발한 웹 서비스가 다른 장치에서도 잘 작동하는지 쉽게 검사할 수 있음

 

■Elements

· HTML 읽기

  - 현재 페이지를 구성하는 HTML 코드를 읽을 수 있음

· HTML 수정

  - 코드를 선택하고 "F2"를 누르거나 더블 클릭하면, 이를 수정할 수 있음

 

■Console

- 콘솔은 프런트엔드의 자바스크립트 코드에서 발생한 각종 메시지를 출력하고, 이용자가 입력한 자바스크립트 코드를    실행하는 도구

- console.log를 통해 변수의 값을 출력해 볼 수 있음

 

■Source

- 현재 페이지를 구성하는 웹 리소스들을 확인할 수 있음

● : 현재 페이지의 리소스 파일 트리, 파일 시스템

● : 선택한 리소스 상세 보기     

● : 디버깅 정보

      - Watch : 원하는 자바스크립트 식을 입력하면, 코드 실행 과정에서 해당 식의 값 변화를 확인할 수 있음

      - Call Stack : 함수들의 호출 순서를 스택 형태로 보여줌(가장 최근에 실행한 함수가 스택의 가장 위에 위치함)

      - Scope : 정의된 모든 변수들의 값을 확인할 수 있음

      - Breakpoints : 중단점을 확인하고 각각을 활성화 또는 비활성화할 수 있음

 

■Network

- 서버와 오가는 데이터를 확인할 수 있음

- 원하는 항목을 선택하면 해당 요청 및 응답 데이터를 확인할 수 있음

● : 로깅 중지 및 로그 전체 삭제

● : 로그 필터링 및 검색

● : 네트워크 로그

● : 옵션

      - Preserve log : 새로운 페이지로 이동해도 로그를 삭제하지 않음

      - Disable cache : 이미 캐시 된 리소스도 서버에 요청함

● : 네트워크 로그 요약 정보

 

· Network: Copy

  - 로그를 우클릭하면, Copy에서 원하는 형태로 복사할 수 있음

  - Copy as fetch로 HTTP Request를 복사하고 Console 창에 붙여 넣어 실행하면, 동일한 요청을 서버에 재전송함

 

■Application

- 쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있음

- Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고, 수정할 수 있음

 

■Console Drawer

- 개발자 도구에 새로운 콘솔창을 열어 가시성과 효율성을 높일 수 있음(네트워크 패널과 콘솔 패널을 동시에 사용 가능)

 

■페이지 소스 보기

- 페이지 소스 보기를 통해 페이지와 관련된 소스 코드들을 모두 확인할 수 있음

 

■Secret browsing mode

- 시크릿 모드에서는 새로운 브라우저 세션이 생성되며, 브라우저를 종료하면 방문 기록, 쿠키 및 사이트 데이터, 양식에 필요한 정보, 웹 사이트에 부여된 권한을 저장하지 않음

- 일반적으로 브라우저의 탭들은 쿠키를 공유하지만, 시크릿 모드로 생성한 탭은 쿠키를 공유하지 않음

   (이를 이용하면 같은 사이트를 여러 세션으로 사용할 수 있어 여러 계정으로 서비스를 점검할 때 유용)