Chrome 개발자 도구 단축키 (개발자용)

참조 : https://developers.google.com/chrome-developer-tools/docs/shortcuts

 

 

 

개발자 도구 열기

Ctrl + Shift + I / F12 : 그냥 개발자 도구 열기

Ctrl + Shift + C : 개발자 도구를 열면서 element 선택상태로 만든다. 하늘색 돋보기 상태..-_-; (개발자 도구가 열려 있는 상태라면 element 선택상태 toggle

Ctrl + Shift + J : console 탭 선택상태로 개발자 도구 열기 (이 상태에서 한 번 더 Ctrl + Shift + J 를 누르면 inspector의 inspector를 연다)

 

 

 

 

모든 패널 공통 단축키

? / F1 : General Settings 다이알로그 열기

Ctrl + ] : 다음 패널

Ctrl + [ : 이전 패널

Ctrl + 1 ~ Ctrl + 9 : 숫자에 해당하는 순서의 패널로 이동 (General Settings에서 이 기능을 사용하겠다는 설정이 되어 있어야 함)

Ctrl + F : 현재 패널/소스에서 찾기

Ctrl + Shift + F : 전체 소스에서 찾기

Ctrl + O : 파일명으로 찾기 (Timeline 패널 제외)

 

 

 

 

Elements

Ctrl + Z : 변경사항 되돌리기 (Undo)

Ctrl + Y : 변경사항 재적용 (Redo)

Enter / 더블클릭 : 선택된 attribute 수정

H : 선택된 element 숨기기

F2 : HTML 수정모드 toggle

(기타)

* element의 :active, :hover, :focus, :visited 를 강제할 수 있음

* element에 breakpoint 지정 가능. (Subtree 수정, Attribute 수정, Node 삭제시 발동)

 

Elements 패널의 Styles 사이드바

Ctrl + property/value 클릭 : 해당 property/value 가 정의된 소스코드의 해당 부분으로 이동

 

 

 

 

Sources

F8 / Ctrl + \ : Pause / Resume

F10 / Ctrl + ' : Step over

F11 / Ctrl + ; : Step into

Shift + F11 / Ctrl + Shift + ; : Step out

Ctrl + B / 해당라인 클릭 : BreakPoint toggle

해당라인 우클릭 : BreakPoint의 상태 설정

Ctrl + G : 라인번호 이동

Ctrl + O / Ctrl + P : 파일이름으로 찾기

(파일이름으로 찾기 다이알로그가 떠있는 상태에서) :숫자 -> 해당 라인으로 이동

Ctrl + Shift + O : 멤버이름으로 찾기(Object)

(실행시킬 소스코드를 마우스 드래그 등으로 선택한 다음) Ctrl + Shift + E : 선택된 소스코드 실행 -> Console 패널에 표시

Ctrl + / : 주석 toggle

(pause 버튼 상태값)

검은색 - 예외 발생시 멈추지 않음

파란색 - 모든 예외 발생시 멈춤

보라색 - catch 되지 않은 예외 발생시에만 멈춤

 

 

 

 

Timeline

Ctrl + E : 레코딩 시작/중지

Ctrl + S : Timeline 데이터 저장

Ctrl + O : 저장된 Timeline 데이터 불러오기

 

 

 

 

Profiles

Ctrl + E : 레코딩 시작/중지

 

 

 

 

Console

Ctrl + L : 콘솔 지우기

Shift + Enter : 여러라인 입력

 

 

 

기타 단축키

Shift + ESC : Chrome 작업관리자 열기