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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • HTML 태그: SPAN 태그와 DIV 태그 차이와 용도

    웹 페이지를 구성할 때 자주 사용되는 태그가 div 태그와 span 태그 그리고 p 태그입니다. p(paragraph)는 단락을 나타내는 의미적 요소입니다. div(division)는 구획 및 구분의 약자로, 문서의 구조를 나누는 데 사용하는 블록 태그입니다. span은 텍스트 일부를 감싸는 데 사용하는 범용 태그입니다. 목차1. 개발자모드 실행 방법2. 크롬 개발자도구 한국어 변경 및 다크모드 설정3. 동기화 설정하기✅ SPAN…

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

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

  • 정보형 블로그 콘텐츠 패턴 4가지 정리

    정보 중심의 정보형 블로그 콘텐츠를 작성하려고 할 때 다소 제목이나 내용이 식상하거나 막상 글을 작성하는 단계에서 H1 제목부터 H2 이하 소제목이 어색하게 바뀌는 등, 막상 제목이나 본문 구성이 어색하게 느껴지는 경우가 많습니다. 내가 생각한 것이 좋은 내용이고 훌륭한 아이디어와 독창적인 내용이 맞음에도 이 내용을 글 안에 녹여 내는 건 만만치 않은 작업입니다. 정보…

  • 카카오톡 다크모드 설정 방법 2가지(모바일&PC)

    웹 검색이나 앱(App) 사용을 할 때 눈의 피로감을 덜 하기 위해 다크모드 설정 후 사용을 많이 합니다. 다크 모드의 장점은 어두운 화면일 수록 방출되는 빛의 양이 줄어들어 눈의 피로감 역시 줄어듭니다. 다크모드는 전력 소비도 줄일 수 있어 휴대폰 사용 시 방전되는 기간을 늘릴 수 있습니다. 카카오톡 다크모드 설정 방법 모바일과 PC에 대해 하나…

  • [Chrome App-PC] 세이프 브라우징 설정 방법

    Google의 데스크탑 및 모바일 앱인 Chrome 세이프 브라우징은 유저가 위험한 웹사이트를 탐색하는 중 위험한 파일을 다운로드 하려고 할 때 사용자에게 경고하는 구글의 서비스입니다. 랜섬웨어, 스파이웨어, 바이러스, 웜 및 트로이 목마를 포함한 맬웨어 등의 감염을 사전에 방지할 수 있도록 해 주는 서비스인 것이죠. 크롬 브라우저를 사용하던 중 빨간 화면의 안내 창을 본 적이 있을…

  • SEO를 위한 타이틀 태그: H1 태그와 차이점과 올바른 사용법

    타이틀 태그는 구글 등의 검색 엔진에서 검색 엔진 결과 페이지(SERP)에서 링크로 표시됩니다. 타이틀 태그(Tltle Tag)란 웹페이지 제목을 지정하며, HTML 요소입니다. 타이틀 태그 SEO(검색엔진최적화)를 위해 웹페이지의 콘텐츠에 대해 정확하고 간결한 설명을 필요로 합니다. SERP에 나오는 방식은 아래와 같습니다. 확인된 것처럼 [검색엔진 최적화(SEO)란 무엇일까? 라는 글에서 제목 및 메타 디스크립션을 확인할 수 있습니다. 제목 태그는…