断点 爬虫必备-如何使用Chrome DevTools花式打断点

原文:用断点暂停代码

参考这个指南，结合我手里的vue项目，可以说增加了原指南，因为在实践过程中会有很多指南之外的新发现。

主要内容包括如下:

预览几种不同的breakpoint类型代码行级断点 代码里的某一行上打断点 有条件的行级断点 管理行级断点DOM变化级断点 几种不同的DOM级断点XHR/Fetch断点事件Listener断点Exception 断点Function 断点 确保目标函数在作用域中Feedback

使用断点来中断我们的Java代码。本指南涵盖了适用于开发工具的每种断点类型，并解释了如何使用和设置每种类型的断点。如果您想学习如何在Chrome开发工具上调试代码，您可以在Chrome开发工具中看到调试Java入门

预览几种不同的断点类型

众所周知的断点类型是代码行。但是有时候无法设置代码行断点，或者如果使用的是大代码库的话。学习如何以及何时使用这些不同类型的断点调试将为您节省大量时间。

断点类型当你想Pause的时候使用Line-of-code代码具体某一行（其实就是没法在代码左边点出一个绿点来）Conditional line-of-code代码具体某一行，但是只有在一些条件为true时DOM在改变或者移除一个DOM节点或者它的DOM子节点时XHR当一个XHR URL包含一个string patternEvent Listener在运行了某个特定事件后的代码上，例如click事件触发Exception在抛出了一个caught或者uncaught的exception时Function当一个函数被调用时Line-of-code breakpoints

如果您知道要检查哪一行代码，则使用代码行断点。开发工具在这一行代码执行之前暂停。

要在一行开发工具中设置断点:

1.点击Scources tab2.打开包含你想打断点的文件3.跳到那一行4.点击那一行的左边，一个蓝色或者绿色的图标

。当它变成蓝色时，表示它已打开。此时，默认情况下，当出现未捕获的异常时，会进入断点。

3.选中Pause On Caught Exceptions，可以使得捕获的异常也进入断点。

图7:在未捕获的异常处暂停

发现了一个CORS异常:

通过异常捕获断点，我们可以输入axios和封装两次的httpclient，看看异常是如何处理的，当有问题时，我们可以准确地定位它。

有时候可能不是我们业务代码的bug，而是第三方库的bug。通过这样一个断点，我们可以深入第三方库，在我们的业务代码没有问题的时候发现问题。

被抓和未知的例外是什么？

通过throw，catch对exception做处理的，属于caught exception没有对异常做捕获的exception，可能导致程序崩溃的exception，就属于uncaught exception

Pro-test:默认情况下，捕获的异常属于未暂停类型，在警告异常上打开暂停将使未暂停和警告类型都进入断点。

函数断点

假设我们要调试某个函数，比如调用debug，functionName就是我们要调试的函数。您可以像插入console.log一样在代码中插入debug，也可以直接在控制台中输入debug。调试相当于在函数的第一行设置一个代码行断点。

functionsum {

let result = a+b；// DevTools在这一行暂停。

returnresult

}

debug；//传递函数对象，不是字符串。

总和；

可用于确保目标函数位于范围内

如果我们要调试的函数不在当前范围内，开发工具会抛出一个ReferenceError。

{

functionhey {

console . log；

}

functionyo {

console . log；

}

debug；//这个管用。

哟。

});

debug；//这个不行。嘿不在范围内。

如果您从开发工具控制台调用调试，确保目标函数在范围内可能会很棘手。有一个办法:

1.函数作用域某一行设置一个line-of-code breakpoint。2.触发断点3.在断点出暂停时调用debug

嗯，以上方法很无味，亲测。

实验:

functionfoo{

functionbar{

控制台。log；

}

debug；

bar

}

foo//输入断点

debug；//抛出未定义的引用错误:未定义bar

断点调试有这么多问题。掌握这些技能，在爬虫做js反转的时候会经常用到。希望大家能有个基本的了解。