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

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

1.打开网页，调出开发者工具。

•按F12快捷键

•右键检查元素调出

•快捷键Ctrl +Shift +i

2开发者工具简单介绍

 

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

• Elements:解析显示页面的组成元素，也就是当前看到Chrome渲染页面所需要的HTML、CSS和DOM（Document Object Model）对象。此外，还可以编辑这些内容以改变页面显示结果。

• Console:显示各种警告与错误信息，并且提供了Shell 用来与文档、开发者工具交互。///控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行~

• Network:显示当前页面向服务器请求了的资源、资源的大小、加载资源花费的时间以及资源加载是否成功。此外，还可以查看HTTP的请求头、请求参数、响应内容，JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

• Sources:可以在源代码面板中设置断点来调试JavaScript,或者通过Workspaces（工作区）连接本地文件来使用开发者工具进行实时编辑。

• Memory:如果需要比Performance提供更多的信息，可以使用Mernony面板， 例如跟踪内存泄漏等。

• Performance: 可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

• Application: 检查加载的所有资源，包括IndexedDB与Web SQL数据库、本地和会话存储、Cookie、应用程序缓存、图像、字体和祥式表。

• Audits:分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案

• Security:安全面板可以调试混合内容问题、证书问题等。

其中最常用的四个功能模块：元素（ELements）、控制台（Console）源代码(Sources)，网络（Network）。

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

3.Elements面板

选择Elements面板，单击工具栏最左侧的鼠标按钮（或按快捷键Ctrl+Shift+C）后，单击页面任意元素，在详细区域会被高亮显示，再次单击可退出该模式。

 

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

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

 

                                                               元素定位

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

 

 4.Network面板

在打开一个网页时，会发起相应的HTTP请求，而Network面板能够监听记录所有的网络访问请求与响应请求。这一点在分析异步加载请求时非常有用。此处以搜索首页为例。如图：

 

                                                                                 Network面板

选中某一条请求，以第一个nicon-2x-6258e 1cf13.png为例，查看请求详细信息。如图所示：

 

                                                                         请求数据信息

详细信息包括Headers、Preview、Response、Initiator、Timing5个标签页。（有些只有Headers、Preview、Response、Timing四个标签页）

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

• General: HTTP请求的基本信息，包括请求地址、请求方法、响应状态码、远程IP、资源访问策略。

• Response Headers: 服务器返回的头部信息，包括连接状态、内容返回类型、时间等信息。

• Request  Headers: 发起请求的头部信息，包括接受类型、接受语言、连接状态等，需要关注的是User-Agent，某些网站对爬虫类User-Agent会有限制，比如Scrapy框架默认的User-Agent。因此需要对该值进行手动修改。

2）Preview标签页对返回的信息进行格式化预览，如图：

 

 　　　　　　　　　　　　　　　　Preview预览返回结果

3）Response标签页则显示相应的信息。（上一个页面不小心被关了，因此重新调另一个，但功能大同小异）如图：

 

 4）Timing标签页显示每一步动作所消耗的时间，如图：

 

                                                                             Timing标签页

 5.控制台（Console）

.查看JS对象的及其属性：回车显示结果。

执行JS代码：

查看控制台日志：

当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。

 

关于开发工具这里只是简单介绍，毕竟作为新手小白，自己也还是有很多地方不懂。这里就推荐一个大佬写的更详细关于浏览器开发人员工具的文章：

https://www.cnblogs.com/yaoyaojing/p/9530728.html