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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [SEO] 웹사이트 관리를 위한 구글 SEO 도구 3가지

    웹사이트는 블로그 및 회사소개 홈페이지, 쇼핑몰 등 종류에 관계 없이 중요합니다. 구글 SEO 도구로 필수인 서치 콘솔, 애널리틱스, 크롬 개발자도구 3가지는 필수로 써야 하는 만큼 중요합니다. 구글을 포함한 검색 엔진 첫 페이지에 뜨는 것과 함께 어느 페이지에서 많이 방문자가 많았는지 통계 데이터를 볼 수 있다면 피드백을 통해 더 많은 방문자를 유입 시킬 수…

  • 구글 애드센스 수익 계좌 등록 및 지급(100$부터 출금)

    블로그 및 유튜브를 시작 후 애드센스 수익을 지급받는 시기가 찾아옵니다. 애드센스 수익 계좌 등록 방법과 애드센스 수익 지급일 등 애드센스로 광고 수익을 낼 때 확인할 수 있는 구글 애드센스 수익에 대해 하나 씩 알아보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기1. 애드센스 수익 계좌 등록 방법 애드센스…

  • [GA4] 구글 애널리틱스 서치 콘솔 연결 방법

    구글 애널리틱스에서 구글의 서치 콘솔(Google Search Console)을 연결해서 사용할 수 있습니다. 애널리틱스 서치 콘솔 연결이 필요한 이유는 어떤 검색어로 유입되었는지 확인하는 것 뿐 아니라 검색 결과 페이지 노출 수와 순위, 노출 수 대비 순위 등을 알 수 있기 때문입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기1. 애널리틱스…

  • HSTS 보안&속도 2가지 장점

    HSTS(HTTP Strict Transport Security)를 이용하는 웹사이트에 적용했을 경우 보안과 속도의 이점을 볼 수 있습니다. 이 말은 HSTS preload(사전로드) 기능이 사전로드(or 미리로드) 방식을 통해 기존 HTTPS가 적용된 사이트의 느려진 속도를 어느 정도 보완할 수 있습니다. 프리로드 등록은 해당 페이지에 등록하면 설정이 완료 됩니다. HTTPS부터 시작해서 ‘HTTP Strict Transport Security’에 대해 순차적으로 알아보겠습니다. 목차1. 개발자모드…

  • VPN 불법인가? 합법인가?

    VPN 서비스를 이용한다면 내각 이용중인 VPN 불법인지? 아니면 합법이기 때문에 그대로 사용해도 되는지 궁금할 때가 있습니다. “내가 한국에서 성인 사이트를 들어가기 위해 VPN을 사용하는데 합법이었다고?” 란 의문을 품을 수 있습니다. 물론 접속하는 성인사이트가 법에 따라 불법일 수 있습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기VPN 합법인 이유…

  • [GA4] 애널리틱스 기본 보고서와 라이브러리 활용 맞춤 보고서 만들기

    웹사이트와 앱 분석을 위한 GA4 보고서를 도입했지만 용어와 설정 방법 등에서 데이터 활용 방법을 어떻게 할지 고민할 수 있습니다. ‘GA4 애널리틱스 기본 보고서’의 유형에 대해 알아 보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1. GA4 애널리틱스 기본 보고서 GA4 기본 보고서는 [보고서 개요]를 클릭하면 추가 설정을…