참조 : 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 작업관리자 열기
