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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [SEO] 키워드 리서치를 통한 키워드 선정 전략 5가지

    블로그를 포함한 웹 사이트를 운영할 때 주제 선정은 매우 중요한 요소 중 하나입니다. 이유는 구글봇이 내 웹 사이트의 텍스트와 키워드 등을 크롤링합니다. 전략적인 키워드 리서치를 통해 내 웹 사이트의 유기적인 트래픽을 만들기 위한 키워드 선정 방법 5가지에 대해 생각해 봤습니다. 구글의 입장에서 웹 사이트와 웹 페이지 내에서 근접(Relevant)한 웹 사이트를 노출 시키고 싶을…

  • HSTS 설정방법

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

  • [SEO] Internal PageRank

    내부 페이지랭크(Internal PageRank)란 무엇인가? 내부 링크에 링크 점수를 어떤 방법으로 배분해 줘야 할까? 계산 방법은? 링크 방식은 앵커 텍스트를 사용할지..? 등을 고민할 수 있습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기1. PageRank에 대해 구글 이전의 검색 엔진은 정교하지 않았습니다. 검색 엔진에서 얻는 콘텐츠의 품질은 사람들이 원하는 품질의…

  • [SEO] 링크 교환이란? | 상호링크, 백링크 교환

    검색 엔진 최적화를 위해 온페이지 SEO만으로는 많은 시간이 소요될 수 있습니다. 오프페이지 SEO 중 하나인 백링크를 생각하게 되며, 링크 빌딩을 위한 링크 교환에 대해 생각하게 됩니다. 링크 교환(Link-Exchange)이란 각각의 다른 웹사이트가 링크를 교환함으로써 링크 주스(점수)를 보내는 것입니다. 상호 링크, 상호 백링크라고도 부릅니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3….

  • [SEO] 이미지 메타 데이터가 SEO에 미치는 영향 및 수정 방법

    웹 사이트를 운영하면서 비용이 발생하지 않는 유기적인 트래픽을 획득하려면 웹 사이트 속도, 백링크, 이미지 대체 텍스트 등 다양한 방법을 적용하며 운영하게 됩니다. 웹 사이트 SEO에 약간의 점수를 더 얻고 싶다면 이미지 메타 데이터에 대한 고려를 생각해 볼 수 있습니다. 생성한 콘텐츠가 첫 페이지에 뜨지만 1~3번째 노출하기 위한 여러가지 방법이 있지만 작문 실력 외에…

  • 도메인: 정의 및 개념 | 최상위 도메인(TLD)의 종류

    도메인은 원래 ‘영토, 영역, 분야’ 등을 뜻하는 단어로, 오늘날에는 인터넷 주소의 의미로 확장되어 사용되고 있습니다. 도메인은 인터넷에서 웹사이트에 접속할 때 사용하는 사람이 읽기 쉬운 주소입니다. 웹사이트는 본래 고유한 IP 주소(숫자)로 구분되지만, 기억하기 어렵기 때문에 문자 기반의 도메인을 사용하게 되었습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 ✅…