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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

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

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

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

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

  • 직접 사용하는 색상 코드 & 색상 코드 추천 사이트 TOP 3

    웹사이트를 운영하면서 자주 사용하는 색상 코드를 페이지에 저장해 두고, 필요할 때마다 사이트 검색 기능을 통해 바로 접속하여 활용할 필요성을 느껴서 페이지를 만들게 되었습니다. 추가로, 색상 코드 조합 사이트도 유용하기 때문에 두 가지 주제로 리스트를 정리했습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 Ⅰ. 자주 사용하는 색상 코드…

  • [WP] 워드프레스 페이지 빌더 vs 블록 에디터 5가지 차이

    워드프레스 구텐베르크(Gutenberg) 블록은 블록 에디터입니다. 공식 블록 에디터가 출시된 이후 워드프레스 페이지 빌더(Page Builder)를 대체하는 방향으로 흐르지 않을까? 라는 의문을 워드프레스를 이용한 웹사이트를 운영한다면 누구나 가졌을 법한 의문입니다. 많은 사람들이 페이지 빌더를 버리고 블록 데이터(Block Editor)로 이동하게 될까요? 이 글에서는 여기에 대한 해답을 찾기 위해 각각의 차이점과 앞으로의 미래를 개인적인 의견으로 예측해 보겠습니다….

  • 아이폰 화면꺼짐 설정(시간30초부터~안함까지)

    아이폰을 처음 산 후 사용하다 보면 화면 꺼짐으로 인한 불편함을 겪게 됩니다. 불편함을 없애기 위해 아이폰 화면꺼짐 설정 기능을 해제하거나 시간 설정을 하는 방법에 대해 알아보겠습니다. 먼저 아이폰의 설정 화면에서 디스플레이 및 밝기 탭으로 접속합니다. 접속 후 자동잠금 설정으로 접속합니다. [아이폰 화면꺼짐 설정 방법] – 디스플레이 및 밝기 -> 자동잠금 -> 시간 설정(아예…

  • |

    내 아이피 주소 확인(103.226..Click Here!) | IP란 무엇인가?

    웹과 관련된 업무를 하게 되면 내가 위치한 PC 또는 모바일에서 내 아이피 주소 확인이 필요한 경우가 있을 수 있습니다. 이 페이지는 IP 주소 확인 사이트입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기내 아이피 주소 확인 ▼ IP 주소란 무엇인가? IP는 인터넷 프로토콜(Internet Protocol)의 약자이며, 인터넷이 연결된 네트워크에서…