Chrome的开发者工具有很多实用的调试功能，不知道大家有没有用到过，在这里分享几个，后续再发现更多有趣的小技巧会继续更新。
-
对已完成的请求点击鼠标右键，然后点击【重放XHR / replay XHR】可以直接重新发送这个请求；
-
对已完成的请求点击鼠标右键，然后点击【复制 / copy】→【以fetch格式复制 / copy as fetch 】，会复制一个包含该请求所有信息的fetch执行语句，之后粘贴到【控制台 / Console】面板上，可以对这些参数修改以后再重新发起请求。
点击【元素 / Elements】面板中的标签前面的三角时，同时按住【Alt】键，可以一次展开/关闭这个标签的所有子节点
有些元素只能在鼠标移上的时候才能显示出来，导致我们没有办法通过审查元素对该元素进行调试，我们可以在【控制台 / Console】面板中执行一个setTimeout，延迟n秒后执行一个debugger（例如：setTimeout(() => { debugger }, 3000)），然后鼠标移上使元素显示出来。等断点执行我们就可以查看元素的属性啦。
9. 通过XPath快速搜索dom节点
在【元素 / Elements】面板中的检索框中有写到可以通过XPath来检索dom节点，XPath其实就是节点的一个路径结构，例如：div.box/img，就代表类名为box的div下的img标签。前面加上//就代表在全局搜索。
10. 添加请求断点
在我们sources面板中最右侧的小面板中的鹏【XHR/fetch Breakpoints】中可以添加一些api请求时的断点，我们可以把api的路径复制粘贴到这里，当请求这个地址的api时就会触发断点的状态。
-
有些网站在复制文字的时候要求我们必须登录后才能复制，这时候我们可以console面板中输入document.body.contentEditable = ‘true’回车执行，让我们整个页面都变成一种可编辑的状态，然后我们就可以随便复制了。