爬虫学习笔记：Chrome开发者工具

如何通过Chrome开发者工具寻找一个网站上特定数据的爬取方式。

一、查看网页源代码

在网页上右键，选择 查看网页源代码（Ctrl+U），可显示URL对应的HTML代码文本。

内容与通过代码向URL发送GET请求所得到的结果一致。

通过正则表达式、bs4、xpath等方式可以在文本内容中搜索需要的数据，进行提取。

对于异步加载数据的网站，页面无法搜索得到。

或者因为权限、验证码等限制，代码获取得到结果与页面显示不同。

二、审查元素 F12

在网页上右键，选择 检查、审查元素，可进入Chrome开发者工具中的元素选择器。

Elements 标签页：

• 选择元素：鼠标定位
• 模拟器：模拟设备效果
• 代码区：HTML代码、选中元素对应路径
• 样式区：CSS样式

Elements 看到的代码不等于请求网址拿到的返回值。

它是网页经过浏览器渲染后得到的最终效果。

三、网络 Network

选择 Network 进入网络监控功能，即“抓包”。

对于通过异步请求获取到的数据，找到其来源，包括：数据、JS、CSS、图片、文档等。

点击“搜索”功能，可直接对内容进行过滤。

抓取需要考虑几个问题：

• 请求方法：GET or POST
• 请求附带的参数数据：传递参数
• Headers信息：user-agent、host、referer、cookie等

Network 还有个功能：右键点击列表，选择“Save as HAR with content”，保存到文件。

这个文件包含了列表中所有请求的各项参数及返回值信息。

四、资源 Sources

查看资源列表和调试 JS。

五、Console

显示页面的报错和输出，并且可以执行 JS 代码。

参考链接：爬虫必备工具，掌握它就解决了一半的问题