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

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

1. 개발자모드 실행 방법

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

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

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

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

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

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

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

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

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

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

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

3. 동기화 설정하기

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

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

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


Similar Posts

  • 크롬 개발자 도구 Coverage: 사용하지 않는 코드(CSS, JS) 찾기

    웹사이트의 속도는 단순히 서버 응답이나 캐시 설정뿐 아니라, “얼마나 많은 코드가 실제로 사용되는가”에 따라 크게 달라집니다. 크롬 개발자 도구 Coverage 탭은 페이지에서 로드된 CSS·JavaScript 파일의 실제 사용 비율을바이트 단위로 분석하여, 코드 낭비를 한눈에 시각화 해주는 도구입니다. 특히 워드프레스와 같은 CMS 환경에서는 테마·플러그인별로 불필요하게 로드되는 리소스가 많기 때문에,Coverage 탭은 사용하지 않는 자바스크립트 및 css…

  • [구글 렌즈] 구글 이미지 검색 방법(PC&모바일 앱)

    PC 또는 모바일에서 가지고 있는 이미지와 비슷한 이미지를 찾아야 하는 경우에 보통 구글 렌즈를 이용한 이미지 검색 기능을 활용합니다. 구글 이미지 검색을 하는 이유는 보통 특정 장소의 동·식물, 미술품과 같은 작품에 대해 텍스트로 물어볼 수 없는 이유가 있습니다. 이를테면 식물원에 갔는데 어떤 식물인지 궁금하지만 텍스트로 검색해서 확인할 수 없는 경우에 모바일 크롬의 구글…

  • SEO 클로킹이란? 피해야 할 3가지 사항

    2023년 워드프레스 블로그로 수익 창출을 목표로 시작하는 분들이 많아졌습니다. 하지만 티스토리 블로그와 비슷하게 마치 종교처럼 글 1~2개 잘 쓰면 마치 한달 500만원, 천 만원을 벌 수 있는 것처럼 홍보하는 유튜브가 많아진 해이기도 합니다. 구글 상위 노출을 위해 검색엔진최적화(SEO)가 진행되어야 하며, 필수 사항이 맞습니다. 전 세계적으로 검색 엔진 시장의 규모는 매우 큽니다. 필수 사항이면서…

  • [SEO] Black Hat SEO란? | 구글 웹 검색 스팸 정책 | 워드프레스 저품질 방지를 위한 15가지 점검 사항

    블랙햇 SEO(Black Hat SEO)는 부도덕한 방법으로 상위 노출과 유기적인 트래픽을 노리는 검색엔진최적화 전략을 의미합니다. 블랙햇의 유래는 서부 영화에 나오는 악당들이 검은 모자를 쓰고 등장하는 것에서 유래되었습니다. 단기적으로 성과를 낼 수 있지만 장기적인 관점에서 낮은 품질의 콘텐츠 등으로 인식될 수 있습니다. Black Hat SEO의 반대인 White Hat SEO와 Grey Hat SEO가 있습니다. 목차1. 개발자모드…

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

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

  • magicxml 프로그램 삭제

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