工欲善其事必先利其器
命令菜单
按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文件下打断点调试的
觉得不错就点赞关注收藏。