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

亦凉 2022-12-01 15:53 41阅读 0赞

> 工欲善其事必先利其器

## 命令菜单 ##

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

或者

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

## 截取DOM生成图片 ##

先打开命令行, 输入 Screenshot

![20200828103309621.png][]

### Screenshot Capture area screenshot ###

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

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

### Screenshot Capture full size screenshot ###

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

### Screenshot Capture node screenshot ###

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

### Screenshot Capture screenshot ###

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1][]

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

`Network`面板内，对于某个请求

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3][]

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

![20200828110945434.gif][]

找到Copy

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 4][]

## 重新发起`xhr`请求 ##

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

![format_png][]

## 编辑页面上的任何文本 ##

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 5][]

## 动画检查  ##

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

要打开该面板，可以在 `DevTools` 右上角菜单 → `More tools` 中打开 `Animations` ：![format_png 1][]

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

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

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

这个功能好看但不实用

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 6][]

## 复制调试数据 ##

比较实用

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 7][]

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

这个样子模拟下

![20200828114229232.png][]

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

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

找到 Performance

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 8][]

## CSS/JS 代码使用率 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 9][]

点击`reload` 按钮开始检测

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 11][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 12][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 13][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 14][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: /images/20221123/ecdadf86fdf8434685446e8bae7802bd.png
[20200828103309621.png]: /images/20221123/bee70326bded427aa87742dc45729f29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1]: /images/20221123/24704bbd4d3348ab84187fc39752dd93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2]: /images/20221123/725934ca28ce41a086705f209ef121a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3]: /images/20221123/66f4afaef51a44979dc0786c1fde9d8f.png
[20200828110945434.gif]: /images/20221123/b72e5fabb3f34c9390f5b69a19452e3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 4]: /images/20221123/4fdf341561314aca9821bc1bcea40591.png
[format_png]: /images/20221123/58ac323d445540d0b44186e2af887d0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 5]: /images/20221123/fe77dc770dc5451693d23ef5d9eb5b44.png
[format_png 1]: /images/20221123/f3494465a8c54997ae5941ca069d0628.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 6]: /images/20221123/fa01793a0f47449b8125446350a3b3a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 7]: /images/20221123/dd125ed4acfe47ce84f0d4254033d4cd.png
[20200828114229232.png]: /images/20221123/f39878f1543448808b4c5e2531f0942f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 8]: /images/20221123/d585bf4b24334b0fbba0f5b579ddb7ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 9]: /images/20221123/550a88766a244143830de2abefee8238.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 10]: /images/20221123/3e3e81b607074997bf02796078a06a00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 11]: /images/20221123/0f20a728f5ce4e82a4291bfd1cd3813e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 12]: /images/20221123/cdc955b9ef244d7ab0a0e4d48dcebee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 13]: /images/20221123/d6be457066ea46f7bb2026f25adf3f87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 14]: /images/20221123/4bf26dacce724917bb81e4206e281b66.png