Chrome DevTools 열기

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

• Chrome의 드롭다운 메뉴에서 선택합니다.
• 요소, 콘솔 또는 마지막으로 사용한 패널을 여는 전용 바로가기 사용

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

Chrome 메뉴에서 DevTools 열기

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

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

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

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

Chrome 기본 메뉴에서 마지막으로 사용한 패널을 엽니다.

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

또는 단축키를 사용하여 마지막 패널을 열 수 있습니다. 자세히 알아보려면 다음 섹션을 참조하세요.

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

키보드를 사용하려면 운영체제에 따라 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(자바스크립트의 경우).
• 이는 선택사항을 지정합니다.

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

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
  

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

다음 단계

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

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

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