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

공정위 광고 문구 Ver 3.1
공정위 광고 문구 Ver 3.2(모바일 전용)

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


ℹ️ 제휴 안내
본 사이트의 콘텐츠에는 제휴 링크가 포함되어 있습니다. 방문자가 이 링크를 통해 상품 또는 서비스를 구매하면 본 사이트는 판매처로부터 수수료를 지급받습니다. 이 과정에서 구매자가 지불하는 금액(이벤트 할인 시 금액이 내려갑니다↓)은 오르지 않습니다. 게시된 가격·할인·재고 정보는 작성 시점 기준이며 실제와 다를 수 있으므로, 구매 전 판매처에서 최종 확인하시기 바랍니다. 상품 선정과 평가는 자체 기준에 따라 작성되며, 수수료 지급 여부가 소개 순서나 평가 내용에 영향을 주지 않습니다.

Similar Posts

  • HTTP란? HTTP 헤더와 상태코드 2xx 등의 의미

    HTTP(HyperText Transfer Protocol)는 W3에서 정보를 주고 받을 수 있는 프로토콜입니다. 하이퍼 텍스트 전송 프로토콜은 웹 브라우저와 같은 통신 플랫폼에 웹 사이트를 로드할 때 사용되며 인터넷에서 데이터(HTML, CSS, 이미지, 비디오 등)를 전송하는데 사용되는 프로토콜입니다. HTTP 요청 정보 HTTP 요청에는 보통 5가지의 정보를 확인할 수 있습니다. ⓐ HTTP 버전 ⓑ URL ⓒ HTTP 메서드 ⓓ HTTP 헤더…

  • 랜덤 비밀번호 생성기: 숫자(123)+대소문자+특수문자

    대문자, 소문자, 숫자, 특수 문자를 조합하여 최상의 보안을 달성하세요. 최소 6자리 비밀번호부터 최대 30자리 까지 가능합니다. 비밀번호 관리의 걱정을 덜어드립니다. 온라인 안전성을 높이는 데 도움이 되는 무료 도구입니다. 랜덤 비밀번호 생성기 ▲ 웹사이트 보안을 강화하고 안전한 비밀번호를 손쉽게 생성할 수 있습니다. uknew.co 비밀번호 생성기는 원하는 길이와 다양한 요구 사항에 따라 고유하고 강력한 암호를…

  • 크롬 개발자 도구 정의와 목적 5가지

    크롬 개발자 도구란 웹 개발자와 디자이너가 웹사이트의 코드 구조, 성능, 반응형 디자인, 보안, SEO 품질을 점검·개선하기 위해 사용하는 크롬 브라우저 내장 기능입니다. 페이지 속도 측정, 디버깅, 네트워크·리소스 분석 등 웹사이트 품질을 높이는 모든 과정을 한 곳에서 수행할 수 있습니다. Ⅰ. 크롬 개발자 도구의 목적 크롬 개발자도구는 단순한 코드 확인 도구가 아니라, 웹사이트의 품질…

  • [SEO] 서브도메인 VS 서브폴더 2가지 설정 중 SEO에 더 유리한 것은?

    서브도메인 VS 서브폴더 SEO에 어떤 방식이 유리한지 알아 보겠습니다. 먼저 Subdomain에 대해 간략히 설명하자면 인터넷에서 특정 사이트에 접속했을 때 www.domain.com에서 shop.domain.com이나 blog.domain.com과 같이 서브도메인으로 연결되는 경우를 확인한 적이 있을 겁니다. shop이나 blog와 같은 Subdomain 외에 www.domain.com/shop과 www.domain.com/blog와 같이 서브폴더(하위 디렉토리 or 하위 폴더)로 주제를 나누는 방법이 있습니다. 서브도메인 VS 서브폴더 두 가지 설정을…

  • 웹사이트 성능 테스트 기준: 크롬 개발자 도구 | 구글이 만든 SEO·성능 분석 표준

    웹사이트 속도와 성능은 단순한 점수로 판단할 수 없습니다. 중요한 것은 사용자 브라우저에서 어떤 리소스가 병목을 일으키는지, 그리고 렌더링이 어느 시점에 완료되는지를 직접 확인하는 것입니다. 이 과정을 통해서만 실제 성능 저하의 원인을 정확히 파악할 수 있습니다. 크롬 개발자 도구는 별도의 프로그램 설치 없이 브라우저 안에서 웹사이트 성능 테스트를 직접 할 수 있는 가장 강력한…

  • 구글 CCPA 및 GDPR 메시지 확인 테스트

    구글의 GDPR과 CCPA 설정을 한 후에 메시지가 나오는지 궁금할 수 있습니다. “구글의 CCPA 및 GDPR 메시지 확인을 진행할 수 있는 방법이 있는가?” 라는 의문으로 시작하여 2가지 메시지를 직접 확인해 보기로 했습니다. 유럽 규정 메시지에 대한 정보에서 확인 했을 때는 두 개의 버튼(옵션 관리, 동의)이 있는 유럽 규정 메시지가 나온다는 내용을 확인하였으며 아래와 같은…