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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [WP] 워드프레스 블록에디터 개요 및 구텐베르크

    워드프레스를 시작하게 되면 워드프레스 블록에디터인 구텐베르크(Gutenberg) 편집기란 단어를 접하게 됩니다. 예전 워드프레스 편집기는 클래식 편집기를 사용했지만 보다 직관적인 웹 구축 경험을 위해 Gutenberg 편집기로 대체되었습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 워드프레스 블록에디터: 구텐베르크란? Gutenberg란 Wordpress 플랫폼의 블록 기반 편집기입니다. 워드프레스 5.0으로 업데이트 되면서 구텐베르크라는 에디터가…

  • [SEO] 테크니컬 SEO 정의 | 기본적인 방법 7가지

    한국은 오랜 기간 네이버와 다음이 검색 엔진 시장을 장악하고 있었습니다. 특히 오랜 기간 높은 네이버의 점유율로 인해 검색엔진최적화(SEO)에 대한 노력과 좋은 콘텐츠를 발행하는 것 보단 ‘바이럴 마케팅’에 초점을 둔 회사와 블로거들이 많았습니다. 점차 테크니컬 SEO에 대한 중요성을 인식하는 기업과 개인이 늘어나고 있습니다. ※ 블로그 바이럴 마케팅 바이럴 마케팅이란 소문 or 여론을 조장해서 상품에…

  • [GA4] 구글 애널리틱스 데이터 설정-수집 및 보관 설정

    애널리틱스 GA4 계정 및 데이터 스트림을 생성했다면 ‘애널리틱스 데이터 설정’과 ‘내부 IP 제외’를 해서 통계를 보다 정확히 볼 수 있도록 하는 것이 필수 설정이라고 할 수 있습니다. 세 번째로 ‘추천 트래픽’을 제외 시키는 방법에 대해 알아 보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1. 애널리틱스 데이터…

  • magicxml 프로그램 삭제

    컴퓨터로 인터넷을 하다가 우연히 프로그램 파일에서 magicxml 프로그램 삭제를 안랩에서 진단해서 알려 줬습니다. 처음 보는 프로그램이고 윈도우에서 삭제해도 전혀 무방할 거 같아 바로 동의하고 삭제를 진행했습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기magicxml 프로그램 삭제 후 확인 삭제 전에 확인해야 겠지만 필요 없는 프로그램으로 밖에 안 보여…

  • 아마존 어소시에이트란?

    해외 직구가 활성화되어 아이허브 및 아마존에서 직구를 많은 소비자들이 하고 있습니다. Amazon Associates는 아마존의 의 제휴 마케팅 프로그램입니다. 아마존 어소시에이트 가입 방법에 대해 간단히 알아 보겠습니다. 아마존 어필리에이트(어소시에이트) 메인 페이지로 접속 후 회원 가입을 먼저 해야 합니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1. 아마존 어소시에이트…

  • [SEO] 구글 키워드 플래너 사용법

    검색 엔진 최적화를 통해 구글 첫 페이지 상위 노출을 목적이라면 수 많은 요소가 있지만 키워드 리서치는 필수로 진행해야 할 사항입니다. 무료 키워드 툴 중 하나인 구글 키워드 플래너를 이용해서 키워드 조사 하는 방법에 대해 알아 보겠습니다. 순차적으로 키워드 플래너에 대해 확인해 보도록 하겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드…