카테고리 없음

크롬 개발자 도구

KIKI_BI0 2024. 1. 9. 22:14
SMALL

1. 실행하기

F12 -> 개발자 도구 실행

 

+)

<최근 사용 탭 열기>

- Mac

Cmd + Opt + I

- Window

Ctrl + Shift + I

 

<요소 탭 열기>

- Mac

Cmd + Opt + C

- Window

Ctrl + Shift + C

 

<콘솔 탭 열기>

- Mac

Cmd + Opt + J

- Window

Ctrl + Shift + J

 

2.  언어 변경하기

-> 개발자 도구(F12)열고 톱니바퀴 모양 클릭 -> 환경설정이 열림 -> 언어 부분에서 변경하기 -> 새로고침

 

3. 눈금자 표시하기

-> 개발자 도구 열기 -> 단축키(Ctrl + Shift + P)로 명령어 실행창 열기 -> 눈금자 검색 -> 설정하기 -> 눈금자 생김

 

4. 요소 탭 사용하기

-> 개발자 도구 열기 -> 요소 태그 들어가기 -> 마우스 커서 모양의 요소 선택 버튼 사용하기 -> html 요소 쉽게 선택 가능 -> 웹 페이지에 커서를 가져가면 요소가 나옴

 

5. HTML 수정하기

-> 개발자 도구 열기 -> 방향키로 이동하며 HTML 탐색하기 -> 수정하고자하는 요소를 더블 클릭하면 수정 가능

 

6. CSS 수정하기

-> 개발자 도구 열기 -> 요소 스타일에서 CSS 속성 보기 -> 체크박스로 속성 활성화/비활성화 설정가능 -> 수정 방법은 5번과 같음(CSS 스타일 창에서 수정해도됨) -> 그냥 나가면 저장되지않음 오른쪽 마우스 클릭 후 html 수정클릭 후 복사해서 가져가야됨

 

7. 색상 선택 도구

-> 개발자 도구 열기 -> 아무 요소에나 컬러 속성 추가 -> 네모난 색상 값이 나타나면 클릭 -> 색상 선택 도구가 나타나면 스포이드를 누르고 원하는 위치로 이동 시키며 컬러 추출 가능

 

8. 가상 클래스 확인하기

-> 개발자 도구 열기 -> 해당 요소 선택 -> 요소 상태 전환 버튼 클릭(요소 상태 강제 적용이라고 뜰 것임) / 클래스 추가도 가능(요소 클래스 버튼 클릭하면 나옴) ->

 

9. 박스 모델 확인하기

-> 개발자 도구 열기 -> 박스 탭은 요소 스타일 탭의 아래 부분에서 확인 / 계산된 탭에서 확인 

 

10. 자바스크립트 비활성화

-> 개발자 도구 열기 -> 명령어 실행(Ctrl + Shift + P) -> 자바스크립트 입력(사용중지가 보일거임) -> 자바 스크립트 사용중지 클릭 -> 비활성화

 

11. 화면 캡처하기

-> 개발자 도구 열기 -> 명령어 실행 단축키 -> 스크린샷 입력(원본 크기 스크린샷 캡쳐가 보일거임) -> 원본 크기 스크린샷 캡쳐 클릭 -> 자동으로 캡쳐되어 저장됨

+) 더 간단한 방법

body태그에서 오른쪽 마우스 클릭 -> 노드 스크린샷 캡쳐 클릭

 

12. 디바이스 모드

-> 개발자 도구 열기 -> 기기 툴바 전환( Ctrl + Shift + M) -> 드롭 다운 메뉴를 클릭하면 다양한 디바이스 크기로 변경 가능/ 기기추가 가능

 

13. 콘솔 사용하기

-> Ctrl + Shift + J로 콘솔탭 열기 -> 콘솔탭 안에서 수정가능

 

14. 영상 속도 조절하기

-> Ctrl + Shift + J로 콘솔탭 열기 -> (function(){document.querySelector('video').playbackRate = 1.0}()) 입력하고 , 숫자 부분에 원하는 배속을 입력하면 영상 속도 조절이 됨

 

15. 로컬스토리지

-> localStorage.setItem() : 저장하기

-> localStorage.getItem() : 불러오기

-> localStorage.removeItem() : 삭제하기

-> localStorage.clear() : 모두 삭제하기

-> localStorage.length : 키/값 쌍의 개수

-> 개발자 도구 열기 -> 애플리케이션 탭 -> 로컬스토리지 ->  해당 페이지 클릭하면 저장된 로컬 스토리지 데이터 확인 가

 

16. 네트워크

-> 개발자 도구 열기 -> 네트워크 탭 이동 -> 페이지 새로고침 시 네트워크 활동이 기록됨(로그에 모든 네트워크 활동을 기록함) 

-> 바퀴는 리소스를 나타냄. 최상위 리소스는 일반적으로 html이고, 시간순서대로 나열됨

-> 각 열은 리소스에 대한 정보를 나타냄

-> 리소스의 1은 응답 코드 상태를 의미

 

17. Lighthouse

-> 개발자 도구에서 라이트하우스 탭 클릭 -> 모드, 기기, 카테고리 선택 가능

<모드>

탐색(기본값) : 기본값으로 단일 페이지 로드를 분석, 초기 페이지 로딩 시 발생하는 성능 문제를 분석

기간 : 사용자가 정의한 시간동안 발생한 성능 문제를 분석, 일반적으로 사용자 상호작용을 포함함

스냅샷 : 특정 현재 상태의 성능 문제를 분석, 특정 상태 페이지 특히 사용자 상호작용 후 페이지를 분석

 

18. 디버깅(Debugging)

-> 개발자 도구 -> 소스 탭에서 코드 확인 가능/수정 가능

 

 

 

 

 

 

 

LIST