爬⾍必备-如何使⽤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 in Chrome DevTools
预览⼏种不同的breakpoint类型
众⼈皆知的breakpoint类型是line-of-code。但是line-of-code型breakpoint有的时候没法设置（其实就是没法在代码左边点出⼀个绿点来），或者如果你正在使⽤⼀个⼤型的代码库。通过学习如何和何时使⽤这些不同类型的breakpoint debug，会⼤⼤节约你的时间。
断点类型当你想Pause的时候使⽤
svg的类型有几种
Line-of-code代码具体某⼀⾏（其实就是没法在代码左边点出⼀个绿点来）
Conditional line-of-code代码具体某⼀⾏，但是只有在⼀些条件为true时
DOM在改变或者移除⼀个DOM节点或者它的DOM⼦节点时
XHR当⼀个XHR URL包含⼀个string pattern
Event Listener在运⾏了某个特定事件后的代码上，例如click事件触发
Exception在抛出了⼀个caught或者uncaught的exception时
Function当⼀个函数被调⽤时
Line-of-code breakpoints
如果你知道⾃⼰想在哪⼀具体的代码⾏检查代码，会⽤到line-of-code breakpoint。DevTools会在这⾏代码执⾏前暂停住。
为了在DevTools某⼀⾏设置断点：
1.点击Scources tab
2.打开包含你想打断点的⽂件
3.跳到那⼀⾏
4.点击那⼀⾏的左边，⼀个蓝⾊或者绿⾊的图标
图1: 在某⼀⾏设置⼀个断点
下⾯的图是我本地调试的图，只有部分有定义，解构，回调，return等有需要process的地⽅，才可以打断点。
代码⾥⽣成⼀个Line-of-code断点
调⽤debugger在那⼀⾏暂停。debugger等价于⼀个line-of-code断点，这可以让端点直接出现在代码中，⽽不是在DevTools UI中，可以在任何机器上进⾏debug。
console.log('a');
console.log('b');
debugger;
console.log('c');
有条件的⾏级断点
在我们知道⾃⼰需要检查的⼀个特定代码⾏时，使⽤有条件的⾏级断点，但是只有在⼀些其他满⾜时才可以暂停。如何设置⼀个有条件的⾏级断点：
1.点击Sources tab
2.打开代码⽂件
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断点