[Chrome]크롬 개발자 도구 실행 방법

크롬 개발자 도구 실행 방법

일반적으로 F12 단축키를 통해 크롬 개발자 도구를 실행할 수 있지만, 특정 웹 사이트에서 F12 단축키에 특정 이벤트 핸들러 함수를 등록했거나 사용 중인 OS가 Mac인 경우 F12 단축키가 동작하지 않습니다.

 

이번 포스팅은 F12 단축키를 사용하지 않고 크롬 개발자 도구를 실행할 수 있는 몇 가지 방법을 소개합니다. 참고로 제가 사용하고 있는 PC의 운영체제는 Mac이므로 사진과 다를 수 있습니다.

---

마우스 우클릭

첫 번째 방법으로 마우스 우클릭으로 크롬 개발자 도구를 실행할 수 있습니다.

 

특정 HTML DOM 요소의 스타일 또는 속성을 확인하고 싶은 경우 요소를 마우스 우클릭 버튼으로 클릭하고 검사를 선택합니다.

 

예를 들어, Naver 메인 사이트에서 로고의 스타일 또는 속성을 확인하려면, 다음과 같이 크롬 개발자 도구를 실행할 수 있습니다.

 

그림 1. 로고에 마우스 위치 후 우클릭 버튼 클릭하고 검사를 선택

 

그림 2. 크롬 개발자 도구 실행

---

단축키

단축키를 통해 Mac에서 마우스 우클릭하고 검사를 실행할 수 있습니다.

 

Mac

• Command + Option + C

 

Windows, Linux, ChromeOS

• Control + Shift + C

 

크롬 개발자 도구 실행 시 요소 탭이 아닌 콘솔 탭이 열리도록 다음 단축키를 입력할 수 있습니다.

 

Mac

• Command + Option + J

 

Windows, Linux, ChromeOS

• Control + Shift + J

 

마지막으로 실행했던 탭이 열리도록 다음 단축키를 입력할 수 있습니다. 예를 들어, 네트워크 탭을 선택 후 크롬 개발자 도구를 종료한 뒤 다음 단축키를 입력하면 크롬 개발자 도구 실행 시 네트워크 탭이 열립니다.

 

Mac

• Command + Option + I

 

Windows, Linux, ChromeOS

• Control + Shift + I

---

Chrome 맞춤 설정 및 제어

우측 상단의 맞춤설정 및 제어를 클릭한 다음 [도구 더보기 > 개발자 도구]를 선택합니다.

---

정리

이번 포스팅은 크롬 개발자 도구 실행 방법을 소개했습니다. 더 자세한 정보는 Chrome 공식 문서에서 확인할 수 있습니다.

Open Chrome DevTools - Chrome Developers