[Web_Hacking] stage2_Browser DevTools

*개발자 도구

F12누르면 나오는 그거 명칭이 개발자 도구이다.

 

 

위쪽에 보면 기능 선택 패널이 있다.

 

요소 : 페이지 구성 HTML검사

콘솔 : 자바스크립트 실행 + 결과 확인 가능

소스 : HTML, CSS, JS등 페이지 구성 리소스 확인 + 디버깅 가능

네트워크 : 서버와 오가는 데이터 확인 가능

애플리케이션 : 쿠키 포함 웹 어플리케이션과 관련 데이터 확인 가능

 

패널에서 좀 더 오른쪽을 보면, VS에서 본 것 같은 오류 표시가 있다. -> 현재 페이지에서 발생한 에러 및 경고 메시지를 나타낸다.

 

 

 

*요소 검사

패널 왼쪽 버튼은 요소 검사인데, 이를 이용해 특정 요소의 개략적인 정보 파악 및 관련 코드를 찾는 행위가 가능하다.

 

 

위 사진과 같이 요소 검사 버튼을 누른 뒤, 페이지상에 보이는 요소들에 커서를 올리면 그에 대한 정보들을 확인할 수 있다. 위 상태에서 요소를 클릭하면 위와 같이 해당 요소에 관련된 HTML코드를 하이라이트해서 보여준다.

 

 

 

*디바이스 툴바

요소 검사 버튼 바로 오른쪽에 있는 버튼은 디바이스 툴바(Device Toolbar)이다. 현재 브라우저의 화면 비율과 User-Agent를 원하는 값으로 변경할 수 있다. -> 웹 접속 장치의 화면 비율에 따라 렌더링되어야 할 화면 비율도 달라져야 할 필요가 있음 -> 디바이스 툴바로 해당 점검 진행 가능

 

디바이스 툴바

 

 

 

 

*요소(Elements)

현재 페이지를 구성하고 있는 HTML코드를 볼 수 있고, 수정도 가능하다. (코드 선택한 상태에서 F2)

 

 

위와 같이 수정이 가능하다. (CIDY) 앞서 소개한 요소 검사 기능으로 요소 선택 후 빠르게 수정할 수 있다.

 

 

 

 

*콘솔(Console)

프론트엔드의 JS코드에서 발생한 메시지를 출력하고, 이용자가 입력한 JS코드를 실행해주는 도구다.

 

자바스크립트로 웹 개발할 때, 콘솔에는 개발자 도구의 콘솔에 접근할 수 있는 함수가 정의돼 있다. 코드를 작성하면서 어떤 변수의 값을 도중에 출력해보고 싶다면, console.log를 이용할 수 있다. (Ctrl + Shift + J)

 

콘솔을 이용해 브라우저에서 자바스크립트를 실행하고, 결과를 확인할 수 있다.

 

 

코드 실행 결과

 

 

 

 

*소스(Source)

현재 페이지를 구성하는 웹 리소스를 볼 수  있다.

 

가장 왼쪽 창에서는 현재 페이지의 리소스 파일 트리와 파일 시스템을 볼 수 있고, 선택한 리소스는 가운데 창에서 상세히 볼 수 있다.

 

가장 오른쪽 창은 디버깅 정보를 나타낸다. 

 

감시 -> 원하는 자바스크립트 식을 입력하면 코드 실행 과정에서 해당 식의 값 변화를 확인할 수 있다.

호출 스택 -> 함수들의 호출 순서를 스택 형태로 보여준다. (가장 나중에 호출되는 함수가 가장 위에)

범위 -> 정의된 모든 변수들 값 확인 

중단점 -> BP확인, 각 BP들 활성/비활성화 가능

 

소스 탭에서는 원하는 자바스크립트를 디버깅할 수도 있다. 

 

name == dreamhack이고, num == 31337이면 특정 메시지를 출력하는 코드이다. 위와 같이 원하는 코드 라인을 클릭해서 중단점을 설치한 뒤, 실행시키면 해당 부분에서 동작이 멈췄고, 이런 식으로 디버깅 할 수 있다.

 

 

 

*네트워크(Network)

서버와 오가는 데이터를 확인할 수 있다.

 

빨간색 -> 로깅 중지 및 로그 전체 삭제

주황색 -> 로그 필터링/검색

초록색 -> 옵션

노란색 -> 네트워크 로그

파란색 -> 네트워크 로그 요약 정보

 

 

위 목록에서 특정 항목을 선택할 시 해당 요청/응답 데이터를 확인할 수 있다. 특정 항목을 우클릭 후 copy기능을 이용해 원하는 형태로 복사할 수 있는데, 여기서 copy as fetch로 HTTP Request를 복사한 뒤 콘솔 패널에서 실행하면, 동일한 요청을 서버에 재전송할 수 있게 된다.

 

 

 

*애플리케이션(Application)

쿠키, 캐시, 이미지, 폰트, 스타일시트와 같이 웹 애플리케이션 관련 리소스를 조회할 수 있다. -> 쿠키 창에서 브라우저에 저장된 쿠키 정보 확인 및 수정이 가능하다.

 

 

 

*Cosole Drawer

개발자 도구에서 ESC키를 눌러 새로운 콘솔창을 열 수 있다.

 

 

 

 

*개발자 도구 기능 외에도, 페이지 소스 보기(Ctrl + U)를 이용해 페이지와 관련된 코든 소스코드를 볼 수 있다. ↓

 

 

 

 

*Secret Browsing Mode(Ctrl + Shift + N)에서는 새로운 브라우저 세션이 생성되며, 브라우저 종료 시 -> 방문 기록/쿠키, 사이트 데이터/양식에 대한 입력정보/웹사이트 부여 권한 -> 모두 저장되지 않는다. (일반 브라우저 탭들은 쿠키를 공유하지 않는 반면, 시크릿 모드로 생성한 브라우저는 그렇지 않다. -> 같은 사이트를 여러 세션으로 사용할 수 있음)