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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [Chrome]구글 디스커버란?|디스커버 관심분야 설정 방법

    전 세계의 수 많은 사람들이 웹을 이용한 뉴스 기사와 관심 키워드를 구글링을 통해 소비합니다. 발견하다는 이름처럼 구글 디스커버(Google Discover)는 보다 쉽게 온라인 사용자의 관심사를 자동으로 보여주는 기능입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 구글 디스커버의 역사 Google Discover는 2012년 ‘Google Now’라는 이름으로 시작되었습니다. 취지는 사용자가 구글에서…

  • 구글 애널리틱스 애드센스 연결 방법

    애드센스를 사용하다 보면 어느 페이지에서 수익이 나는지 궁금할 때가 있습니다. 애널리틱스 자체적으로는 확인이 어렵기 때문에 구글 애널리틱스에서 볼 수 있게 끔 구글 애널리틱스 애드센스 연결 설정에 대해 알아 보겠습니다. 당연한 이야기이지만 애드센스와 애널리틱스 양쪽에 가입이 되어 있어야 연동이 가능합니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기1. 구글…

  • 워드프레스 테마 확인(&플러그인) 감지 사이트

    사이트가 xe 또는 워드프레스로 만들어졌는지 궁금할 때가 있습니다. 개인적으로 xe보다는 더 많은 확장이 가능한 플러그인과 많은 종류의 테마, 그리고 더 안정적인 사이트 및 서버 관리가 가능한 워드프레스가 더 관리하기 편하다고 생각합니다. 워드프레스 테마 확인 사이트에 대해 알아보겠습니다. 왜냐하면 워드프레스 블로그를 운영하다 보면, 다른 워드프레스로 운영되는 홈페이지는 어떤 플러그인과 어떤 테마를 사용하는지 궁금할 때가…

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

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

  • 수익형 블로그 강의가 사기인 이유

    티스토리 블로그부터 시작해서 워드프레스 블로그까지 블로그로 돈 버는 법에 대한 내용들이 구글 및 네이버 검색해도 많이 나옵니다. 구글 광고 및 크몽에서 5만원에서 40만원 정도의 구매 비용이 발생하는 것을 알 수 있습니다. 수익형 블로그 강의가 사기인 이유에 대해 알아 보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1….

  • [Chrome] 크롬 개발자도구 기능 개요

    크롬 개발자도구의 주요 기능은 웹 개발자가 웹사이트의 코드 테스트 및 디버그 작업을 할 수 있습니다. 파이어폭스, 마이크로소프트 엣지, 크롬 등 웹 브라우저에는 크롬처럼 ‘웹 개발 도구(Web development tools)’가 포함되어 있습니다. 크롬 개발자도구 기능은 개발자에게 유용한 도구임이 분명합니다. ‘devtools‘이라는 줄임말로 많이 사용되고 있습니다. ※디버그(debug) 디버깅 or 디버그는 컴퓨터 프래그램 개발 중 발생하는 시스템의 버그를…