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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [SEO]외부 링크(External Links)란 무엇인가?

    검색엔진최적화(SEO)에서 외부 링크(External Link)는 내 웹사이트에서 다른 웹사이트로 연결하는 하이퍼링크입니다. 아웃바운드 링크라고도 부르는 외부 링크는 검색 엔진 결과 페이지(SERP) 결과를 표시할 때 구글에서 고려하는 중요한 순위 요소 중 하나입니다. 내 웹사이트에서 웹사이트 내 다른 페이지를 링크한 내부 링크와는 다른 개념인 아웃바운드 링크는내 웹사이트(A)에서 콘텐츠를 발행할 때 특정 단어에 대한 추가 설명이 필요하거나 참조한…

  • [SEO] 구글 서치 콘솔이란 무엇인가? | 기본 용도 및 기능

    블로그를 포함한 인터넷 전자상거래, 회사 소개 웹 사이트 등 모든 종류의 웹 사이트의 중요한 목적은 웹 사이트의 웹 트래픽을 늘리는 것입니다. 전 세계 검색 시장의 높은 점유율을 차지하고 있고 앞으로도 유지할 것으로 보이는 구글에서 운영 중인 구글 서치 콘솔(Google Search Console)은 무엇인지 알아 보겠습니다. Google Search Console이란 웹 마스터가 색인에서 웹사이트의 상태를 모니터링…

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

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

  • [SEO] 구글 검색 상태 대시보드(2023년 8월)

    구글이 2023년 8월 Google Search Status Dashboard(구글 검색 상태 대시보드) 업데이트를 발표 했습니다. 구글에서 검색 진행 시 최신 순위 업데이트 중 ‘웹사이트 소유자’와 관련된 업데이트가 표시된다고 합니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기구글 검색 상태 대시보드에 표시되는 내용 다음과 같은 내용을 확인할 수 있습니다. 상태 정의…

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

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

  • SSL보안인증서 법규정

    SSL보안인증서는 개인정보를 취급하는 모든 웹사이트에 의무적으로 구축하도록 대한민국 법 규정에 정해져 있습니다. SSL보안인증서 법규정은 로그인이 필요한 개인정보가 있는 웹사이트와 (회원정보가 없어도)결제 모듈이 구축된 개인정보를 취급하는 쇼핑몰에 SSL보안인증서 설치가 필수라는 것입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1. HTTPS란 HTTPS란 하이퍼 텍스트 전송 프로토콜 보안 (HTTPS) 사용하는…