2023年6月29日发(作者：)

爬⾍必备-如何使⽤ChromeDevTools花式打断点原⽂：Pause Your Code With Breakpoints作者：Kayce Basques Chrome DevTools & Lighthouse技术作家参考这份指南，结合⾃⼰⼿上的vue项⽬进⾏实践，可以说对原指南进⾏了plus，因为实践过程中会有很多指南之外的新发现。主要内容包括如下：代码⾥的某⼀⾏上打断点有条件的⾏级断点管理⾏级断点⼏种不同的DOM级断点确保⽬标函数在作⽤域中预览⼏种不同的breakpoint类型代码⾏级(Line-of-code)断点DOM变化级断点XHR/Fetch断点事件Listener断点Exception 断点Function 断点Feedback使⽤breakpoints去为我们的JavaScript代码打断点。这个指南涉及了在DevTools上适⽤的每⼀种breakpoint类型，并且会讲解如何使⽤并设置每种类型的断点。如果是想学习如何在Chrome DevTools上调试代码，可以看Get Started with Debugging JavaScript inChrome DevTools预览⼏种不同的breakpoint类型众⼈皆知的breakpoint类型是line-of-code。但是line-of-code型breakpoint有的时候没法设置（其实就是没法在代码左边点出⼀个绿点来），或者如果你正在使⽤⼀个⼤型的代码库。通过学习如何和何时使⽤这些不同类型的breakpoint debug，会⼤⼤节约你的时间。断点类型Line-of-codeConditional line-of-codeDOMXHREvent ListenerExceptionFunction当你想Pause的时候使⽤代码具体某⼀⾏（其实就是没法在代码左边点出⼀个绿点来）代码具体某⼀⾏，但是只有在⼀些条件为true时在改变或者移除⼀个DOM节点或者它的DOM⼦节点时当⼀个XHR URL包含⼀个string pattern在运⾏了某个特定事件后的代码上，例如click事件触发在抛出了⼀个caught或者uncaught的exception时当⼀个函数被调⽤时Line-of-code breakpoints如果你知道⾃⼰想在哪⼀具体的代码⾏检查代码，会⽤到line-of-code breakpoint。DevTools会在这⾏代码执⾏前暂停住。为了在DevTools某⼀⾏设置断点：1.点击Scources tab2.打开包含你想打断点的⽂件3.跳到那⼀⾏4.点击那⼀⾏的左边，⼀个蓝⾊或者绿⾊的图标图1: 在某⼀⾏设置⼀个断点下⾯的图是我本地调试的图，只有部分有定义，解构，回调，return等有需要process的地⽅，才可以打断点。代码⾥⽣成⼀个Line-of-code断点调⽤debugger在那⼀⾏暂停。debugger等价于⼀个line-of-code断点，这可以让端点直接出现在代码中，⽽不是在DevTools UI中，可以在任何机器上进⾏debug。('a');('b');debugger;('c');有条件的⾏级断点在我们知道⾃⼰需要检查的⼀个特定代码⾏时，使⽤有条件的⾏级断点，但是只有在⼀些其他满⾜时才可以暂停。如何设置⼀个有条件的⾏级断点：1.点击Sources tab2.打开代码⽂件3.跳到那⼀⾏4.在那⼀⾏Right-click，⿏标右键（此处有surprise！）5.选择Add conditional breakpoint。⼀个对话框会出现在那⼀⾏代码的下⾯。6.在对话框中键⼊条件7.按下enter去激活breakpoint。⼀个橘⾊icon会出现在左边。图2：在某⼀⾏设置条件⾏级断点Add breakPoint是普通的⾏级断点，Add conditional breakPoint是有条件的⾏级断点。Never Pause Here会让这⾥永远不进断点。Blackbox Script可以让当前打开的⽂件⿊盒化，⽤不进⼊断点。点击Add conditional breakPoint后，会出现dialog：点击Blackbox Script后，⽂件头部会出现The script is blackboxed in debugger：在我的代码中，添加了mediaType==='text'的条件，⽽mediaType还会有'img','mini'等类型，但是通过添加conditional breakpoint，我可以只在类型是text的时候pause，亲测有效。管理line-of-code断点图3：Breakpoints⾯板展⽰了的2个断点图4：使⽤Breakpoints⾯板去禁⽤或者移除line-of-code断点。可以对单个断点启⽤，禁⽤，移除；对所有断点启⽤，禁⽤，移除；对除当前断点外的断点启⽤，禁⽤，移除。选中checkbox禁⽤断点右键移除断点Deactivate断点，会保留他们激活时的状态，这样⽅便再次激活，右上⾓的label为蓝⾊激活状态时，Breakpoints全部为Deactive状态，⽩⾊带阻塞斜杠时，为断点激活状态。 DOM变化级断点Subtree modifications。当当前选中的节点的child被移除或新增时触发，或者是child的内容发⽣改变时。在child的节点属性发⽣变化时不会触发，或者当前节点改变时不会触发。（亲测当⾃⼰被移除时都不会触发）Attributes modifications。当当前选中的节点新增属性，移除属性，或者属性值发⽣变化时触发。Node Removal。当当前选中的节点被移除时触发。在改变或者移除⼀个DOM节点或者它的DOM⼦节点时会⽤到DOM change breakpoint。图5：创建⼀个DOM change breakpoint的上下⽂菜单设置DOM级断点的步骤如下：1.单击Elements tab2.选中我们想为其设置breakpoint的元素3.右键元素4.悬浮在Break on上，选择Subtree modifications，Attribute modifications或者Node removal。我会在这样⼀段代码上测试Subtree modifications，Attribute modifications或者Node removal⼏个DOM型断点。

渲染结果如下:child和descendant区别是什么？child仅仅包含⼀个⼦节点；descendant包含多个后代节点，会有⼀个孙⼦节点的情况，例如上⾯移除的#comment类型的注释⼦节点。Attribute Modifications在3个状态间切换，会触发class属性值的变化，因为需要使激活的按钮⾼亮。当状态从图⽂链接切换到⼩视频时，会进⼊Attribute Modifications断点，：通过这次DOM Attribute Modification断点，我们发现，iview的单选ButtonGroup⾼亮依赖.ivu-radio-focus，并且会为之前选择过的radio添加.ivu-raido-wrapper-checked。因为我们只对图⽂链接label设置了Attribute Modification断点，所以⼩视频label的属性变化不会被检测到：node removal移除⼀个DOM节点时会进⼊断点。因此，其实就是subtree modifications中的最后⼀次DOM变化，把div.c-upload完全移除，只显⽰⼀个上传后的图⽚。但是可能与subtree modifications的断点提⽰不⼀样，因此我将重新记录断点。确实与之前的不同，直接提醒当前node被移除，⽽不是作为Child或者Descendant被移除。XHR/Fetch breakpointXHR的请求URL包含指定字符串时，使⽤XHR中断。当XHR调⽤send()⽅法时在对应⾏暂停。注意：这个特性同样作⽤于Fetch请求。在XHR/Fetch上打断点的场景，⾮常适⽤于请求⼀个不正确的URL，⽽且你想很快找到AJAX或者Fetch 源代码去发现导致错误请求的原因。设置⼀个XHR类型的断点的步骤如下:1.单击Sources tab2.展开XHR Breakpoints3.单击Add breakpoint4.键⼊你想断点的string。DevTools会在string出现在任何XHR的请求的URL时进⼊断点5.按下Enter进⾏确认在XHR Breakpoints中为包含URL中的org的任何请求创建XHR断点实验：当前页有5个来⾃的请求，每次都会进⼊到XHR断点。可以对协议做断点。例如http，https，ws，wss等等。可以对域名做断点。例如，等等。发出请求前进⾏断点：会进⼊到中，开⼼地debug：Event Listener breakpoints如果要暂停事件触发后运⾏的事件侦听器代码，请使⽤事件侦听器断点。我们可以选择特定的事件，例如click事件；或者事件类别，例如所有的⿏标事件。1.点击Sources tab2.展开Event Listener Breakpoints⾯板。DevTools展⽰了⼀个事件⽬录的列表，例如Animation。3.选中这些事件类别中的⼀个做断点，这个断点会在事件触发时进⼊，或者是选择事件类别下的⼀个或多个做断点。图7：为deviceorientation新建⼀个事件监听断点有很多类型的Event Listener。实验：会进⼊到第三⽅库监听事件的代码，可以⽤Blackbox Script跳过进⼊这个⽂件的断点，直接进⼊到我们的监听click事件的业务代码的地⽅，⽅便debug。结合CallStack和Scope，可以提升我们的debug效率。如果想深⼊学习第三库的源码，可以打开断点，每次都去看⼀次事件发⽣，第三⽅库到底做了什么。Exception breakpoints当我们想在某⼀⾏抛出caught or uncaught异常时进⼊断点，可以使⽤exception breakpoint。1.单击Sources tab2.单击Pause on exceptions上，也就是

。变蓝了就表⽰开启了，此时默认有未捕获的异常时进⼊断点。3.选中Pause On Caught Exceptions，可以使得捕获的异常也进⼊断点。图7：在⼀个未捕获的异常处暂停捕获到⼀个CORS异常：通过异常捕获断点，我们可以进⼊到axios，以及⼆次封装的httpclient中，去看Exception是如何被处理的，出现问题时，可以精确定位。有些时候可能不是我们业务代码的bug，是第三⽅库的bug，通过这样的断点，我们可以在业务代码没有问题的情况下，深⼊到第三⽅库找问题（虽然⼀般都是⾃⼰业务代码的问题）。什么是caught和uncaught的exception？通过throw，catch对exception做处理的，属于caught exception没有对异常做捕获的exception，可能导致程序崩溃的exception，就属于uncaught exception亲测：默认捕获的异常时uncaught类型，开启Pause on caught exceptions，会让uncaught和caught类型的均进⼊断点。Function Breakpoints假设我们想对某⼀个函数做debug的话，例如调⽤debug(functionNmae)，functionName是我们想debug的函数。你可以在你的代码中像插⼊()⼀样，插⼊debug()，或这在控制台⾥直接输⼊debug()。debug()相当于在某个函数的第⼀⾏设置了⼀个line-of-codebreakpoint。function sum(a, b) { let result = a + b; // DevTools pauses on this line. return result;}debug(sum); // Pass the function object, not a ();

可以⽤来确保⽬标函数位于scope中如果我们想要debug的函数不在当前作⽤域中，DevTools会抛出⼀个ReferenceError。(function () { function hey() { ('hey'); } function yo() { ('yo'); } debug(yo); // This works. yo();})();debug(hey); // This doesn't work. hey() is out of scope.如果从DevTools控制台调⽤debug（），确保⽬标函数在范围内可能会很棘⼿，有⼀个办法：1.函数作⽤域某⼀⾏设置⼀个line-of-code breakpoint。2.触发断点3.在断点出暂停时调⽤debug()嗯，上⾯这个⽅法很鸡肋，亲测。实验：function foo(){ function bar() { ('bar'); } debug(bar); bar();}foo(); // 进⼊断点debug(bar); // 抛出Uncaught ReferenceError: bar is not defined

关于断点调试的问题也就是这么多了，掌握这些技巧在后⾯爬⾍做js逆向的时候会经常⽤到，希望⼤家能做个基本了解。