谷歌浏览器调试工具比较令人兴奋的实用操作（一定有你不知道的）

工欲善其事必先利其器

命令菜单

按Cmd + Shift + P（如果使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。

或者

截取DOM生成图片

先打开命令行, 输入 Screenshot

 

Screenshot Capture area screenshot

点击后可以在可视区类似微信截图一样的截取，会直接给你下载个png格式的图片。下边的也是一样

这个不好截图，自己试一下便知

Screenshot Capture full size screenshot

全屏截图 并不只是页面可视区域，而是包含滚动条在内的所有页面内容。 页面有多长就截取多长，非常给力了

Screenshot Capture node screenshot

这个需要先用小光标先选中一个dom元素，然后再点这个命令，就会把你刚才选择的dom节点截图下来

Screenshot Capture screenshot

截取全屏这个只截取到可视部分

在控制台中使用上次操作的返回值 

使用$_可以引用在控制台执行的前一步操作的返回值。

通过拷贝请求相关信息或者整体拷贝请求

Network面板内，对于某个请求

下边这是个动图但是不会循环，点出去看一眼就知道了

找到Copy

点卡之后会看到可以复制 request header，可以  复制 response header 

还可以复制 整体请求 as cURL 可以直接复制到系统自带命令行工具里执行和查看

重新发起xhr请求

非常实用的功能，当想二次发起请求就不用刷新页面了   直接 Replay XHR

编辑页面上的任何文本

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

这个还是比较实用的，比如你要测试一个DOM节点文字太长时，样式是否会混乱，或者要去直接修改页面元素去满足一些业务需求时。

当然你去点a链接还是会跳转的

动画检查 

DevTools 中有一个动画面板，默认情况下它是关闭的。它可以让你控制和操纵 CSS 动画，并且可视化这些动画是如何工作的。

要打开该面板，可以在 DevTools 右上角菜单 → More tools 中打开 Animations ：

默认情况下，DevTools 会“监听”动画。一旦触发，它们将被添加到列表中。你能看到这些动画块如何显示。在动画本身上，DevTools 会向我们展示哪些属性正在更改，例如 background-color 或 transform。

然后，我们可以通过使用鼠标拖动或调整时间轴来修改该动画。

网络面板（Network）的幻灯片模式

这个功能好看但不实用

启动Network 面板下的Capture screenshots就可以在页面加载时捕捉屏幕截图

复制调试数据

比较实用

通过全局的方法 copy() 演示

 有时候想要复制打印出来的数据

这个样子模拟下

console中打印了一堆数据，可以将它存储为一个全局变量。只需要右击它，并选择 “Store as global variable”选项。第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2，第三次 ... 。通过使用这些变量来操作对应的数据。

在网慢的设备和cpu差的设备进行测试

找到 Performance

在Chrome DevTools中通过CMD/Ctrl + Shift + p打开命令菜单。 然后命令行  Show Performance

 

CSS/JS 代码使用率

打开命令菜单行，输入 Drawer Show Coverage

点击reload 按钮开始检测

 

点击相应文件即可查看具体的覆盖情况（蓝色的为用到的代码，红色表示没有用到的代码，不同主题颜色不同）

保存资源中的图片或者复制成为base64

最后一个知识点，在webpack中设置source-map是可以直接在vue文件下打断点调试的

 

觉得不错就点赞关注收藏。