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

Author:jarvis Hours 등록일 Hours 업데이트

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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

GA4 설치 방법

Similar Posts

  • 정보형 블로그 콘텐츠 패턴 4가지 정리

    Published:I-var uknew

    정보 중심의 정보형 블로그 콘텐츠를 작성하려고 할 때 다소 제목이나 내용이 식상하거나 막상 글을 작성하는 단계에서 H1 제목부터 H2 이하 소제목이 어색하게 바뀌는 등, 막상 제목이나 본문 구성이 어색하게 느껴지는 경우가 많습니다. 내가 생각한 것이 좋은 내용이고 훌륭한 아이디어와 독창적인 내용이 맞음에도 이 내용을 글 안에 녹여 내는 건 만만치 않은 작업입니다. 정보…

  • 무료 로고 자동 제작 사이트 6개

    Published:jarvis

    워드프레스 등으로 홈페이지를 직접 만들 경우 로고를 만드는데 많은 시간을 할애할 수 있습니다. 추가 비용 없이 ‘무료 로고 자동 제작 사이트’ 6곳에 대해 정리해 봤습니다. 네이버 블로그 등에서 티스토리 블로그 등의 글을 그대로 복사해서 짜집기해서 막상 들어가 보면 무료가 아닌 유료 로고 사이트이거나 SSL 인증서가 설치되지 않은 사이트인 경우가 있었습니다. 최소한의 로고 제작…

  • SEO URL 구조: Google의 URL 구조 권장 사항

    Published:jarvis

    검색엔진최적화를 위한 URL 구조로 웹사이트를 운영하는 것은 구글의 URL 구조 권장 사항에서 확인할 수 있습니다. SEO URL 구조를 올바른 방법으로 만들어야 하는 이유와 구글의 권장 사항에 대해 알아보겠습니다. SEO 친화적인 URL은 짧고 키워드가 풍부한 것이 특징입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기1. 구글의 URL 권장 사항…

  • 크롬 개발자 도구 Coverage: 사용하지 않는 코드(CSS, JS) 찾기

    Published:I-var uknew

    웹사이트의 속도는 단순히 서버 응답이나 캐시 설정뿐 아니라, “얼마나 많은 코드가 실제로 사용되는가”에 따라 크게 달라집니다. 크롬 개발자 도구 Coverage 탭은 페이지에서 로드된 CSS·JavaScript 파일의 실제 사용 비율을바이트 단위로 분석하여, 코드 낭비를 한눈에 시각화 해주는 도구입니다. 특히 워드프레스와 같은 CMS 환경에서는 테마·플러그인별로 불필요하게 로드되는 리소스가 많기 때문에,Coverage 탭은 사용하지 않는 자바스크립트 및 css…

  • 구글 계정 로그아웃 하는 방법(PC&모바일)

    Published:jarvis

    구글의 지메일(Gmail), 즐겨찾기 항목, 유튜브 등을 공공장소에서 사용 후 그 PC에서 구글 계정 로그아웃을 하지 못한 경우 내 PC 또는 모바일에서 다른 기기 로그아웃을 진행할 수 있습니다. PC와 핸드폰에서 구글 계정 로그아웃을 하는 방법에 대해 알아 보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기1. 구글 계정 로그아웃…

  • HSTS 보안&속도 2가지 장점

    Published:wilson

    HSTS(HTTP Strict Transport Security)를 이용하는 웹사이트에 적용했을 경우 보안과 속도의 이점을 볼 수 있습니다. 이 말은 HSTS preload(사전로드) 기능이 사전로드(or 미리로드) 방식을 통해 기존 HTTPS가 적용된 사이트의 느려진 속도를 어느 정도 보완할 수 있습니다. 프리로드 등록은 해당 페이지에 등록하면 설정이 완료 됩니다. HTTPS부터 시작해서 ‘HTTP Strict Transport Security’에 대해 순차적으로 알아보겠습니다. 목차1. 개발자모드…