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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • [SEO] 링크 빌딩(Link Building)이란 무엇인가?

    검색 엔진 최적화(SEO)를 위한 여러가지 방법 중 링크 빌딩(Link Building)은 필수 요소 중 하나가 되었습니다. 이 글에서는 링크 빌딩이 무엇이며, 어떤 방법으로 이용되는지 알아 보겠습니다. 구글 및 기타(야후, 빙 등) 검색 엔진 순위를 높일 수 있는 Link Building(링크 구축)은 다른 웹 사이트로부터 내 웹 사이트로 품질 좋은 백링크를 말합니다. 목차1. 개발자모드 실행 방법2….

  • Avast Browser 삭제 방법

    Avast 바이러스 프로그램을 삭제한 이후에도 Avast Browser가 남아 있어 PC 부팅 후 자동으로 브라우저가 나오는 불편한 경우가 있습니다. 불필요한 Avast Browser 삭제 방법을 알아 보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기윈도우 탐색기 어베스트 세이프존 부라우저를 삭제하려고 제어판에 들어갔지만 삭제할 항목이 확인되지 않는 경우입니다. 먼저 윈도우 탐색기를…

  • SSL보안인증서 법규정

    SSL보안인증서는 개인정보를 취급하는 모든 웹사이트에 의무적으로 구축하도록 대한민국 법 규정에 정해져 있습니다. SSL보안인증서 법규정은 로그인이 필요한 개인정보가 있는 웹사이트와 (회원정보가 없어도)결제 모듈이 구축된 개인정보를 취급하는 쇼핑몰에 SSL보안인증서 설치가 필수라는 것입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 1. HTTPS란 HTTPS란 하이퍼 텍스트 전송 프로토콜 보안 (HTTPS) 사용하는…

  • 크롬 개발자 도구 네트워크 탭 성능 테스트 가이드

    웹사이트의 실제 성능을 분석하려면 단순한 속도 점수보다는 브라우저가 리소스를 어떻게 로드하는지 직접 확인해야 합니다. 크롬 개발자 도구 네트워크 탭은 페이지가 로드되는 동안 발생하는 모든 요청을 실시간으로 추적하여, 병목 구간·캐시 정책·응답 속도를 정확히 파악할 수 있는 가장 강력한 도구입니다. 이 글에서는 네트워크 탭의 주요 항목과 리소스 분석 방법을 단계 별로 살펴보며, 워드프레스와 같은 CMS…

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

    검색엔진최적화SEO를 진행할 때 처음에 접하게 되는 단어중 하나가 사이트맵SiteMap입니다. Sitemap이란 무엇이며, 어떤 용도로 사용되는지 알아 보겠습니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기 사이트맵 정의 Sitemap이란 구글 및 네이버와 같은 검색 엔진 봇이 색인을 진행할 페이지를 나열한 XML 파일입니다. 이름처럼 웹 사이트를 방문한 크롤러(봇)에게 지도와 같은 역할을…

  • [SEO]구글 판다(Google Panda)

    구글 판다(Google Panda) 알고리즘은 2011년 2월에 출시된 구글의 검색 순위 결정 알고리즘입니다. 판다의 초기 출시 후 영어 검색 결과에 12%의 영향력을 주었던 판다의 목적은 “낮은 품질의 사이트” 및 “빈약한 콘텐츠의 사이트”의 순위를 낮추는 것이 목표였습니다. 또한 다수의 프리렌서 작가를 고용하거나 자동화 된 도구를 이용해서 검색 알고리즘을 충족해서 웹 콘텐츠를 생성하는 회사의 순위를 낮추는…