工欲善其事必先利其器vue
命令菜单
按Cmd + Shift + P（若是使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。node
或者webpack
截取DOM生成图片
先打开命令行, 输入 Screenshotweb
Screenshot Capture area screenshot
点击后能够在可视区相似微信截图同样的截取，会直接给你下载个png格式的图片。下边的也是同样微信
这个很差截图，本身试一下便知网络
Screenshot Capture full size screenshot
全屏截图 并不仅是页面可视区域，而是包含滚动条在内的全部页面内容。 页面有多长就截取多长，很是给力了dom
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文件下打断点调试的
以为不错就点赞关注收藏。