개발자도구 F12 활용법

개발자도구 여는 법

개발자 도구 열기: 웹 브라우저에서 F12 키를 누르거나, 마우스 오른쪽 클릭 후 "검사"를 선택

- 상단 우측 더보기 버튼을 클릭 > 도크 측 > 개발자도구 위치 설정 가능 (하단, 좌측, 우측, 새 탭으로 열기)

탭 설명

1. Elements 탭: HTML 구조 확인, CSS 스타일 수정, 요소 추가/삭제 가능
2. Console 탭: JavaScript 코드 실행 및 디버깅, 오류 메시지와 경고 메시지 확인 가능
3. Sources 탭: JavaScript와 CSS 파일 디버깅 가능
4. Network 탭: 웹 페이지 로딩 시간과 네트워크 요청 분석 가능, Performance 탭에서 웹 페이지 성능분석 및 최적화 가능
5. 모바일 디바이스에서 웹 페이지가 어떻게 보이는지 미리 확인 가능 "Toggle device toolbar" 버튼을 클릭하여 사용

 

활용법

1. 스크린샷
ctrl + shift + p 입력 후 screenshot 입력
- 스크롤 하면서 캡처하기
- 전체 화면
- 노드 단위
- 자유형 캡처
GoFullPage를 사용하면 캡처본을 pdf로 저장가능

2. ctrl + shift + p 입력 후 coverage 입력
- 사이트에서 사용되는 css, js 파일
- 현재 페이지에서 사용되지 않는 소스의 비율도 확인 가능

3. 컴퓨터 리소스 분석
ctrl + shift + p 입력 후 fps 입력
- 컴퓨터에서 사용되는 Frame Rate와 CPU, GPU 사용량을 확인할 수 있음

4. 모바일 Sensors 분석
모바일 테스트를 위해 360도 파나로마 기능을 쓸 수 있음
https://intel.github.io/generic-sensor-demos/orientation-phone/
가속도나 기울기 등 여러가지 테스트 가능

5. 크롬 브라우저에서 워크 스페이스 설정 및 코드 수정
source 탭에 FileSystem을 보면 워크 스페이스 추가 가능

6. 크롬 브라우저에서 자바 스크립트 테스트
console창에서 js 작성 및 테스트 가능
여러 줄의 자바스크립트를 작성하고 테스트 : shift + enter
또는
ctr+shift+p 검색 후 Snippets 입력

7. 광고 제거하기
cntl+shift+p 입력 후 block ads
광고가 제거된 화면을 볼 수 있음

8. 탭 복구하기
ctrl+shift+t 누르면 닫은 탭 복구 가능

참고 블로그

🔧개발자 도구의 기능을 뜯어보자