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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [Google Analytics GA4] 구글 애널리틱스 GA4 설치하기

    구글 애널리틱스 GA4로 사이트의 기본적인 접속 통계 및 실시간 사용자를 확인 할 수 있습니다. GA4 신규 생성 방법에 대해 알아 보겠습니다. GA4 신규 세팅을 위해서는 운영중인 URL이 있는 웹사이트가 있어야 합니다. ※ 애널리틱스 카테고리는 [계정]과 그 하위 카테고리인 [속성]에서 거의 모든 설정을 한다고 본 후에 시작하는 것이 좋습니다. 목차1. 개발자모드 실행 방법2. 크롬…

  • [SEO]구글 페이지랭크(PageRank)란?

    구글의 검색 알고리즘 페이지랭크(PageRank)는 구글 검색 엔진 결과의 웹페이지 순위를 매기는 데 사용되는 알고리즘입니다. ‘웹 페이지’라는 용어와 구글의 공동 창립자인 Larry Page의 이름을 따서 ‘페이지 랭크’라는 용어가 탄생했습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 PageRank 역사 1996년 스탠프도 대학교의 Larry Page와 Sergey Brin은 새로운 종류의 검색…

  • [SEO] 테크니컬 SEO 정의 | 기본적인 방법 7가지

    한국은 오랜 기간 네이버와 다음이 검색 엔진 시장을 장악하고 있었습니다. 특히 오랜 기간 높은 네이버의 점유율로 인해 검색엔진최적화(SEO)에 대한 노력과 좋은 콘텐츠를 발행하는 것 보단 ‘바이럴 마케팅’에 초점을 둔 회사와 블로거들이 많았습니다. 점차 테크니컬 SEO에 대한 중요성을 인식하는 기업과 개인이 늘어나고 있습니다. ※ 블로그 바이럴 마케팅 바이럴 마케팅이란 소문 or 여론을 조장해서 상품에…

  • [SEO] 링크 교환이란? | 상호링크, 백링크 교환

    검색 엔진 최적화를 위해 온페이지 SEO만으로는 많은 시간이 소요될 수 있습니다. 오프페이지 SEO 중 하나인 백링크를 생각하게 되며, 링크 빌딩을 위한 링크 교환에 대해 생각하게 됩니다. 링크 교환(Link-Exchange)이란 각각의 다른 웹사이트가 링크를 교환함으로써 링크 주스(점수)를 보내는 것입니다. 상호 링크, 상호 백링크라고도 부릅니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3….

  • 크롬 개발자 도구 Coverage: 사용하지 않는 코드(CSS, JS) 찾기

    웹사이트의 속도는 단순히 서버 응답이나 캐시 설정뿐 아니라, “얼마나 많은 코드가 실제로 사용되는가”에 따라 크게 달라집니다. 크롬 개발자 도구 Coverage 탭은 페이지에서 로드된 CSS·JavaScript 파일의 실제 사용 비율을바이트 단위로 분석하여, 코드 낭비를 한눈에 시각화 해주는 도구입니다. 특히 워드프레스와 같은 CMS 환경에서는 테마·플러그인별로 불필요하게 로드되는 리소스가 많기 때문에,Coverage 탭은 사용하지 않는 자바스크립트 및 css…

  • [SEO] Google Sandbox time period란?

    WordPress, Wix, Drupal 등의 CMS를 이용해서 웹 사이트를 만들거나 직접 웹 사이트를 만들어 유효한 SEO 전략을 사용했지만 원하는 웹 페이지가 구글 첫 페이지에 나오지 않는 경우가 있습니다. 이유는 “Google Sandbox time period” 때문일 수 있습니다. 공식적으로 Google에선 ‘Google Sandbox’를 인정하지 않지만 이와 같은 현상은 검색 엔진에 적용된다는 사실입니다. 구글에 새로운 사이트를 서치 콘솔에…