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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • HSTS 설정방법

    HSTS는 기존 HTTPS 프로토콜을 사용하면서 보안을 한층 강화한 방식입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1. HSTS 설정방법 HSTS 설정방법은 리눅스 서버에서 설정하는 방법과 사용하는 CDN 서비스에서 지원하는 경우 CDN에서 설정하는 방법 등이 있습니다. 리눅스 서버에서 설정하는 방법과 CDN 서버 설정방법, 그리고 https://hstspreload.org/에서 hsts preload 설정…

  • 웹 성능 최적화: 구조와 정의

    사용자 경험(UX), 검색 엔진 최적화(SEO), 전환율, 그리고 사이트 유지 비용까지 – 웹 성능은 단순히 ‘사이트 속도 향상’이 아닌 적용된 이후의 여러가지 효과에 복합적인 영향을 주는 핵심 요소입니다. 일반 웹사이트 그리고 워드프레스와 같이 다양한 테마와 플러그인이 공존하는 환경에서는, 성능 저하의 원인을 파악하고 그에 맞는 최적화 기법을 적용하는 것이 필수입니다. 이 글은 웹 성능 최적화를…

  • 유튜브 프리미엄 가격 차이[3가지 가격]

    광고 없이 유튜브를 광고 없이 유튜브를 보기 위해 많은 사람이 유튜브 프리미엄에 가입합니다. 유튜브 프리미엄 가격은 크게 3가지 요금제로 나뉘게 됩니다. 이때 결제하는 기기(스마트폰, PC)에 따라 요금에 차이가 발생하는데요. 특히 애플 아이폰이나 아이패드에서 결제할 경우, PC 웹사이트에서 결제하는 것보다 가격이 더 비쌉니다. 이는 애플의 iOS 앱 결제 시 발생하는 높은 수수료 때문입니다. 각…

  • 구글 애드센스란? 개요 및 애드센스 대안 TOP7

    애드센스는 구글이 운영하는 광고 중개 서비스로, 광고주는 구글 애즈에 가입해 광고를 등록 후 웹 사이트, 검색 페이지, 유튜브 등에 게재할 수 있습니다. 유튜브 광고 수익은 10만 뷰 당 15~20달러 정도로 추정됩니다. 보통 애드센스 승인을 받기 위해 7~15개 정도의 양질의 콘텐츠가 일반적인 조건입니다. 구글 애드센스 및 애드센스 대안을 알아 보겠습니다. 워드프레스 등의 CMS를 운영해서…

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

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

  • 크롬 개발자 도구 성능 탭 활용

    웹사이트의 성능을 정확하게 평가하려면 단순한 속도 점수보다, 브라우저가 실제로 렌더링과 스크립트를 어떤 순서로 처리하는지를 살펴보는 것이 더 중요합니다. 크롬 개발자 도구 성능 탭은 페이지 로딩 과정과 사용자 상호작용에 따른 성능 저하를 시각적으로 분석할 수 있는 도구입니다. 렌더링 지연, 자바스크립트 실행 순서, LCP·FCP·CLS와 같은 Core Web Vitals 지표까지 모두 한 화면에서 확인할 수 있어,…