[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

  • TTFB 속도(Time To First Byte Speed)

    TTFB란 서버에 HTTP 요청이 보내진 후 클라이언트의 브라우저가 첫 정보를 수신하는데(첫 번째 바이트를 읽는데 걸린 시간) 소요된 시간을 의미합니다. TTFB는 DNS 속도 측정 이후에 계산되는 것으로 오해하는 경우가 많지만 네트워킹에서 TTFB는 DNS를 포함한 네트워크 대기 시간이 포함됩니다. 1. TTFB 과정 3단계 1.1 TTFB 서버 요청 클라이언트가 도메인을 입력 후 웹 사이트를 방문했을 때…

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

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

  • 정보형 블로그 콘텐츠 패턴 4가지 정리

    정보 중심의 정보형 블로그 콘텐츠를 작성하려고 할 때 다소 제목이나 내용이 식상하거나 막상 글을 작성하는 단계에서 H1 제목부터 H2 이하 소제목이 어색하게 바뀌는 등, 막상 제목이나 본문 구성이 어색하게 느껴지는 경우가 많습니다. 내가 생각한 것이 좋은 내용이고 훌륭한 아이디어와 독창적인 내용이 맞음에도 이 내용을 글 안에 녹여 내는 건 만만치 않은 작업입니다. 정보…

  • 웹 사이트 사이드바 왼쪽과 오른쪽 중 더 나은 선택은?

    PC 영역에서 웹 사이트 사이드바 왼쪽과 오른쪽 중에 어느 곳에 배치할 지 고민을 하게 됩니다. 대부분의 웹 사이트에서 사이드바Sidebar는 오른쪽에 있습니다. 페이지 내부에 위치한 정적인 페이지입니다. 사이드바의 용도에 대해 먼저 알아 보겠습니다. 1. 웹 사이트 사이드바 용도 사이드바는 PC 영역에서 주로 사용되며 모바일로 검색을 하는 시기에 많은 사람들이 데스크톱을 사용하지 않습니다. PC 전용…

  • Windows10 hosts 파일 수정

    ‘Windows10 hosts 파일 수정’은 보통 서버 이전이나 계정 이전 작업 후 DNS 레코드를 변경하기 이전에 이전 된 서버로 작업이 잘 이루어졌는지 미리 확인할 필요가 생긴다.일일이 DNS 서버 A레코드를 수정하여 확인하는 방법은 너무 번거롭기 때문에 hosts 파일을 수정하여 테스트 하는 게 좋은 방법 중 하나 이다.호스트는  DNS(도메인 이름 시스템)에서 제공하는 정보 없이 호스트 파일에…

  • SEO를 위한 타이틀 태그: H1 태그와 차이점과 올바른 사용법

    타이틀 태그는 구글 등의 검색 엔진에서 검색 엔진 결과 페이지(SERP)에서 링크로 표시됩니다. 타이틀 태그(Tltle Tag)란 웹페이지 제목을 지정하며, HTML 요소입니다. 타이틀 태그 SEO(검색엔진최적화)를 위해 웹페이지의 콘텐츠에 대해 정확하고 간결한 설명을 필요로 합니다. SERP에 나오는 방식은 아래와 같습니다. 확인된 것처럼 [검색엔진 최적화(SEO)란 무엇일까? 라는 글에서 제목 및 메타 디스크립션을 확인할 수 있습니다. 제목 태그는…