Chrome DevTools를 여는 방법은 다양합니다. 이 포괄적인 참조에서 원하는 방법을 선택하세요.
Chrome UI 또는 키보드를 사용하여 DevTools에 액세스할 수 있습니다.
- Chrome의 드롭다운 메뉴에서
- 요소, 콘솔 또는 마지막으로 사용한 패널을 여는 전용 단축키
또한 새 탭마다 DevTools를 자동으로 여는 방법도 알아보세요.
Chrome 메뉴에서 DevTools 열기
UI를 선호하는 경우 Chrome의 드롭다운 메뉴에서 DevTools에 액세스할 수 있습니다.
요소 패널을 열어 DOM 또는 CSS 검사
검사하려면 페이지의 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
DevTools에서 요소 패널이 열리고 DOM 트리에서 요소가 선택됩니다. 스타일 탭에서 선택한 요소에 적용된 CSS 규칙을 확인할 수 있습니다.
Chrome 기본 메뉴에서 마지막으로 사용한 패널을 엽니다.
마지막 DevTools 패널을 열려면 주소 표시줄 오른쪽에 있는 버튼을 클릭하고 도구 더보기 > 개발자 도구를 선택합니다.
단축키를 사용하여 마지막 패널을 열 수도 있습니다. 자세한 내용은 다음 섹션을 참고하세요.
단축키로 패널 열기: 요소, 콘솔 또는 마지막 패널
키보드를 선호하는 경우 운영체제에 따라 Chrome에서 단축키를 누릅니다.
| OS | 요소 | 콘솔 | 마지막 패널 |
|---|---|---|---|
| Windows 또는 Linux | Ctrl + Shift + C | Ctrl + Shift + J | F12 Ctrl + Shift + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
다음은 단축키를 쉽게 기억하는 방법입니다.
- C는 CSS를 의미합니다.
- JavaScript의 경우 J
- I는 선택한 항목을 나타냅니다.
C 단축키를 사용하면 검사기 모드에서 요소 패널이 열립니다. 이 모드는 페이지의 요소 위로 마우스를 가져갈 때 유용한 도움말을 표시합니다. 요소를 클릭하여 요소 > 스타일 탭에서 CSS를 볼 수도 있습니다.
DevTools 단축키의 전체 목록은 단축키를 참고하세요.
DevTools가 열린 상태에서 캐시 유무에 관계없이 페이지 새로고침
DevTools가 열려 있으면 세 가지 방법으로 페이지를 새로고침할 수 있습니다. Chrome 창의 기본 작업 모음에서 다시 로드 버튼을 길게 누르고 다음 옵션 중 하나를 선택합니다.
일반 새로고침 캐시를 사용하여 새로고침 시간을 단축합니다.
단축키: Cmd+R (macOS) 또는 Ctrl+R (Windows/Linux)
강제 새로고침 캐시를 우회하지만 캐시를 비우지는 않습니다.
단축키: Cmd+Shift+R (macOS) 또는 Ctrl+Shift+R (Windows/Linux)
캐시를 비우고 강제 새로고침합니다. 다시 로드하기 전에 모든 사이트의 캐시를 비웁니다.
모든 새 탭에서 DevTools 자동 열기
명령줄에서 Chrome을 실행하고 --auto-open-devtools-for-tabs 플래그를 전달합니다.
실행 중인 Chrome 인스턴스를 모두 종료합니다.
즐겨 사용하는 터미널 또는 명령줄 애플리케이션을 실행합니다.
운영체제에 따라 다음 명령어를 실행합니다.
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
Chrome을 닫을 때까지 새 탭마다 DevTools가 자동으로 열립니다.
다음 단계
다음으로, 다음 동영상을 시청하여 DevTools를 더 빠르게 탐색하는 데 유용한 단축키와 설정을 알아보세요.
실습을 통해 자세히 알아보려면 DevTools를 맞춤설정하는 방법을 참고하세요.