[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] 구글 검색 상태 대시보드(2023년 8월)

    구글이 2023년 8월 Google Search Status Dashboard(구글 검색 상태 대시보드) 업데이트를 발표 했습니다. 구글에서 검색 진행 시 최신 순위 업데이트 중 ‘웹사이트 소유자’와 관련된 업데이트가 표시된다고 합니다. 구글 검색 상태 대시보드에 표시되는 내용 다음과 같은 내용을 확인할 수 있습니다. 상태 정의 사용 가능 시스템이 대체적으로 작동하고 있으며 사용 가능합니다. 시스템 정보 시스템이 업데이트되거나…

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

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

  • 구글 페이지스피드 인사이트: 코어 웹 바이탈로 보는 웹사이트 속도 최적화 가이드

    구글에서 만든 페이지스피드 인사이트는 웹사이트의 속도와 사용자 경험을 측정해주는 대표적인 성능 분석 도구입니다. 단순히 웹사이트 속도 측정을 위한 페이지 로딩 시간을 평가하는 것을 넘어, 코어 웹 바이탈 평가 지표를 기반으로 사이트의 전반적인 품질을 진단하고 개선 방향을 제시합니다. 코어 웹 바이탈은 실제 사용자 경험을 수치화한 3가지 핵심 지표로, 주요 콘텐츠가 화면에 표시되는 속도(LCP: 최대…

  • 클라우드플레어 CDN 설정(Pro 플랜)

    클라우드플레어 CDN을 예전에 사용했었는데 최근 다른 워드프레스 사이트에 재 연결을 하게 되었습니]다. 캐시 플러그인은 현재 사이트와 동일한 조건으로 세팅했는데 무료 플랜은 속도가 현재 사이트에 근접하지 못하고 오히려 느린 결과를 보였습니다.(현재 사이트는 클라우드플레어 CDN이 적용되지 않은 상태입니다) 원래 사이트처럼 동일하게 세팅해서 속도를 높일까 고민하다가 Pro플랜으로 업데이트 했습니다. 확실히 업데이트 후 현재 사이트보다 조금 느리지만…

  • 한글 맞춤법 검사기-부산대학교 맞춤법 검사기N네이버 맞춤법 검사기

    한글 맞춤법 검사기는 부산대학교 맞춤법 검사기와 네이버의 맞춤법 검사기 두 개가 가장 널리 사용되고 있습니다. 한글 맞춤법 검사기 정의 맞춤법 검사기(spell checker)란 사용자가 입력한 문장을 사전을 기반으로 검사하고 자동으로 올바른 형태로 변환해주는 기능입니다. 부산대학교 인공지능연구실과 나라인포테크가 협력하여 개발한 대한민국에서 가장 널리 사용되는 한국어 맞춤법 및 문법 검사기입니다. 1991년부터 부산대학교 전기컴퓨터공학부 권혁철 교수가 개발을…

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

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