Chrome 调试技巧
调试的几个按钮介绍
Resume script execution
：跳转到下一个断点，如下，代码暂停在第3行，点击 ，代码执行依次暂停在第5行，第7行，若没有return，接着会暂停在第12行。
Step over next function call
：跳到下一步，代码会一行一行的往下执行。如下，代码在第7行执行时，条件不成立，接着执行第9行。
Step into next function call
：跳进一个函数，如下，在第5079行点击图标，调试跳入到_init方法的具体实现。
Step out current function call
：跳出当前函数，如下，在 _init方法中调试 时，点击
图标，调试回到Vue方法。
Step
:是前三个按钮（Step over、Step into和Step out）的集合。
Deactivate breakpoints
： 跳过所有断点，如下，点击后，将跳过代码中三个断点。当你打了很多断点，有时不希望断点生效又不想清除断点时，这很有用。
调试常用方法介绍
查找文件
Ctrl+Shift+O，输入文件名回车。
跳转到文件具体行
Ctrl + g，输入行数回车。
查看调用栈
如下，代码执行从app.js文件到vue.js文件，行数依次为：9->5079->5012->11945。
也可以在方法内部执行console.trace()来获取调用栈。
重新开始调试
Call Stack 中，右击，Restart frame。如下，如果想要跳进this._init方法调试，但是不小心走到了该方法的下一行，此时不需要重新刷新页面重新走一遍，只需点击Restart frame，代码会重新暂停在5074行，即该方法的第一行，即使该方法的第一行没有打断点。
点击Call Stack 中的调用栈的其他行，即可回退到上一个断点，然后Restart frame即可上一个方法的第一行开始调试。
格式化打包后的代码
点击代码编辑器的左下角的
按钮即可
断点类型
Line-of-code breakpoints
当你知道需要调试的代码的具体位置时。点击code editor 中代码的左侧的行数，或者在代码中输入debugger.
Conditional line-of-code breakpoints
只有特定条件下才暂停。如下，右击代码编辑器中的行数，点击Edit breakpoint ,输入特定条件，实例表示options.data为true时，代码才在此处暂停。条件断点在for循环时尤其有用。
Dom breakpoints
给dom节点添加断点，适用于当不知道哪一行代码具体更改了dom节点时，可以检测到三种类型，子节点变更、属性变更和节点移除。如下，给h1标签添加Dom breakpoints后，只要h1发生了改变，都能暂停到改变它的代码。这在调试别人的代码时会很有用。
XHR/Fetch breakpoints
当发送具体的请求时暂停。
Event listener Breakpoints
比如监听drop后，在拖动时，就能定位到相应的代码。如下，即可定位到实现拖动的具体逻辑。这在调试别人写的复杂代码时尤其有用，比如github上优秀的库。
移除断点
在断点板，右键选择Remove all breakpoints来移除所有断点，选择Re move breakpoint 来移除特定断点。注意，代码中手动添加的debugger并不会被移除。
其他
chrome调试node代码
node --inspect-brk index.js 然后访问:chrome://inspect
network模拟不同的网络状态
点击下图下拉框，即可选择fast 3G、slow 3G和offline等不同的网络状况来测试页面。
隐藏不关心的列
请求列表中，右键请求列表表头，即可自定义展示的列。
优雅的复制
Store object as global variable：存储为全局变量，如下，将打印的数组储为变量，即可方便的数组进行查找等操作。
copy()方法 / Copy object : 复制数据到剪切板。
save as ——复制错误堆栈
优雅的显示
console.table(arr)——当数组中的对象拥有较多属性时，为了直观地看到整个数组的数据。
console.dir(el)——以树形结构打印DOM节点
获取代码执行时间
在代码开始时，console.time("xxx")；代码结束时，console.timeEnd("xxx")，即可在控制台打印出某段代码的执行耗时。注意，此方法只适用于同步代码。如下可获取for循环的执行耗时。
打印带时间戳
几个快捷键
Shift+Commond+P：打开devTools功能搜索 Shift+Commond+P：切换开发者工具的位置 esc：打开Console drawer
截长图
打开devTools功搜索，输入screen关键字，选择Capture full size screenshot即可。当屏幕出现滚动条，需要截取整个屏幕时尤其有用。
复制请求
右键链接：copy as fetch、copy as curl，可以复制所有的header，甚至是cookie。如果请求合法，服务器是无法判断请求是从浏览器还是服务端发出的。
请求图片时，加上contentType:'arraybuffer',一般服务器会校验请求的referer。
copy all as HAR, 可以复制所有请求，在抓包工具 Charles 中打开，可以查看所有请求的详细 request 和 response。
