[Web Crawling] DevTools

웹 개발자 도구

- 웹 개발자 도구(DevTools)란 웹 개발자들에게 웹페이지의 구조, 스타일, 동작을 분석하고 디버깅할 수 있도록 도와주는 브라우저 내장 도구

- 웹브라우저에 포함되어 있는 경우가 많다. ex) 크롬, 엣지, 사파리

 

웹개발자 도구의 필요성

- 웹페이지의 레이아웃이 깨졌을 때 원인을 확인할 수 있다.

- HTML에 포함된 에러를 확인할 수 있다.

- 문제가 있는 태그의 위치를 확인할 수 있다.

 

웹 개발자 도구의 기능

Elements(HTML 요소)

- HTML과 CSS 구조를 실시간으로 확인하고 수정한다.

- 특정 태그에 적용된 스타일을 확인한다.

- 마우스로 해당 요소를 클릭해서 추적이 가능하다.

 

Console

- 자바스크립트 콘솔 출력 (정보, 경고, 에러) 메시지를 확인할 수 있다.

 

Sources

- HTML, CSS, Javascript 소스를 확인할 수 있다.

 

Network

- 웹페이지에 포함된 모든 리소스(파일)들의 네트워크 트래픽 정보, 상태 정보이다.

 

performance

- CPU와 메모리 성능 측정이 가능하다.

 

Memory

- 웹페이지가 사용하는 메모리 상세 정보이다.

 

Application

- 브라우저의 데이터 저장소 관리이다. ex) 웹 앱, 스토리지, 데이터베이스, 캐시, 쿠키

 

웹 개발자 도구를 이용한 크롤링

웹크롤링과 웹개발자도구 (DevTools)

- Elements 패널에서 원하는 데이터를 포함한 HTML 구조를 확인한다.

-> 원하는 데이터를 가지고 있는 태그가 어떠한 구조로 되어 있는지 확인한다.

 

- NetWork 패널에서 데이터가 어디서 어떻게 로딩되는지 분석한다.

     -> API 요청 확인

     -> 자바스크립트 확인

     -> 동적으로 변하는 데이터를 추적할 때는 Console과 sources를 활용해서 흐름을 파악한다.

 

import requests as rq
from bs4 import BeautifulSoup

url = 'https://news.naver.com/section/105'
res = rq.get(url)
html = res.text

soup = BeautifulSoup(html, 'lxml')
titles = soup.find_all(class_='sa_text_strong')

for idx, title_tag in enumerate(titles, 1):
    title = title_tag.text
    print(f'{idx}: {title}')
    
    
    
url = 'https://books.toscrape.com/'
res = rq.get(url)
soup = BeautifulSoup(res.text, 'lxml')
tags = soup.find_all('article',class_='product_pod')
for i, tag in enumerate(tags,1) :
    title = tag.find('h3').find('a').get('title')
    print(f'{i}: {title}')