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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • 아마존 어소시에이트란?

    해외 직구가 활성화되어 아이허브 및 아마존에서 직구를 많은 소비자들이 하고 있습니다. Amazon Associates는 아마존의 의 제휴 마케팅 프로그램입니다. 아마존 어소시에이트 가입 방법에 대해 간단히 알아 보겠습니다. 아마존 어필리에이트(어소시에이트) 메인 페이지로 접속 후 회원 가입을 먼저 해야 합니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1. 아마존 어소시에이트…

  • 네이티브 광고(Native advertising)란 무엇인가?

    네이티브 광고(Native advertising, Native AD)는 해당 웹사이트에 맞춰 고유한 방식으로 기획 및 제작된 광고를 말 합니다. 기존의 광고는 이용자의 관심을 끌기 어려운 점이 있습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 ✅ 네이티브 광고의 정의 및 특징 배너 광고 또는 디스플레이 광고와 달리 Native AD는 실제로 광고처럼…

  • [GA4] 구글 애널리틱스 데이터 설정-수집 및 보관 설정

    애널리틱스 GA4 계정 및 데이터 스트림을 생성했다면 ‘애널리틱스 데이터 설정’과 ‘내부 IP 제외’를 해서 통계를 보다 정확히 볼 수 있도록 하는 것이 필수 설정이라고 할 수 있습니다. 세 번째로 ‘추천 트래픽’을 제외 시키는 방법에 대해 알아 보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1. 애널리틱스 데이터…

  • [SEO] IndexNow 프로토콜 정의 | 5가지 이점

    IndexNow 프로토콜은 웹 마스터와 웹 사이트 소유자가 검색 엔진에 콘텐츠의 변경 사항을 알려주는 간단한 방법입니다. 간단하면서도 기본적인 기능은 검색 엔진이 URL과 해당 콘텐츠의 ⓐ추가, ⓑ업데이트, ⓒ 삭제 되었을 경우 알 수 있도록 변경 사항을 핑으로 알려줘서 빠른 반영이 가능합니다. Microsoft가 개발한 새로운 SEO(검색 엔진 최적화) 기능으로, 웹 사이트의 콘텐츠가 검색 엔진에서 더 빠르게…

  • [SEO] Internal PageRank

    내부 페이지랭크(Internal PageRank)란 무엇인가? 내부 링크에 링크 점수를 어떤 방법으로 배분해 줘야 할까? 계산 방법은? 링크 방식은 앵커 텍스트를 사용할지..? 등을 고민할 수 있습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기1. PageRank에 대해 구글 이전의 검색 엔진은 정교하지 않았습니다. 검색 엔진에서 얻는 콘텐츠의 품질은 사람들이 원하는 품질의…

  • 크롬 개발자 도구 Lighthouse로 웹사이트 성능 분석

    웹사이트의 품질을 정량적으로 평가하려면 단순히 ‘속도 점수’만 보는 것보다, 구글이 제시하는 공식 웹 성능 기준(Core Web Vitals)을 기반으로 진단하는 것이 더 중요합니다. 크롬 개발자 도구 Lighthouse 탭은 구글이 직접 개발한 웹 성능 분석 도구로, PageSpeed Insights와 동일한 알고리즘을 로컬 환경에서 즉시 실행할 수 있는 기능을 제공합니다. 즉, 구글 서버에 요청하지 않아도 내 브라우저…