본문 바로가기
Development/Web Develope

크롬 개발자 도구 - 단축키 모음 (Chrome Development Tools - Shortcuts)

by 버들도령 2022. 8. 30.
728x90

크롬 개발자 도구
단축키 모음 (Chrome Development Tools - Shortcuts)

도구 설명에서 바로 가기를 찾을 수도 있습니다. 도구 설명을 표시하려면 DevTools의 UI 요소 위로 마우스를 가져갑니다. 요소에 바로 가기가 있는 경우 도구 설명에 바로 가기가 포함됩니다.

# DevTools를 열기 위한 키보드 단축키
DevTools를 열려면 브라우저 뷰포트에 커서가 있는 동안 다음 키보드 단축키를 누르십시오.

동작(기능) 윈도우/리눅스
마지막으로 사용한 패널을 엽니다. Command+ Option+I F12또는 Control+ Shift+I
콘솔 패널 열기 Command+ Option+J Control+ Shift+J
요소 패널 열기 Command+ Shift+ C또는 Command+ Option+C Control+ Shift+C

# 전역 키보드 단축키
다음 키보드 단축키는 대부분의 DevTools 패널에서 사용할 수 있습니다.

동작(기능) 윈도우/리눅스
설정 표시 ?또는 Function+F1 ?또는F1
다음 패널에 초점 맞추기 Command+] Control+]
이전 패널에 초점 맞추기 Command+[ Control+[
마지막으로 사용한 도킹 위치 로 다시 전환 합니다. DevTools가 전체 세션의 기본 위치에 있는 경우 이 바로 가기는 DevTools를 별도의 창에 도킹 해제합니다. Command+ Shift+D Control+ Shift+D
장치 모드 전환 Command+ Shift+M Control+ Shift+M
요소 검사 모드 전환 Command+ Shift+C Control+ Shift+C
명령 메뉴 열기 Command+ Shift+P Control+ Shift+P
서랍 토글 Escape Escape
일반 재장전 Command+R F5또는 Control+R
하드 재장전 Command+ Shift+R Control+ F5또는 Control+ Shift+R
현재 패널 내에서 텍스트를 검색합니다. Elements , Console , Sources , Performance , Memory , JavaScript Profiler  Quick Source 패널 에서만 지원됩니다 . Command+F Control+F
로드된 모든 리소스에서 텍스트를 검색할 수 있는 서랍 에서 검색 탭을 엽니다. Command+ Option+F Control+ Shift+F
소스 패널 에서 파일 열기 Command+ O또는 Command+P Control+ O또는 Control+P
확대 Command+ Shift++ Control+ Shift++
축소 Command+- Control+-
기본 확대/축소 수준 복원 Command+0 Control+0
스니펫 실행 Command+ O를 눌러 명령 메뉴! 를 열고 스크립트 이름을 입력 한 다음Enter Control+ O를 눌러 명령 메뉴! 를 열고 스크립트 이름을 입력 한 다음Enter

 

# 요소 패널 키보드 단축키

동작(기능) 윈도우/리눅스
변경 취소 Command+Z Control+Z
변경 다시 실행 Command+ Shift+Z Control+Y
현재 선택된 요소 위/아래 요소 선택 Up Arrow/Down Arrow Up Arrow/Down Arrow
현재 선택된 노드를 확장합니다. 노드가 이미 확장된 경우 이 바로 가기는 그 아래에 있는 요소를 선택합니다. Right Arrow Right Arrow
현재 선택된 노드를 축소합니다. 노드가 이미 축소된 경우 이 단축키는 노드 위에 있는 요소를 선택합니다. Left Arrow Left Arrow
현재 선택된 노드와 모든 하위 노드를 확장하거나 축소합니다. 누른 Option상태에서 요소 이름 옆에 있는 화살표 아이콘을 클릭합니다. + 를 Control누른 Alt상태에서 요소 이름 옆에 있는 화살표 아이콘을 클릭합니다.
현재 선택된 요소에서 속성 편집 모드 전환 Enter Enter
속성 편집 모드로 들어간 후 다음/이전 속성 선택 Tab/ Shift+Tab Tab/ Shift+Tab
현재 선택된 요소 숨기기 H H
현재 선택된 요소에서 HTML 모드로 편집 토글 Function+F2 F2

 

# 스타일 창 키보드 단축키

동작(기능) 윈도우/리눅스
속성 값이 선언된 줄로 이동 누른 Command상태에서 속성 값 클릭 누른 Control상태에서 속성 값 클릭
색상 값의 RBGA, HSLA 및 Hex 표현을 순환합니다. Shift키를 누른 상태에서 값 옆에 있는 색상 미리보기 상자 를 클릭합니다.
Shift키를 누른 상태에서 값 옆에 있는 색상 미리보기 상자 를 클릭합니다.
다음/이전 속성 또는 값 선택 Tab속성 이름 또는 값을 클릭한 다음 / Shift+ Tab 속성 이름 또는 값을 클릭한 다음 Tab / Shift+ Tab
속성 값을 0.1씩 증가/감소 값을 클릭한 상태에서
Option + Up Arrow / Option + Down Arrow
값을 클릭한 다음 Alt + Up Arrow / Alt+ Down Arrow
속성 값을 1씩 증가/감소 값을 클릭한 상태에서
Up Arrow / Down Arrow
값을 클릭한 다음 Up Arrow / Down Arrow
속성 값을 10씩 증가/감소 값을 클릭한 상태에서
Shift + Up Arrow / Shift + Down Arrow
Shift값을 클릭한 다음 + Up Arrow/ Shift+ 를 누릅니다.Down Arrow
속성 값을 100만큼 증가/감소 값을 클릭한 상태에서
Command + Up Arrow / Command + Down Arrow
값을 클릭한 다음 Control + Up Arrow/ Control + Down Arrow
각도 값의 도(deg), 그라디안(grad), 라디안(rad) 및 회전(turn) 표시를 순환합니다. Shift키를 누른 상태에서 값 옆에 있는 각도 미리보기 상자 를 클릭합니다. Shift키를 누른 상태에서 값 옆에 있는 각도 미리보기 상자 를 클릭합니다.
각도 값을 1씩 증가/감소 값 옆에 있는 각도 미리보기 상자를 클릭한 다음 Up Arrow / Down Arrow 값 옆에 있는 각도 미리보기 상자를 클릭한 다음 Up Arrow / Down Arrow
각도 값을 10만큼 증가/감소 값 옆에 있는 각도 미리보기 상자를 클릭한 다음 Shift + Up Arrow / Shift + Down Arrow 값 옆에 있는 각도 미리보기 상자를 클릭한 다음 Shift + Up Arrow / Shift + Down Arrow
각도 값을 15만큼 증가/감소 값 옆에 있는 각도 미리보기 상자를 클릭한 다음 Shift키를 누르고 각도 시계 오버레이를 클릭/마우스 슬라이드합니다. 값 옆에 있는 각도 미리보기 상자를 클릭한 다음 Shift키를 누르고 각도 시계 오버레이를 클릭/마우스 슬라이드합니다.

 

# 소스 패널 키보드 단축키

동작(기능) 윈도우/리눅스
스크립트 실행 일시 중지(현재 실행 중인 경우) 또는 재개(현재 일시 중지된 경우) F8 또는 Command + \ F8 또는 Control + \
다음 함수 호출 건너뛰기 F10 또는 Command + ' F10 또는 Control + '
다음 함수 호출로 이동 F11 또는 Command + ; F11 또는 Control + ;
현재 기능에서 벗어나기 Shift + F11 또는 Command +  Shift + ; Shift + F11 또는 Control + Shift + ;
일시 중지된 동안 특정 코드 라인으로 계속 Command을 누른 상태에서 코드 라인을 클릭 Control을 누른 상태에서 코드 라인을 클릭
현재 선택된 프레임 아래/위에서 호출 프레임을 선택합니다. Control+ . / Control + , Control + . / Control + ,
로컬 수정 사항에 대한 변경 사항 저장 Command + S Control + S
모든 변경 사항 저장 Command + Option + S Control + Alt + S
라인으로 이동 Control + G Control + G
현재 열려 있는 파일의 행 번호로 이동 Command + O를 눌러 명령 메뉴를 열고, 줄 번호를 입력 한 다음 Enter Control + O를 눌러 명령 메뉴를 열고, 행 번호를 입력 한 다음 Enter
현재 열려 있는 파일의 열로 이동합니다(예: 5행, 9열). Command + O를 눌러 명령 메뉴를 열고, 줄 번호, 또 다른 :, 열 번호를 차례로 입력한 다음 Enter Control + O를 눌러 명령 메뉴를 열고 , 줄 번호, 또 다른 :, 열 번호를 차례로 입력한 다음 Enter
함수 선언(현재 열려 있는 파일이 HTML 또는 스크립트인 경우) 또는 규칙 세트(현재 열려 있는 파일이 스타일시트인 경우)로 이동 Command + Shift + 를 누른 O다음 선언/규칙 집합의 이름을 입력하거나 옵션 목록에서 선택합니다. Control + Shift + O 누른 다음 선언/규칙 집합의 이름을 입력하거나 옵션 목록에서 선택합니다.
활성 탭 닫기 Option + W Alt + W
왼쪽 의 탐색 사이드바 전환 Command + Shift+Y Control + Shift + Y
오른쪽 의 디버거 사이드바 전환 Command + Shift+H Control + Shift + H

 

# 코드 편집기 키보드 단축키

동작(기능) 윈도우/리눅스
커서까지 마지막 단어의 모든 문자 삭제 Option+Delete Control+Delete
코드 줄 중단점 추가 또는 제거 커서를 선에 놓은 다음 Command+B 커서를 선에 놓은 다음 Control+B
일치하는 괄호로 이동 Control+M Control+M
한 줄 주석을 전환합니다. 여러 줄을 선택한 경우 DevTools는 각 줄의 시작 부분에 주석을 추가합니다. Command+/ Control+/
커서가 있는 단어의 다음 발생을 선택/선택 취소합니다. 각 발생은 동시에 강조 표시됩니다. Command + D / Command+U Control+ D / Control+U

 

# 네트워크 패널 키보드 단축키

동작(기능) 윈도우/리눅스
녹음 시작/중지 Command+E Control+E
새로고침 기록 Command+R Control+R
선택한 XHR 요청 재생 R R
선택한 요청의 세부 정보 숨기기 Escape Escape

 

# 성능 패널 키보드 단축키

동작(기능) 윈도우/리눅스
녹음 시작/중지 Command+E Control+E
녹음 저장 Command+S Control+S
녹음 로드 Command+O Control+O

 

# 메모리 패널 키보드 단축키

동작(기능) 윈도우/리눅스
녹음 시작/중지 Command+E Control+E

 

# 콘솔 패널 키보드 단축키

동작(기능) 윈도우/리눅스
자동 완성 제안 수락 Right Arrow 또는 Tab Right Arrow 또는 Tab
자동 완성 제안 거부 Escape Escape
이전 명세서 가져오기 Up Arrow Up Arrow
다음 명령문 가져오기 Down Arrow Down Arrow
콘솔에 Focus Control + ` Control + `
콘솔 지우기 Command + K 또는 Option + L Control + L
여러 줄 입력을 강제 실행합니다. DevTools는 기본적으로 여러 줄 시나리오를 감지해야 하므로 이 바로 가기는 이제 일반적으로 필요하지 않습니다. Shift + Return Shift + Enter
실행하다 Return Enter
콘솔에 기록된 개체의 모든 하위 속성 확장 Alt 키를 누른 상태에서 확장을 클릭 합니다. Alt 키를 누른 상태에서 확장을 클릭 합니다.

 

동작(기능) 윈도우/리눅스
모든 검색 결과 펼치기/접기 Command + Option + { 또는 } Control + Shift + { 또는 }

출처 : 크롬 개발자툴

 

728x90

댓글