2.2 网页分析方法1：浏览器开发人员工具

爬虫作业中，最重要的一步就是提取数据。我们可以根据HTML结构来分析页面元素进行提取，也可以根据正则表达式提取对应的数据。分析HTML结构就需要用到浏览器开发人员工具。

浏览器开发人员工具可以详细地查看网页布局、请求、响应数据，是爬虫应用中非常实用的工具，也是常用的工具。下面以Chrome浏览器中的开发人员工具进行讲解，其他浏览器类似。

打开一个网页，按F12快捷键，打开Developer Tool，如图2.3所示。

可以看到主页面分为上面的工具栏与下面的信息展示栏两部分。工具栏有8个主要的工具可以查看开发工具：

• 　Elements：解析显示页面的组成元素，也就是当前看到Chrome渲染页面所需要的HTML、CSS和DOM（Document Object Model）对象。此外，还可以编辑这些内容以更改页面显示结果。
• 　Console：显示各种警告与错误信息，并且提供了Shell用来与文档、开发者工具交互。
• 　Network：显示当前页面向服务器请求了的资源、资源的大小、加载资源花费的时间以及资源加载是否成功。此外，还可以查看HTTP的请求头、请求参数、响应内容等。
• 　Sources：可以在源代码面板中设置断点来调试JavaScript，或者通过Workspaces（工作区）连接本地文件来使用开发者工具进行实时编辑。
• 　Memory：如果需要比Performance提供更多的信息，可以使用Memory面板，例如跟踪内存泄漏等。
• 　Performance：可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。
• 　Application：检查加载的所有资源，包括IndexedDB与Web SQL数据库、本地和会话存储、Cookie、应用程序缓存、图像、字体和样式表。
• 　Audits：分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案。
• 　Security：安全面板可以调试混合内容问题、证书问题等。

在爬虫开发中，主要用到的工具有Elements与Network。前者用于查看所需抓取的元素，后者用于查看HTTP请求的相关参数与方法。

2.2.1 Elements面板

选择Elements面板，单击工具栏最左侧的鼠标按钮后，单击页面任意元素，在详情区域会被高亮显示，再次单击可退出该模式，如图2.4所示。

通过此功能可以快速实现元素的定位，对调试代码非常有用。

在HTML页面中，每个元素（如<div>、<a>）都是一个DOM节点，所有的DOM节点组成了DOM树。因此可以把详情区域当作DOM树，把HTML元素标签看作DOM节点。同样，在单击选择DOM节点时，网页中对应的元素也会被高亮显示，如图2.5所示。

找到需要抓取的元素，在代码中一般使用CSS与XPath两种方式来实现定位。Elements面板中可以直接右击复制相应的定位方法，Copy selector为CSS路径，Copy XPath为XPath路径，如图2.6所示。

2.2.2 Network面板

在打开一个网页时，会发起相应的HTTP请求，而Network面板能够监听记录所有的网络访问请求与响应信息，这一点在分析异步加载请求时非常有用。例如访问伯乐在线左右文章页面，如图2.7所示。

选中某一条请求，以all-posts/为例，查看请求详细信息，如图2.8所示。

详细信息中有Headers、Preview、Response、Timing四个标签页。

（1）在Headers标签中，主要分为以下3部分。

• 　General：HTTP请求的基本信息，包括请求地址、请求方法、响应状态码、远程IP、资源访问策略。
• 　Response Headers：服务器返回的头部信息，包括连接状态、内容返回类型、时间等信息。
• 　Request Headers：发起请求的头部信息，包括接受类型、接受语言、连接状态等，需要关注的是User-Agent，某些网站对爬虫类User-Agent会有限制，比如Scrapy框架默认的User-Agent，因此需要对该值进行手动修改。

（2）Preview标签页对返回的信息进行格式化预览，如图2.9所示。

（3）Response标签页则显示相应的信息，如图2.10所示。

（4）Timing标签页显示每一步动作所耗费的时间，如图2.11所示。