【爬虫】02.浏览器中断点解析

断点介绍

我们在了解断点的类型之前，首先来了解一下如何进行调试。
首先，我们可以来到Sources界面，点开Snippets。
相信使用过IDE工具进行调试的对右侧中间的几个按钮不会陌生，
从第二个按钮开始分别是**单步(跳过方法)、步入、步出、单步(自动步入方法)**按钮。

最后两个按钮用于取消断点和异常断点(可结合Never Pause here绕过一些检测)。

下面我们开始介绍断点类型及其使用场景：

1.DOM断点

DOM断点可用于页面中样式改变(重新渲染)时进行中断

就例如，bing中的这个搜索框，当我们鼠标不在搜索框上时：

而当我们鼠标放到搜索框上时，会出现一个小叉

这种就属于页面样式发生改变，这时我们可以在element界面中右键进行下断。

选择的类型可以根据实际情况进行选择

下断之后重新将鼠标移到搜索框上，调试窗口会自动跳转到Source页面，并在对应的js代码上断住。

并且我们还能在旁边的DOM断点那栏看到我们下的断点位置：

优点：遇到代码混淆或者无法通过搜索方式找到定位词时可迅速断住。

缺点：离加密函数较远，无法根据栈快速定位。

2.DOM事件断点

如果直接使用DOM断点形式无法下断，我们可以使用DOM事件断点进行下断。

下断过程如下：

找到需要下断的按钮，可以是验证码发送或者登陆按钮，这里演示的是bing的搜索按钮：

选择之后，可以在旁边的调试工具上看到事件监听这一栏，会发现事件类型有点多，这时可以将上面的Ancestors All按钮去掉，只看当前按钮对应的事件：

点击上面的js代码定位链接，这时会跳转到对应的事件触发位置，这时我们就能够配合代码行断点进行调试了。

优点：遇到代码混淆或者无法通过搜索方式找到定位词时可快速定位
缺点：离加密函数较远，无法根据栈快速定位。

3.XHR断点

xhr，全称为XMLHttpRequest，用于与服务器交互数据，支持同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容，是ajax功能实现所依赖的对象。

以bing的这个搜索框为例，当我们输入文字的时候，浏览器就会向服务器发送ajax请求，将我们输入的内容发送给服务器。在下断之前我们需要找到通过XHR方式发送的数据包：

然后将数据包URL中域名后的目录名复制一下：

然后找到Sources中XHR断点这一栏，点击+，将刚刚复制的内容粘贴上去

然后可以试着在搜索框中输入内容：

成功被断住。

优点：离加密函数和解密函数都比较近
缺点：只能断住xhr方式发送的代码

4.代码行断点

代码行断点，最基本的一种断点类型，不过多讲解，直接看图：

5.代码断点

在代码中只要写下debugger相当于手动进行了代码行断点，当运行到debegger时就会断住。

6.全局事件断点

全局事件断点，浏览器中能使用的如下图框中所示，基本涵盖整个网页的生命周期，具体用法不一一介绍。

7.异常捕获断点

下断方式比较简单，像下图一样打开Source找到最后的那个像播放一样的按钮，将Pause on caught exceptions勾选上即可。

优点：在跟环境的时候能用到，可以去掉一下无用的try-catch，也可以过一些反调

总结

这是爬虫的第二篇，大家还没看第一篇【爬虫】01.浏览器F12-开发者工具的妙用的可以看一下哦～