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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • 구글 PDF 번역 &이미지 번역 2가지 기능

    Google 번역은 일반적인 기계 번역 외에도 PDF 파일 번역과 이미지 내의 글자를 렌즈 번역할 수 있습니다. 구글 PDF 번역이 설치해야 하는 다른 번역 프로그램이나 웹 사이트보다 더 나은 이유는 설치의 번거로움이나 번역 파일의 크기 문제로 인한 오류가 상대적으로 없다는 것입니다. 구글의 PDF 번역과 이미지 번역에 대해 각각 알아 보겠습니다. 목차1. 개발자모드 실행 방법2….

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

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

  • URL 디렉터리 구조 vs 플랫 구조: SEO 성능과 웹사이트 운영 효율

    구글의 검색엔진 최적화(SEO) 기본 가이드에 따르면, URL 디렉터리 구조를 통해 유사한 주제의 페이지를 그룹화하는 것은 검색 엔진이 사이트 구조를 이해하고 색인을 최적화하는 데 유리합니다. 특히 사이트의 규모가 크거나 페이지 수가 많을수록 디렉터리(폴더) 단위로 콘텐츠를 체계적으로 묶어 두면 크롤러가 페이지 관계를 파악하고 크롤링 빈도를 조정하기 쉽습니다. 하지만 플랫 구조도 관리 효율성과 URL 단순성 측면에서…

  • 자바스크립트 SEO: 구글과 네이버에서 JS를 처리하는 과정과 방법

    자바스크립트 SEO란 JavaScript로 구축된 웹사이트 or 웹페이지를 검색 엔진이 더 쉽게 크롤링과 렌더링 및 색인화 할 수 있도록 만드는 데 초점을 둔 SEO 기술의 일부입니다. 자바스크립트 SEO를 사용하는 이유는 사용자 경험을 향상시키기 위함입니다. JavaScript SEO에는 다음과 같은 작업이 있습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 구글이…

  • 아이폰 디스플레이 및 밝기 설정(&라이트모드 다크모드 2가지 모드)

    아이폰은 설정 화면의 디스플레이 및 밝기 설정탭으로 들어가면 아이폰 라이트모드 다크모드를 각각 설정을 할 수 있습니다. 아이폰 디스플레이 및 밝기 설정 탭으로 접속하면 첫 화면에서 바로 확인할 수 있습니다. 전 구매하자마자 다크모드를 사용해서 눈의 편안함을 추구하고 있습니다. 디스플레이 및 밝기 설정 탭의 기능들을 하나 씩 알아보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어…

  • 티스토리 대안으로 사용할 수 있는 CMS 3가지

    구글 애드센스 광고 게재를 통해 블로그를 운영하는 경우 한국의 경우 티스토리를 가장 많이 이용합니다. 하지만 2022년 카카오 서비스가 중단되는 IDC 화재와 그 이전과 이후 지속적인 티스토리 오류가 발생하는 것이 사실입니다. 티스토리 대안으로 블로그스팟과 워드프레스를 가장 많이 언급합니다. 하지만 워드프레스는 ①비용 문제와 ②높은 진입 장벽을 이유로 시작하지 못하고 티스토리에 머무는 경우가 많습니다. 블로그스팟을 제외한…