Chrome DevTools 열기

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

여러 가지 방법으로 Chrome DevTools를 열 수 있습니다. 이 종합 참조 자료 중에서 원하는 방법을 선택하세요.

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

• Chrome의 드롭다운 메뉴에서
• Elements, Elements 또는 마지막으로 사용한 패널을 여는 전용 바로가기 사용

또한 새 탭에서 DevTools를 자동으로 여는 방법도 알아보세요.

Chrome 메뉴에서 DevTools 열기

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

Elements 패널을 열어 DOM 또는 CSS 검사

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

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

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

마지막 DevTools 패널을 열려면 주소 표시줄 오른쪽에 있는 버튼을 클릭하고 도구 더보기 > 개발자 도구.

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

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

키보드를 사용하려면 운영체제에 따라 Chrome에서 단축키를 누르세요.

OS	요소	콘솔	마지막 패널
Windows 또는 Linux	Ctrl + Shift + C	Ctrl + Shift + J	F12 Ctrl + Shift + I
Mac	Cmd + 옵션 + C	Cmd + 옵션 + J	Fn + F12 Cmd + 옵션 + I

단축키를 기억하는 쉬운 방법은 다음과 같습니다.

• C는 CSS를 의미합니다.
• J(JavaScript의 경우)
• I는 선택한 항목을 나타냅니다.

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

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

새 탭에서 매번 DevTools 자동 열기

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

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

   요점: 이 플래그는 처음 연 Chrome 인스턴스에만 작동합니다. 예를 들어 Windows에서 제대로 작동하지 않으면 작업 관리자에서 기존 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
  

DevTools는 Chrome을 닫을 때까지 모든 새 탭에서 자동으로 열립니다.

다음 단계

성공: 축하합니다. 이제 Chrome DevTools의 강력한 기능을 활용할 수 있습니다.

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

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