[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법

구글에서 만든 크롬 브라우저는 개발을 도와주는 ‘크롬 개발자도구’가 있습니다. 개발자 도구(Developer tools)를 이용해서 HTML, CSS, JavaScript의 생산성을 높일 수 있습니다. 개발자를 위한 도구이지만 글자 크기, 색, 간격과 같은 값을 확인할 수도 있고 웹사이트의 속도를 PC뿐만 아닌 모바일 버전으로도 확인할 수 있는 장점이 있습니다.

1. 개발자모드 실행 방법

실행 방법은 2가지가 있습니다. 검수하려는 웹사이트에 접속 후 맥에서 [command+option+I], 윈도우에서는 [ctrl+shift+I]를 눌러 실행하면 됩니다. 제일 많이 사용하는 단축키는 [F12]이겠죠. 직접 접속 할 때는 크롬 앱의 우측 상단 [더보기] > [도구 더보기] > [개발자 도구]를 클릭하면 확인할 수 있습니다.

크롬 개발자도구-더보기 메뉴에서 실행하기

2. 크롬 개발자도구 한국어 변경 및 다크모드 설정

개발자도구를 한국어로 변경 후 사용할 수 있습니다. 개발자도구의 기본 인터페이스입니다.

크롬 개발자도구-기본 인터페이스(영어)

크롬 개발자도구 실행 후 우측 상단 톱니바퀴 모양 [설정] 버튼을 클릭합니다.

크롬 개발자도구-우측 상단 설정 버튼

개발자 도구 설정 화면의 기본 인터페이스입니다.

크롬 개발자도구-설정 기본 인터페이스(영어)

Language를 클릭해서 한국어 변경 및 크롬 개발자도구 테마를 다크모드로 변경할 수 있습니다. 설정 변경 후 창을 닫아 주면 됩니다.

크롬 개발자도구 설정-한국어 변경 및 다크모드 설정

3. 동기화 설정하기

PC에서 설정한 것을 집에 가서 노트북 등으로 작업을 해야 하는데 재 설정을 해야 한다면 번거로울 수 있습니다. 동기화 설정이 가능합니다. 기본 환경설정 하단에 보면 [설정 동기화 사용]을 체크해서 사용할 수 있습니다.

크롬 개발자도구 환경설정-동기화 사용하기

개발자도구의 가장 기본적인 설정 법에 대해 알아 봤습니다.


Similar Posts

  • 워드프레스 플러그인 충돌: 빠른해결방법

    워드프레스를 플러그인 충돌로 예상 될 경우 플러그인을 하나 씩 정지하면서 테스트를 해 봐야 합니다. 설치된 플러그인이 많을 경우 어떤 플러그인 충돌로 인한 오류인지 확인하는데 많은 시간이 소요됩니다. 이때 보다 편하게 테스트를 할 수 있는 플러그인을 소개하겠습니다. ‘Health Check & Troubleshooting‘이라는 플러그인입니다. 이 플러그인의 소개 페이지에서 평가가 아주 좋지는 않지만 간혹 플러그인 충돌로 의심되는…

  • magicxml 프로그램 삭제

    컴퓨터로 인터넷을 하다가 우연히 프로그램 파일에서 magicxml 프로그램 삭제를 안랩에서 진단해서 알려 줬습니다. 처음 보는 프로그램이고 윈도우에서 삭제해도 전혀 무방할 거 같아 바로 동의하고 삭제를 진행했습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기magicxml 프로그램 삭제 후 확인 삭제 전에 확인해야 겠지만 필요 없는 프로그램으로 밖에 안 보여…

  • [SEO] 검색엔진 최적화 기본 용어 5가지 및 최적화를 기본적인 필수 사항

    웹사이트로 광고 수익을 창출하거나 온라인 쇼핑몰에서 물품을 판매한다면 검색엔진 최적화는 필수입니다. ‘검색엔진 최적화 기본 용어’에 대해 알아 보겠습니다. 구글·네이버와 같은 검색 사이트에서 유료 광고 외에도 원하는 글이나 상품이 글 상단 or 첫페이지에 나온다면 그만큼 광고비를 아낄 수 있고 마케팅에서 많은 이점을 누릴 수 있기 때문입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경…

  • 자바스크립트 SEO: 구글과 네이버에서 JS를 처리하는 과정과 방법

    자바스크립트 SEO란 JavaScript로 구축된 웹사이트 or 웹페이지를 검색 엔진이 더 쉽게 크롤링과 렌더링 및 색인화 할 수 있도록 만드는 데 초점을 둔 SEO 기술의 일부입니다. 자바스크립트 SEO를 사용하는 이유는 사용자 경험을 향상시키기 위함입니다. JavaScript SEO에는 다음과 같은 작업이 있습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 구글이…

  • SEO: 구글 허밍버드 알고리즘

    구글 허밍버드(Hummingbird)는 검색 결과 개선을 위해 2013년에 구글이 업데이트한 알고리즘 코드명입니다. 허밍버드는 검색자의 키워드가 포함된 웹페이지를 표시하는 대신 검색자의 의도를 이해하고 일치 시킬 수 있도록 돕는 것을 목표로 합니다. 검색 엔진 중 특히 구글은 사용자 경험(UX)을 최적화하기 위해 정기적으로 알고리즘을 조정하지만 Hummingbird는 Panda(2011) 및 Penguin(2012)보다 더 의미 있는 알고리즘이었습니다. 목차1. 개발자모드 실행 방법2….

  • 크롬 개발자 도구 정의와 목적 5가지

    크롬 개발자 도구란 웹 개발자와 디자이너가 웹사이트의 코드 구조, 성능, 반응형 디자인, 보안, SEO 품질을 점검·개선하기 위해 사용하는 크롬 브라우저 내장 기능입니다. 페이지 속도 측정, 디버깅, 네트워크·리소스 분석 등 웹사이트 품질을 높이는 모든 과정을 한 곳에서 수행할 수 있습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 Ⅰ….