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

공정위 광고 문구 Ver 2.0

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [SEO] Blog Post vs. Article: 차이점은 무엇인가?

    웹사이트 콘텐츠를 발행할 때 [블로그 포스트&기사] 둘 중에 어떤 콘텐츠를 발행하는 것이 맞는지 SEO 관점에서 고민할 수 있습니다. 아니면 구글링으로 검색한 웹페이지의 콘텐츠가 Blog 게시물인지 기사인지 생각해 보신 적이 있나요? Blog Post vs. Article 두 종류의 콘텐츠는 어떤 차이점을 가지고 있으며 비즈니스 관점에서 어떤 콘텐츠를 게시하는 것이 더 나을지 알아 보겠습니다. 블로그란 무엇인가?…

  • [SEO] 사이트맵(SiteMap) 정의 | 구글, 네이버, 빙 사이트맵 제출 방법

    검색엔진최적화SEO를 진행할 때 처음에 접하게 되는 단어중 하나가 사이트맵SiteMap입니다. Sitemap이란 무엇이며, 어떤 용도로 사용되는지 알아 보겠습니다. 사이트맵 정의 Sitemap이란 구글 및 네이버와 같은 검색 엔진 봇이 색인을 진행할 페이지를 나열한 XML 파일입니다. 이름처럼 웹 사이트를 방문한 크롤러(봇)에게 지도와 같은 역할을 수행합니다. Sitemap에서 모든 웹페이지 목록을 제공해 줌으로써 봇이 원할하게 페이지를 크롤링 할 수…

  • [SEO] 웹사이트 관리를 위한 구글 SEO 도구 3가지

    웹사이트는 블로그 및 회사소개 홈페이지, 쇼핑몰 등 종류에 관계 없이 중요합니다. 구글 SEO 도구로 필수인 서치 콘솔, 애널리틱스, 크롬 개발자도구 3가지는 필수로 써야 하는 만큼 중요합니다. 구글을 포함한 검색 엔진 첫 페이지에 뜨는 것과 함께 어느 페이지에서 많이 방문자가 많았는지 통계 데이터를 볼 수 있다면 피드백을 통해 더 많은 방문자를 유입 시킬 수…

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

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

  • [Google Analytics GA4] 구글 애널리틱스 GA4 설치하기

    구글 애널리틱스 GA4로 사이트의 기본적인 접속 통계 및 실시간 사용자를 확인 할 수 있습니다. GA4 신규 생성 방법에 대해 알아 보겠습니다. GA4 신규 세팅을 위해서는 운영중인 URL이 있는 웹사이트가 있어야 합니다. ※ 애널리틱스 카테고리는 [계정]과 그 하위 카테고리인 [속성]에서 거의 모든 설정을 한다고 본 후에 시작하는 것이 좋습니다. 1. 구글 애널리틱스 GA4 시작하기…

  • 도메인 라이프 사이클(Domain Life Cycle)

    도메인 라이프 사이클Domain Life Cycle이란 도메인 이름의 활동 주기를 말하며, 도메인이 생성된 후에 사용 기간이 만료된 후 최종 삭제가 진행되는 기간과 상태를 말합니다. 도메인의 만료일과 상태는 도메인 정보 조회를 통해 확인할 수 있습니다. 라이프 사이클은 도메인 최상위 관리 기관Registry의 정책에 따라 다르게 운영될 수 있습니다. 도메인 라이프 사이클 나누기 도메인 만료 후 구매…