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

공정위 광고 문구 Ver 2.0

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • 크롬 개발자 도구 네트워크 탭 성능 테스트 가이드

    웹사이트의 실제 성능을 분석하려면 단순한 속도 점수보다는 브라우저가 리소스를 어떻게 로드하는지 직접 확인해야 합니다. 크롬 개발자 도구 네트워크 탭은 페이지가 로드되는 동안 발생하는 모든 요청을 실시간으로 추적하여, 병목 구간·캐시 정책·응답 속도를 정확히 파악할 수 있는 가장 강력한 도구입니다. 이 글에서는 네트워크 탭의 주요 항목과 리소스 분석 방법을 단계 별로 살펴보며, 워드프레스와 같은 CMS…

  • [SEO]스키마 마크업과 리치 스니펫이란? | Schema 유형 16가지

    리치 스니펫의 형태로 스키마 마크업을 사용하는 웹사이트가 늘어 났습니다. 아래는 Rich Snippets이 SERP에서 어떻게 보일 수 있는지 확인할 수 있는 예시입니다. 이번 페이지에서는 Schema가 무엇인지, 스키마 활용 방법과 리치 스니펫에 대해 살펴 보겠습니다. 1. 스키마 마크업이란? 스키마 마크업(Schema Markup)은 검색 엔진이 콘텐츠를 이해하고 SERP(검색 엔진 결과 페이지)에 반영할 수 있도록 사이트의 HTML에 추가할…

  • 도메인: 정의 및 개념 | 최상위 도메인(TLD)의 종류

    도메인은 원래 ‘영토, 영역, 분야’ 등을 뜻하는 단어로, 오늘날에는 인터넷 주소의 의미로 확장되어 사용되고 있습니다. 도메인은 인터넷에서 웹사이트에 접속할 때 사용하는 사람이 읽기 쉬운 주소입니다. 웹사이트는 본래 고유한 IP 주소(숫자)로 구분되지만, 기억하기 어렵기 때문에 문자 기반의 도메인을 사용하게 되었습니다. ✅ IP와 도메인 주소의 차이 | 인터넷 주소 체계 이해하기 인터넷에서 웹사이트에 접속할 때,…

  • 제로클릭 검색 : 2025년 AI 시대에 클릭 없는 세상이 주는 마케팅의 대전환

    클릭 없이 끝나는 검색이 점점 늘어나고 있습니다. 제로클릭 검색은 사용자가 웹사이트를 클릭하지 않고 검색 결과 페이지에서 원하는 답을 얻는 것을 의미합니다. 2025년 10월 현재 구글 검색은 60%~80%가 클릭 없이 종료된다고 합니다. 이는 곧 구글 검색 첫 페이지 상단에 글이 있더라도 예전과 같은 트래픽을 기대할 수 없다는 것을 의미합니다. 이 글에서는 제로 클릭 검색에…

  • Off Page SEO: 오프 페이지 SEO 정의와 7가지 방법

    오프 페이지 SEO(Off Page SEO)란 SEO의 범주 중 하나로 콘텐츠 내부(온 페이지 SEO)가 아닌 외부로부터 검색 엔진 순위를 높이기 위한 SEO입니다. 다른 웹 사이트로부터 발생하는 백링크 구축을 통한 링크 빌딩, 다른 웹 사이트로부터 받은 백링크에 대한 가치를 나타내는 링크 주스 등을 생각할 수 있습니다. 결국 “백링크가 중요하다.”가 주요 포인트 중 하나인 이유는 많은…

  • DOM(Document Object Model) 구조와 정의

    대부분의 웹페이지는 HTML로 구성되어 있지만, 우리가 브라우저에서 상호 작용하는 것은 단순한 정적인 HTML 문서가 아닙니다. 웹페이지는 브라우저에 의해 DOM(Document Object Model)이라는 구조화된 객체 모델로 변환되며, 이 DOM을 통해 JavaScript는 페이지의 내용을 읽고 수정할 수 있습니다. DOM은 웹의 핵심 작동 원리이자 프로그래밍 가능한 웹의 뼈대입니다. 버튼 클릭, 폼 입력, 실시간 데이터 변경 등 우리가…