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

工欲善其事必先利其器

命令菜单

Cmd + Shift + P(如果使用Windows,则按Ctrl + Shift + P)打开“命令”菜单。

或者

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第1张图片

截取DOM生成图片

先打开命令行, 输入 Screenshot

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第2张图片

 

Screenshot Capture area screenshot

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

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

Screenshot Capture full size screenshot

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

Screenshot Capture node screenshot

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

Screenshot Capture screenshot

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

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

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第3张图片

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

Network面板内,对于某个请求

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第4张图片

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第5张图片

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

找到Copy

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

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第6张图片

重新发起xhr请求

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

编辑页面上的任何文本

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

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

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第7张图片

动画检查 

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

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

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

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

网络面板(Network)的幻灯片模式

这个功能好看但不实用

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第8张图片

复制调试数据

比较实用

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第9张图片

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

这个样子模拟下

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第10张图片

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

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

找到 Performance

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第11张图片

 

CSS/JS 代码使用率

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第12张图片

点击reload 按钮开始检测

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第13张图片

 

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第14张图片

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第15张图片

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第16张图片

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

谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)_第17张图片

 

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

 

 

你可能感兴趣的:(开发工具杂,谷歌浏览器调试工具,Devtools)