Chrome DevTools 열기

케이스 바스크
케이스 바스크
제슬린 옌
제슬린 예
소피아 에멜리아노바
소피아 에멜리아노바

Chrome DevTools를 여는 방법은 다양합니다. 이 종합적인 참조 자료에서 원하는 방법을 선택하세요.

Chrome UI 또는 키보드를 사용하여 DevTools에 액세스할 수 있습니다.

또한 새 탭을 만들 때마다 DevTools를 자동으로 여는 방법도 알아보세요.

Chrome 메뉴에서 DevTools 열기

UI를 선호하는 경우 Chrome의 드롭다운 메뉴에서 DevTools에 액세스할 수 있습니다.

Elements 패널을 열어 DOM 또는 CSS를 검사합니다.

검사하려면 페이지에서 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.

Chrome 드롭다운 메뉴의 검사 옵션

DevTools가 Elements 패널을 열고 DOM 트리에서 요소를 선택합니다. 스타일 창에서 선택한 요소에 적용된 CSS 규칙을 확인할 수 있습니다.

요소 패널에서 선택한 요소

Chrome 기본 메뉴에서 마지막으로 사용한 패널 열기

마지막 DevTools 패널을 열려면 주소 표시줄 오른쪽에 있는 점 3개로 된 메뉴 버튼을 클릭하고 More Tools > Developer Tools를 선택합니다.

점 3개로 된 메뉴에서 개발자 도구 옵션이 선택됨

또는 바로가기를 사용하여 마지막 패널을 열 수 있습니다. 자세한 내용은 다음 섹션을 참조하세요.

단축키로 패널 열기: 요소, 콘솔 또는 마지막 패널

키보드를 사용하려면 운영체제에 따라 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를 의미합니다.
  • J: JavaScript
  • 는 선택사항을 지정합니다.

C 단축키를 누르면 검사 검사기 모드에서 Elements 패널이 열립니다. 이 모드에서는 페이지의 요소 위로 마우스를 가져가면 유용한 도움말이 표시됩니다. 요소 > 스타일 창에서 아무 요소나 클릭하여 해당 CSS를 볼 수도 있습니다.

도움말이 있는 검사기 모드의 Elements 패널

DevTools 단축키의 전체 목록은 단축키를 참고하세요.

모든 새 탭에서 DevTools 자동 열기

명령줄에서 Chrome을 실행하고 --auto-open-devtools-for-tabs 플래그를 전달합니다.

  1. 실행 중인 Chrome 인스턴스를 종료합니다.

  2. 원하는 터미널 또는 명령줄 애플리케이션을 실행합니다.

  3. 운영체제에 따라 다음 명령어를 실행합니다.

  • MacOS:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs
    
  • Windows:

    start chrome --auto-open-devtools-for-tabs
    
  • Linux:

    google-chrome --auto-open-devtools-for-tabs
    

Chrome을 닫을 때까지 DevTools가 새 탭을 열 때마다 자동으로 열립니다.

다음 단계

이제 다음 동영상을 시청하여 DevTools를 더 빠르게 탐색할 수 있는 유용한 단축키와 설정을 알아보세요.

더 많은 실습을 하려면 DevTools 맞춤설정 방법을 참고하세요.