"> 크롬 개발자 도구 "> 크롬 개발자 도구 ">

<head>
  <!-- HTML Meta Tags -->
  <meta charset="UTF-8" />
  <title> 크롬 개발자 도구 </title>
  <meta
    name="description"   content=" 크롬 개발자 도구를 사용하는 방법을 하나씩 살펴봅니다. "   />
  <meta name="keywords" content="개발자 도구, 크롬 개발자 도구, devtools, chrome devtools, 양파고, Yang Phago, 노션, 양파고 노션, notion " />

  <!-- Open Graph / Facebook -->
  <meta   property="og:title"   content="크롬 개발자 도구"  />
  <meta  property="og:description" content=" 크롬 개발자 도구를 사용하는 방법을 하나씩 살펴봅니다.  "  />
  <meta property="og:image" content="<https://i.postimg.cc/T1hgxtyM/image.gif>" />
  <meta property="og:url" content="<https://yangphago.oopy.io/5d4b7ceb-45a8-485e-b075-18300fac09ad>" />
  <meta property="og:type" content="website" />
</head>

목차(클릭하세요)

<aside> 💡 왜 알아야 할까? 웹 크롤링을 위해❤️

</aside>

1. Chrome DevTools란?

Chrome 브라우저에 내장되어 있는 웹 개발자 도구 모음

이게 왜 필요할까?
- 웹 페이지의 JavaScript 코드에 대한 디버깅
- 성능 탭을 사용하여 웹 애플리케이션의 로딩 시간과 실행 시간을 분석
- 네트워크 탭에서 웹 페이지가 로드될 때 서버와의 모든 네트워크 통신 모니터링
- 사실상 웹 크롤링을 하려면 개발자 도구를 어느정도 다룰 수 있어야 하며
  - 빠른 크롤링을 위해 웹사이트의 구조 파악, 에러 디버깅을 할줄 알아야 함, 이를 위해서 개발자도구를 반드시 사용해야 함

1-1. 공식 문서

Chrome DevTools | Chrome for Developers

1-2. 개발자 도구 접근방법

방법1: F12키
방법2(요소버튼 단축키): win + shift +c
방법3: 마우스 우클릭 후 ‘검사’확인하기

1-3. 조금 더 사용하기

오른쪽 상단 설정 아이콘 클릭→ 도크축 설정을 통한 개발자도구 위치 변경
개발자도구에서 실행하기: ctrl + shift + p

2. 핵심기능

2-1. 요소(Elements)사용하기

요소 패널은 html 태그와 선택된 요소의 스타일이 표시됨