[Chrome] 크롬 개발자도구 기능 개요

공정위 광고 문구 Ver 2.0

크롬 개발자도구의 주요 기능은 웹 개발자가 웹사이트의 코드 테스트 디버그 작업을 할 수 있습니다. 파이어폭스, 마이크로소프트 엣지, 크롬 등 웹 브라우저에는 크롬처럼 ‘웹 개발 도구(Web development tools)’가 포함되어 있습니다. 크롬 개발자도구 기능은 개발자에게 유용한 도구임이 분명합니다. ‘devtools‘이라는 줄임말로 많이 사용되고 있습니다.

※디버그(debug)
디버깅 or 디버그는 컴퓨터 프래그램 개발 중 발생하는 시스템의 버그를 찾고 수정하는 작업입니다.

1. 크롬 개발자도구 기능

1.1 요소Elements panel

Chrome devtools은 브라우저에 내장되어 웹페이지의 요소 검사에서 HTMLDOM 뷰어와 편집기를 사용할 수 있습니다. 요소 검사를 이용해서 HTML과 DOM을 변경하고 페이지의 변경 사항을 테스트 해 볼 수 있습니다. 요소에 있는 CSS를 수정해서 개발 작업 전에 변경된 내용을 확인할 수 있습니다.

크롬 개발자도구 기능 요소

1.2 콘솔Console panel

자바스크립트 코드를 브라우저에서 테스트 할 수 있습니다.

1.3 소스Sources panel

HTML, CSS, JS 등의 코드를 디버그 합니다.

1.4 네트워크Network panel

또 네트워크 패널을 이용해 웹페이지의 이미지, 스크립트, 글꼴 등 외부 파일 형식 콘텐츠를 로드하고 이에 따른 로딩 시간 및 대역폭 사용량을 알 수 있습니다.

네트워크 패널-네트워크 로그

1.5 성능Performance panel

퍼포먼스를 이용해 웹 사이트의 성능을 테스트 할 수 있습니다.

1.6 메모리Memory panel

사용되는 메모리의 형태 작성 후 메모리 누수를 확인할 수 있습니다.

1.7 애플리케이션Application panel

쿠기와 스토리지 등 애플리케이션에 관련 데이터를 수집합니다.

1.8 보안Security panel

HTTPS의 유효한 연결 설정과 제공되는 리소스 등의 문제를 디버깅 할 수 있습니다.

2. F12 버튼으로 개발자 도구가 열리지 않을 때

F12 버튼으로 크롬 개발자도구가 열리지 않을 때 [Ctrl]+[Shift]+[I]를 눌러서 실행할 수 있습니다. 그래도 안된다면 크롬 브라우저 우측 상단 [더보기] 메뉴에서 실행 시킬 수 있습니다.

크롬 개발자도구가 열리지 않을 때

Similar Posts

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

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

  • URL 디렉터리 구조 vs 플랫 구조: SEO 성능과 웹사이트 운영 효율

    구글의 검색엔진 최적화(SEO) 기본 가이드에 따르면, URL 디렉터리 구조를 통해 유사한 주제의 페이지를 그룹화하는 것은 검색 엔진이 사이트 구조를 이해하고 색인을 최적화하는 데 유리합니다. 특히 사이트의 규모가 크거나 페이지 수가 많을수록 디렉터리(폴더) 단위로 콘텐츠를 체계적으로 묶어 두면 크롤러가 페이지 관계를 파악하고 크롤링 빈도를 조정하기 쉽습니다. 하지만 플랫 구조도 관리 효율성과 URL 단순성 측면에서…

  • NameCheap DNS 설정 및 레코드 설정 방법

    네임칩에서 도메인을 구매했다면, 원하는 회사 또는 네임칩의 기본 DNS 서버를 사용할 수 있습니다. 이 페이지에서 NameCheap DNS 서버 설정 방법을 안내합니다. 먼저 구매한 도메인의 관리 페이지의 도메인 리스트 탭으로 이동합니다. 맨 우측 관리 버튼을 클릭합니다. 1️⃣ NameCheap DNS 서버 설정 먼저 리디렉션 설정(NameCheap Basic DNS 기본 값)은 크게 필요하지 않고, 보통은 도착지가 www보다는…

  • 웹페이지 속도 측정 사이트 Big 4

    내가 운영하는 웹사이트의 속도가 어느 정도일까? 속도가 많이 느린거 같은데 개선이 필요하지 않은지 웹페이지 운영자라면 이 점을 고려하게 됩니다. 속도 측정 사이트 4군데를 알아 보겠습니다. 1. 구글 페이지스피드 인사이트 첫 번째 소개할 사이트는 구글에서 서비스 하고 있는 페이지 스피드 인사이트(PageSpeed Insights)입니다. 많은 사람들이 사용하는 사이트이며 특히 구글의 SEO(검색엔진최적화)를 위한 홈페이지를 운영하는 것을 타깃으로…

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

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

  • [SEO]검색 엔진 결과 페이지-SERP란? | 10가지 SERP 리스트

    검색엔진최적화(SEO)에 대한 관심이 한국에서도 늘어나는 추세입니다. 구축한 웹사이트를 단순하게 광고하는 방식이 아닌 자연 검색 트래픽으로 방문자를 늘리는 방식이지요. 구글은 사용자 경험을 포함 정보성 글을 중요하게 생각하며 AI가 등장한 이후 더더욱 이 추세는 강해지고 있습니다. 웹사이트의 글(Post)이 구글 첫 페이지부터 나오는 자연 검색 결과를 포함한 다양한 검색 엔진 결과 페이지(SERP:Search Engine Result Page)에는 어떤…