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

Author:jarvis Hours 등록일 Hours 업데이트

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

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

1. 크롬 개발자도구 기능

1.1 요소Elements panel

Chrome devtools은 브라우저에 내장되어 웹페이지의 요소 검사에서 HTML과 DOM 뷰어와 편집기를 사용할 수 있습니다. 요소 검사를 이용해서 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

  • [Chrome]구글 성인 인증 방법 | 성인 인증 없이 검색하는 방법 4가지

    Published:jarvis

    한국에서 구글링을 하면 적절하지 못한 단어는 구글 세이프 서치에 막혀 청소년이 아니더라도 유해한 결과로 판단되어 구글 성인 인증을 해야 하는 경우가 있습니다. 핸드폰으로 성인 인증을 받았더라도 불편할 때가 있습니다. 구글의 정책은 현지법에 따르는 점을 참고해야 합니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8 보안Security panel2. F12…

  • SEO: 구글 알고리즘 순위 요소

    Published:wilson

    구글은 전 세계 점유율의 90% 이상을 차지할 정도로 검색 엔진 시장에서 독보적인 위치를 가지고 있습니다. 검색 엔진 최적화(SEO) 중에서도 특히 구글 SEO에 중점을 두는 이유이기도 하며, 구글 SEO를 결정하는 구글 알고리즘 순위 요소는 항상 주목해야 하는 요소입니다. 15년 동안 ‘First Page Sage’는 구글 알고리즘에 대한 지속적인 연구를 하고 결과를 발표했습니다. 목차1. 크롬 개발자도구…

  • DNS 레코드 확인 및 네임서버 성능 측정 사이트

    Published:jarvis

    DNS(Domain Name System)는 호스트의 네트워크 주소 변경을 수행하기 위해 개발된 시스템입니다. 기본 호스트 서버로 연결되기 전에 보통의 경우 IP 주소를 대신해서 사용하는 주소인 도메인은 DNS에 의해 IP와 도메인을 연결해 줍니다.DNS 레코드 확인을 편하게 할 수 있는 “whatsmydns”와 DNS 서버의 성능을 측정할 수 있는 “DNSPerf”에 대해 알아 보겠습니다. 호스팅 서비스를 이용하게 되면 공유 호스팅과…

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

    Published:jarvis

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

  • [Chorome]구글 세이프 서치 해제 방법(PC&모바일-1분 미만)

    Published:jarvis

    구글링 중 원하는 자료를 찾기 위해 구글 세이프서치 해제를 해야 하는 경우가 생길 수 있습니다. 구글의 고유 기능 중 하나인 구글 세이프 서치는 구글링 결과에 선정적인 콘텐츠가 표시되는 것을 필터링 하는 기능입니다. 폭력적이거나 선정적이고 성적인 콘텐츠가 노출되지 않게 필터링 된 구글의 기능으로 자녀가 있는 가정의 PC에서는 유용한 기능일 수 있지만 선정적인 콘텐츠를 찾지…

  • 무료 VPN 추천 TOP5&유료 TOP3 | VPN이란?

    Published:jarvis

    VPN이란 가상 사설망(Virtual Private Network)이란 뜻을 가지고 있으며, 공용 네트워크를 사용할 때 보호된 네트워크 연결 설정을 제공합니다. 주요 기능은 인터넷 트래픽을 암호화하여 온라인 상의 공용 네트워크 IP(공용 IP)를 보호하게 됩니다. VPN에 대한 정보와 가볍게 사용할 수 있는 VPN 종류 및 추천할 수 있는 무료 VPN에 대해 알아 보겠습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements…