chrome devtools记录

命令（Command） 菜单

按Cmd + Shift + P（如果使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。
截图DOM元素：截取特定节点对应上图命令是Screenshot Capture node screenshot；截取整个页面：Screenshot Capture full size screenshot

重新发起xhr请求

Network面板了，通过google提供的Replay XHR的方式去发起一条新的请求。

编辑页面上的任何文本

在控制台输入document.body.contentEditable="true"或者document.designMode = 'on’就可以实现对网页的编辑了。

console函数

在调试的过程中，我们总会有对 Dev Tools 里面的数据进行 复制 或者 保存 的操作，其实他们也是有一些小技巧的！

1、copy()
可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源

2、Store as global variable
如果在console中打印了一堆数据，想对这堆数据做额外的操作，可以将它存储为一个全局变量。只需要右击它，并选择 “Store as global variable”选项。第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2，第三次 … 。通过使用这些变量来操作对应的数据，不用再担心影响到他们原来的值。
3、table
Devtools提供的用于将对象数组记录为表格的API

CSS/JS 覆盖率

Chrome DevTools 中的Coverage功能可以帮助我们查看代码的覆盖率。
打开方式
打开调试面板，用快捷键 shift+command+P （mac）输入 Show Coverage调出相应面板
点击reload 按钮开始检测