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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [Google Analytics GA4] 구글 애널리틱스 GA4 설치하기

    구글 애널리틱스 GA4로 사이트의 기본적인 접속 통계 및 실시간 사용자를 확인 할 수 있습니다. GA4 신규 생성 방법에 대해 알아 보겠습니다. GA4 신규 세팅을 위해서는 운영중인 URL이 있는 웹사이트가 있어야 합니다. ※ 애널리틱스 카테고리는 [계정]과 그 하위 카테고리인 [속성]에서 거의 모든 설정을 한다고 본 후에 시작하는 것이 좋습니다. 목차1. 개발자모드 실행 방법2. 크롬…

  • [Google] 크롬 홈 버튼 설정하는 방법

    구글 검색을 사용하기 위해 크롬 브라우저를 사용하는데 크롬 홈 버튼 설정이 되어 있지 않아 불편할 때가 있습니다. 개인적으로 홈 버튼 설정 시 우측 상단에 Gmail과 유튜브 및 구글 드라이브 등의 다양한 기능을 한번만 클릭해서 사용할 수 있기 때문에 홈 버튼 설정을 선호합니다. 개인적으로 다크 모드를 좋아하기 때문에 크롬 화면은 기본 다크 모드로 설정되어…

  • 구글 페이지스피드 인사이트: 코어 웹 바이탈로 보는 웹사이트 속도 최적화 가이드

    구글에서 만든 페이지스피드 인사이트는 웹사이트의 속도와 사용자 경험을 측정해주는 대표적인 성능 분석 도구입니다. 단순히 웹사이트 속도 측정을 위한 페이지 로딩 시간을 평가하는 것을 넘어, 코어 웹 바이탈 평가 지표를 기반으로 사이트의 전반적인 품질을 진단하고 개선 방향을 제시합니다. 코어 웹 바이탈은 실제 사용자 경험을 수치화한 3가지 핵심 지표로, 주요 콘텐츠가 화면에 표시되는 속도(LCP: 최대…

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

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

  • HTTPS란? SSL/TLS 보안인증서 개요 및 차이점

    HTTPSHyperText Transfer Protocol Secure란 월드와이드웹(WWW)의 통신 프로토콜인 HTTP의 보안이 강화된 프로토콜 버전입니다. 통신의 인증 및 암호화를 위해 넷스케이프 커뮤니케이션즈 코퍼레이션에서 개발한 넷스케이프 웹 프로토콜이 HTTPS입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 HTTPS를 이용하는 SSL 보안인증서 SSLSecure Socket Layer은 웹 사이트에 접속하기 전 기존 HTTP 프로토콜에서 HTTPS 프로토콜로 변경이…

  • Windows10 hosts 파일 수정

    ‘Windows10 hosts 파일 수정’은 보통 서버 이전이나 계정 이전 작업 후 DNS 레코드를 변경하기 이전에 이전 된 서버로 작업이 잘 이루어졌는지 미리 확인할 필요가 생긴다.일일이 DNS 서버 A레코드를 수정하여 확인하는 방법은 너무 번거롭기 때문에 hosts 파일을 수정하여 테스트 하는 게 좋은 방법 중 하나 이다.호스트는  DNS(도메인 이름 시스템)에서 제공하는 정보 없이 호스트 파일에…