[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법
구글에서 만든 크롬 브라우저는 개발을 도와주는 ‘크롬 개발자도구’가 있습니다. 개발자 도구(Developer tools)를 이용해서 HTML, CSS, JavaScript의 생산성을 높일 수 있습니다. 개발자를 위한 도구이지만 글자 크기, 색, 간격과 같은 값을 확인할 수도 있고 웹사이트의 속도를 PC뿐만 아닌 모바일 버전으로도 확인할 수 있는 장점이 있습니다.
1. 개발자모드 실행 방법
실행 방법은 2가지가 있습니다. 검수하려는 웹사이트에 접속 후 맥에서 [command+option+I], 윈도우에서는 [ctrl+shift+I]를 눌러 실행하면 됩니다. 제일 많이 사용하는 단축키는 [F12]이겠죠. 직접 접속 할 때는 크롬 앱의 우측 상단 [더보기] > [도구 더보기] > [개발자 도구]를 클릭하면 확인할 수 있습니다.
![[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법 1 크롬 개발자도구-더보기 메뉴에서 실행하기](https://uknew.co/wp-content/uploads/2023/01/%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-%EB%8D%94%EB%B3%B4%EA%B8%B0-%EB%A9%94%EB%89%B4%EC%97%90%EC%84%9C-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0-e1674445949324.png)
2. 크롬 개발자도구 한국어 변경 및 다크모드 설정
개발자도구를 한국어로 변경 후 사용할 수 있습니다. 개발자도구의 기본 인터페이스입니다.
![[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법 2 크롬 개발자도구-기본 인터페이스(영어)](https://uknew.co/wp-content/uploads/2023/01/%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-%EA%B8%B0%EB%B3%B8-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EC%98%81%EC%96%B4.png)
크롬 개발자도구 실행 후 우측 상단 톱니바퀴 모양 [설정] 버튼을 클릭합니다.
![[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법 3 크롬 개발자도구-우측 상단 설정 버튼](https://uknew.co/wp-content/uploads/2023/01/%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-%EC%9A%B0%EC%B8%A1-%EC%83%81%EB%8B%A8-%EC%84%A4%EC%A0%95-%EB%B2%84%ED%8A%BC.png)
개발자 도구 설정 화면의 기본 인터페이스입니다.
![[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법 4 크롬 개발자도구-설정 기본 인터페이스(영어)](https://uknew.co/wp-content/uploads/2023/01/%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-%EC%84%A4%EC%A0%95-%EA%B8%B0%EB%B3%B8-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EC%98%81%EC%96%B4.png)
Language를 클릭해서 한국어 변경 및 크롬 개발자도구 테마를 다크모드로 변경할 수 있습니다. 설정 변경 후 창을 닫아 주면 됩니다.
![[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법 5 크롬 개발자도구 설정-한국어 변경 및 다크모드 설정](https://uknew.co/wp-content/uploads/2023/01/%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-%EC%84%A4%EC%A0%95-%ED%95%9C%EA%B5%AD%EC%96%B4-%EB%B3%80%EA%B2%BD-%EB%B0%8F-%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C-%EC%84%A4%EC%A0%95.png)
3. 동기화 설정하기
PC에서 설정한 것을 집에 가서 노트북 등으로 작업을 해야 하는데 재 설정을 해야 한다면 번거로울 수 있습니다. 동기화 설정이 가능합니다. 기본 환경설정 하단에 보면 [설정 동기화 사용]을 체크해서 사용할 수 있습니다.
![[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법 6 크롬 개발자도구 환경설정-동기화 사용하기](https://uknew.co/wp-content/uploads/2023/01/%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-%ED%99%98%EA%B2%BD%EC%84%A4%EC%A0%95-%EB%8F%99%EA%B8%B0%ED%99%94-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0.png)
개발자도구의 가장 기본적인 설정 법에 대해 알아 봤습니다.