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
'Development > Web Develope' 카테고리의 다른 글
[WEB] Postman 사용 시 Could not get any response. 에러메시지 (2) | 2022.10.23 |
---|---|
웹 취약점(TLS, SSL Protocol) 조치 방법(apache, Tomcat, JBoss, NginX, WebLogic) (0) | 2022.09.22 |
[용어 정의] GNB, LNB, SNB, FNB. 영역별 네비게이션 메뉴 바의 정의 (0) | 2022.05.24 |
HTTP, IIS HTTP, FTP Error Code 정리. (상태 코드, status code) (0) | 2022.04.14 |
구글 크롬 96. 트위터, Discord, 인스타그램, 비디오 렌더링 등 중단 오류 발생 및 해결 방법 (0) | 2021.11.19 |
댓글