클론코더

용어 사전

개발자 도구DevTools

브라우저에 들어 있는 도구. Elements 패널에서 지금 페이지의 DOM을 볼 수 있다

개발자 도구는 크롬, 엣지 같은 브라우저에 들어 있는 도구입니다. 지금 보고 있는 페이지의 DOM, 오류, 서버와 주고받은 요청을 볼 수 있습니다. 크롬에서는 페이지의 아무 곳에서나 오른쪽 버튼을 눌러 검사를 고르거나, F12(Mac은 Cmd + Option + I)를 누르면 열립니다.

위는 books.example.com 책방 페이지로, 첫 번째 책 제목 A Light in the Attic에 검사로 고른 글자라는 표시가 있다. 아래는 개발자 도구의 Elements 패널로, body, article, h3 아래 a 요소 줄이 강조되어 있고 끝에 == $0이 붙어 있다.
화면에서 검사로 고른 글자와, Elements 패널에 표시된 그 요소

자주 쓰는 패널

  • Elements: 지금 페이지의 DOM 트리입니다. 화면의 요소를 검사로 고르면 그 요소의 줄로 바로 이동합니다.
  • Console: JavaScript 오류와 로그가 나옵니다. 화면이 하얗게 나올 때 가장 먼저 볼 곳입니다. 코드를 직접 입력해 실행할 수도 있습니다.
  • Network: 페이지가 서버와 주고받은 요청 목록입니다. 어떤 주소로 무엇을 받았는지, 실패한 요청이 있는지 볼 수 있습니다.

크롤러를 만들 때

원하는 글자를 검사로 고르면 그 글자가 DOM의 어디에 있는지 보입니다. 선택자를 정했다면 Console에서 먼저 확인해 볼 수 있습니다.

document.querySelectorAll("h3 a").length   // 20이 나오면 책 20권을 모두 고른 것

다만 개발자 도구가 보여 주는 것은 JavaScript가 고친 뒤의 DOM입니다. 크롤러가 받는 처음 HTML과 다를 수 있으니, 크롤러 결과가 비어 있다면 페이지 소스 보기에서도 찾아봅니다.

아래는 작은 책방 페이지와 개발자 도구를 흉내 낸 것입니다. 화면의 글자에 마우스를 올리면 Elements 패널의 그 줄이 표시됩니다. Console에 선택자를 넣어 몇 개가 고르는지도 확인해 보세요.

직접 해 보기검사와 Console로 선택자 확인하기
books.example.com

책방

ElementsConsoleNetwork
  1. <body>
  2. <h1>책방</h1>
  3. <article class="book">
  4. <h3><a title="A Light in the Attic">A Light in the …</a></h3> == $0
  5. <p class="price">£51.77</p>
  6. </article>
  7. <article class="book">
  8. <h3><a title="Tipping the Velvet">Tipping the Velvet</a></h3>
  9. <p class="price">£53.74</p>
  10. </article>
  11. </body>
>document.querySelectorAll("").length
화면에서 고른 요소는 Elements 패널의 4번째 줄입니다. 크롤러를 만들 때도 이렇게 원하는 글자가 DOM의 어디에 있는지부터 확인합니다.

AI에게 오류를 물을 때

"화면이 안 나와요"라고 쓰기보다 Console에 찍힌 빨간 오류 문구를 그대로 붙여 넣는 편이 훨씬 정확한 답을 받습니다. 오류 문구에는 어느 파일 몇 번째 줄에서 무슨 일이 있었는지가 적혀 있습니다.

헷갈리기 쉬운 말

페이지 소스 보기와 Elements 패널

페이지 소스 보기는 서버가 처음 보낸 HTML이고, Elements 패널은 그 뒤에 JavaScript가 바꾼 지금의 DOM입니다. 크롤러가 받는 것은 앞쪽입니다.

이 용어가 나오는 Lesson

크롤러: 웹페이지에서 데이터 가져오기크롤러는 어떻게 원하는 글자만 골라낼까?

함께 보면 좋은 용어