[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

  • [SEO] 페이지 권위(Page Authority)란 무엇인가?

    Published:jarvis

    검색엔진최적화를 위한 여러가지 항목 중 ⓐ도메인 권한과 ⓑ페이지 권위(or 페이지 권한)이란 용어가 존재합니다. SEO 기업으로 유명한 Moz에서 개발한 웹사이트 채점 결과 1~100까지 나타내 주는 순위입니다. 구글을 포함한 검색 엔진에서 순위가 어느 정도인지 가늠할 수 있는 측정 항목으로 사용되며, 페이지 권한(Page Authority) 점수가 높을수록 구글 첫 페이지에 콘텐츠가 표시될 확률이 높아집니다. 검색 엔진 결과…

  • 유튜브 크리에이티브 커먼즈 라이선스 확인 방법 3가지-저작권 걱정 없이 동영상 확인하는 방법

    Published:wilson

    유튜브는 업로드 한 모든 영상에 표준 YouTube 라이선스를 기본 설정으로 하고 있습니다. 표준 라이선스는 유튜브에 방송 권한이 부여되어 있기 때문에 시청 외 동의 없는 재사용 및 편집을 금지하고 있습니다. 유튜브 동영상을 사용하려면 ‘유튜브 크리에이티브 커먼즈 라이선스’ 약관에 따라 표기된 CC BY 라이선스(이용 및 재사용 가능)를 사용해야 합니다. 유튜브에서 만들어진 자료에 저작권 걱정 없이…

  • POP3 IMAP 차이점은 무엇인가요?

    Published:jarvis

    이메일 프로토콜 시스템 POP3 IMAP 차이점은 무엇일까요? POP3(Post Office Protocol version 3)의 경우 TCP/IP 기반으로 이루어진 프로토콜로 메일 서버에서 수신한 이메일을 컴퓨터로 가져오기 위해 사용 됩니다. POP3는 원래 컴퓨터 한 대에서만 사용하도록 설계된 오래된 프로토콜입니다. IMAP((Internet Message Access Protocol)와 같이 양방향 동기화 통신을 사용하는 최신 프로토콜과 달리 POP3는 일방향 전자메일 동기화만 지원이 됩니다. 목차1….

  • HSTS 설정방법

    Published:i-var 'theboneless'

    HSTS는 기존 HTTPS 프로토콜을 사용하면서 보안을 한층 강화한 방식입니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때 1. HSTS 설정방법 HSTS 설정방법은 리눅스 서버에서 설정하는 방법과 사용하는 CDN 서비스에서 지원하는 경우 CDN에서 설정하는 방법 등이 있습니다. 리눅스 서버에서…

  • 크롬 개발자 도구 정의와 목적 5가지

    Published:I-var uknew

    크롬 개발자 도구란 웹 개발자와 디자이너가 웹사이트의 코드 구조, 성능, 반응형 디자인, 보안, SEO 품질을 점검·개선하기 위해 사용하는 크롬 브라우저 내장 기능입니다. 페이지 속도 측정, 디버깅, 네트워크·리소스 분석 등 웹사이트 품질을 높이는 모든 과정을 한 곳에서 수행할 수 있습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8…

  • Namecheap Domains Vs Google Domains 포함 5개 도메인 등록 기관 비교

    Published:wilson

    워드프레스로 구축된 웹 사이트를 포함해서 사이트를 운영할 경우 도메인은 필수 요소입니다. 대표적인 도메인 등록 업체 Namecheap Domains과 Google Domains을 포함한 도메인 업체에 대해 비교해 보겠습니다. 먼저 우리가 알고 있을 만한 대표적인 도메인 등록 기관에 대해 알아 보겠습니다. 목차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….