Chrome开发者工具调试小技巧_chrome debugger

前言

Chrome的开发者工具有很多实用的调试功能，不知道大家有没有用到过，在这里分享几个，后续再发现更多有趣的小技巧会继续更新。

注：我的开发者工具设置成了中文语言，因为考虑到很多小伙伴的是英文的，【】内的 “/”是区分中英文的

1. Network面板发起请求

• 对已完成的请求点击鼠标右键，然后点击【重放XHR / replay XHR】可以直接重新发送这个请求；

• 对已完成的请求点击鼠标右键，然后点击【复制 / copy】→【以fetch格式复制 / copy as fetch 】，会复制一个包含该请求所有信息的fetch执行语句，之后粘贴到【控制台 / Console】面板上，可以对这些参数修改以后再重新发起请求。

2. 展开/关闭元素的所有子节点

点击【元素 / Elements】面板中的标签前面的三角时，同时按住【Alt】键，可以一次展开/关闭这个标签的所有子节点

3. 事件断点

打开浏览器的开发者工具，按【Ctrl】+【shift】+【p】打开命令面板，输入show event listener breakpoints可以看到所有事件，勾选后，任一元素触发对应事件后都处于断点暂停的状态，另外也可以通过sources面板右侧小面板中的来进行以上操作。

4. 调试需要鼠标移上才能显示的元素

有些元素只能在鼠标移上的时候才能显示出来，导致我们没有办法通过审查元素对该元素进行调试，我们可以在【控制台 / Console】面板中执行一个setTimeout，延迟n秒后执行一个debugger（例如：setTimeout(() => { debugger }, 3000)），然后鼠标移上使元素显示出来。等断点执行我们就可以查看元素的属性啦。

5. 查看接口是在哪里调用的

可以在【请求 / Network】面板中选中这个请求，在右侧出现的【启动器 / Initiator】面板中可以看到这个接口调用栈的情况，并且可以找到触发的位置（编译过的源码看对应文件名的最后一个是最终触发位置，之前的位置为封装定义的位置），点击后会打开【源码 / Sources】面板显示对应代码。

6. 查看元素绑定的所有事件

• 在【元素 / Elements】面板中选择要查看的元素，之后调用getEventListeners($0)（$0代表当前选中的元素），就可以看到元素身上绑定的所有事件和回调函数了，逐步展开可以看到事件回调绑定的位置
• 直接打开【元素 / Elements】面板的【事件监听器 / Event Listeners】面板，可以看到元素和他父级身上绑定的所有事件，把这里的勾勾去掉，看到的就都是它自己的事件了。
  

7. Console面板下的特殊变量和函数

• $0 - $4分别代表选中过的前5个元素的记录，数字越小越接近当前选中的，例如：$0代表当前选中的元素；
• $_代表【控制台 / Console】面板中上一次记录输入的内容；
• $(‘element selector’)会返回页面中指定元素选择器查找到的第一个元素，相当于document.querySelector()；
• $$(‘element selector’)会返回页面中指定元素选择器查找到的所有元素的集合，相当于document.querySelectorAll()

8. Vue打包之后的代码点击报错位置定位到源码中报错位置

基于vue-cli搭建的项目可以在vue.config.js中配置【productionSourceMap】属性为true，【configureWebpack】属性的【devtool】设置为’source-map’，然后重新打包就可以追踪到报错的位置了

9. 通过XPath快速搜索dom节点

在【元素 / Elements】面板中的检索框中有写到可以通过XPath来检索dom节点，XPath其实就是节点的一个路径结构，例如：div.box/img，就代表类名为box的div下的img标签。前面加上//就代表在全局搜索。

10. 添加请求断点

在我们sources面板中最右侧的小面板中的鹏【XHR/fetch Breakpoints】中可以添加一些api请求时的断点，我们可以把api的路径复制粘贴到这里，当请求这个地址的api时就会触发断点的状态。

有趣的小知识：

• console.log()打印出来的文字其实是可以设置样式的，在要打印的文字前面加上前置字符【%c】，最后的一个参数写的像元素内联样式一样的代码就可以生效。例如：

• 有些网站在复制文字的时候要求我们必须登录后才能复制，这时候我们可以console面板中输入document.body.contentEditable = ‘true’回车执行，让我们整个页面都变成一种可编辑的状态，然后我们就可以随便复制了。

• 平时我们在看network面板的时候上面的请求类型的筛选只能选择一个，但其实我们按住【Ctrl / cmd】键来进行多选的。