Chrome DevTools中的这些骚操作，你都知道吗？

￡神魔★判官ぃ 2023-02-14 13:12 18阅读 0赞

## 引言 ???? ##

作为开发人员，平时用的最多的就是`Chrome devtools`了，但是可能很多同学都像我一样平时用的最多也就只是`Console`和`Elements`面板了。

我整理了一些我平时用的比较多的一些调试小技巧，相信对提高的你的工作效率能起到不小的帮助！

## 命令（`Command`） 菜单 ???? ##

“命令”菜单是最最常用的，本文也会多次用到，所以这里先说一下打开方式:

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

## 截图`DOM`元素 ???? ##

当你只想对一个特别的 `DOM` 节点进行截图时，你可能需要使用其他工具弄半天，但现在你直接选中那个节点，打开 命令（`Command`） 菜单并且使用 `节点截图` 就可以了。![format_png 1][]截取特定节点对应上图命令是`Screenshot Capture node screenshot`。

截取特定`DOM`元素示例：![format_png 2][]

不只是这样，你同样可以用这种方式 实现`全屏截图` ：通过 `Screenshot Capture full size screenshot` 命令。

> ❝
> 
> 请注意，这里说的是全屏，并不只是页面可视区域，而是包含滚动条在内的所有页面内容。
> 
> ❞

对应截取全屏示例：![format_png 3][]

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

我是最近才发现这个技巧。使用`$_`可以引用在控制台执行的前一步操作的返回值。如果您正在控制台调试一些`JavaScript`代码，并且需要引用先前的返回值，那么这可能非常方便。

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

在平时和后端联调时，我们用的最多的可能就是`Network`面板了。但是每次想重新查看一个请求，我们往往都是通过刷新页面、点击按钮等方式去触发`xhr`请求，这种方式有时显得会比较麻烦，我们可以通过`google`提供的`Replay XHR`的方式去发起一条新的请求，这样对于我们开发效率的提升是有所帮助的。![format_png 4][]

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

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

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

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

启动`Network` 面板下的`Capture screenshots`就可以在页面加载时捕捉屏幕截图。有点`幻灯片`的感觉。![format_png 5][]单击每一帧截图，显示的就是对应时刻发生的网络请求。这种可视化的展现形式会让你更加清楚每一时刻发生的网络请求情况。

## 动画检查 ???? ##

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

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

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

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

## 递增/递减 CSS 属性值 ???? ##

作为前端开发，平时少不了通过`Elements`面板去查找元素以及它的`css`样式。有时调整像素`px`会比较麻烦一点，这时就可以使用快捷键去帮你完成：

* 增量0.1
      * Mac：Option +向上和Option +向下
      * Windows：Alt +向上和Alt +向下
    * 增量1
      * Mac：向上+向下
      * Windows：向上+向下
    * 增量10
      * Mac：⇧+向上和⇧+向下
      * Windows：⇧+向上和⇧+向下
    * 递增100
      * Mac：⌘+向上和⌘+向下
      * Windows：Ctrl +向上和Ctrl +向下

## 在低端设备和弱网情况下进行测试 ???? ##

我们平时开发一般都是在办公室（wifi 网速加快），而且设备一般都是市面上较新的。但是产品的研发和推广，一定要考虑低设备人群和弱网的情况。

在`Chrome DevTools`中可以轻松调节`CPU`功能和`网络速度`。这样，我们就可以测试 Web 应用程序性能并进行相应优化。

具体打开方式是：在`Chrome DevTools`中通过`CMD/Ctrl + Shift + p`打开命令菜单。然后输入`Show Performance`打开性能面板。

## copying & saving ???? ##

在调试的过程中，我们总会有对 `Dev Tools` 里面的数据进行 `复制` 或者 `保存` 的操作，其实他们也是有一些小技巧的！

### copy() ###

可以通过全局的方法 `copy()` 在 `console` 里 `copy` 任何你能拿到的资源

![format_png 7][]

### Store as global variable ###

如果在`console`中打印了一堆数据，想对这堆数据做额外的操作，可以将它存储为一个全局变量。只需要右击它，并选择 “Store as global variable”选项。第一次使用的话，它会创建一个名为 `temp1` 的变量，第二次创建 `temp2`，第三次 ... 。通过使用这些变量来操作对应的数据，不用再担心影响到他们原来的值。

## 自定义 devtools ???? ##

![format_png 8][]

大家平时用的最多的`Chrome 主题`可能就是白色/黑色这两种了，但用的久了，难免想尝试像`IDE`一样切换主题。

### 打开方式 ###

*  首先需要启用实验模式中的`Allow custom UI themes`
 *  `地址栏输入如下url`
    
        chrome://flags/#enable-devtools-experiments # 启用实验功能
    
     *  启用实验功能，并重启浏览器![format_png 9][]
     *  控制台中使用快捷键`F1`打开设置，切换到`Experiments` 选项
     *  启用`Allow custom UI themes`![format_png 10][]
     *  从`Chrome`商店安装`Material DevTools Theme Collection`扩展程序![format_png 11][]
        
        选择你喜欢的主题即可![format_png 12][]

## CSS/JS 覆盖率 ✅ ##

`Chrome DevTools` 中的`Coverage`功能可以帮助我们查看代码的覆盖率。

### 打开方式 ###

*  打开调试面板，用快捷键 `shift+command+P （mac）`输入 `Show Coverage`调出相应面板![format_png 13][]
 *  点击`reload` 按钮开始检测![format_png 14][]
 *  点击相应文件即可查看具体的覆盖情况（绿色的为用到的代码，红色表示没有用到的代码）![format_png 15][]

## 自定义代码片段 Snippets ???? ##

在平常开发过程中，我们经常有些 `JavaScript` 的代码想在 `Chrome Devtools`中调试，直接在 `console` 下 写比较麻烦，或者我们经常有些代码片段(防抖、节流、获取地址栏参数等)想保存起来，每次打开 `Devtools` 都能获取到这些代码片段，而不用再去`google`，正好`Chrome Devtool` 就提供了这种功能。

如图所示，在 `Sources` 这个`tab`栏下，有个 `Snippets` 标签，在里面可以添加一些常用的代码片段。![format_png 16][]

## 将图片复制为数据 URI ???? ##

### 打开方式 ###

*  选择`Network`面板
 *  在资源面板中选择`Img`
 *  右键单击将其复制为数据`URI`（已编码为`base 64`）

## 媒体查询 ???? ##

媒体查询是自适应网页设计的基本部分。在`Chrome Devtools`中的`设备模式`下，在三圆点菜单中点击 `Show Media queries`即可启用：![format_png 17][]`Devtools`会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形:![format_png 18][]那怎么使用呢？其实也很简单：

*  点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式
 *  右键点击某个条形，查看媒体查询在 `CSS` 中何处定义并跳到源代码中的定义

## keys/values ???? ##

这个是`Devtools`提供的快速查看一个对象的`key`、`values`的`API`。用起来也很简单：![format_png 19][]

> ❝
> 
> 你可能会说`Object.keys()`和`Object.values()`也可以实现啊，但这个不是更简单点吗 ????
> 
> ❞

## table ???? ##

`Devtools`提供的用于将对象数组记录为表格的`API`:![format_png 20][]

## 关于奇舞周刊 ##

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

![format_png 21][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnaWMwbndQWlF4TjNiWmZKZnppYmlheFNnYTJMUUkxcVRmOXYzeE42WG8wYWVuVjlxTkRTdldkV1B3LzY0MA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnRm9oY1BXaWNpYW5RZU9tTG9CNUFIeFRjczhDUzljNUZOR1NGOWlhZzlEY1FBa3pwZDNVUDUzR2liUS82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVneFVWUzVQdXpvaldzWHhxUG9pYXBsUGx2ZFRYc2YwS2liSmxrQjd2bHhheXRuOFRrUmRiQUd4SWcvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnREVKaWNKMFlKbjZUQ3VvcW43N25Welk5TUVGNTNZTUFXeFd4TG9FczB0em11ZEJFdUNOVGE4QS82NDA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnNjNTdlZJQ2d3NHh0NXN0RmsxbzNrelpaWk0zWU1nYmtVQlhoSnBidmo5Y09pYkVoTHBzYWRaUS82NDA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnWVB1dUs4YVVLRHV2NnNkQ1ZsMUQyYWxRTHJueGNFN2ZWbnozNndUN25Yd3NaT3NpY0R4cnNEQS82NDA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnbnRoUFc2cDZqdnpkaG94d2F4OW94TEF4NTRwSE16UUhrd0xpYW9ubnVPNzZ6eDV5UDZ2cmd5QS82NDA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnOE1TdkNqeVgyYURMeWVWSGFpYUZRaWI3STdGejZBQmNKTVN5VkpSVzdqU3N0NlkzVDJhdlFWQUEvNjQw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnMXlHQmM2cDFDaWJBc05KR2tqcUIzM2Y3aFZGYXdrN3JzMmljcHpWQVY3bURpYmJDUU5yRWhUNFVBLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnUE10UFliZGliRU5mVGljV3p3b2tUNUNTUzFwamoxb0tZaWIzSFZkWEluVlV1cWljZ2dLU3Y4MUc0dy82NDA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnMWZzS3p2cnpmaWNyaWF5U1E0ZWljY0RKc0RqUWYzWkFRYUVkQlY2M1BFWkpWMDJiRFpNMUx4RDVRLzY0MA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnMEdFa1NYUENpY21RbGpqdDUwZjd2U1c3cG9EMTdOdjcyaWNaekFUY3Q3WTVqbWliZGRjRHo5dmxBLzY0MA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnSlBCdDJudVR5d2ljM0NkeFdTYmIxUDdkZUVtdloxbUlYQXR6cEVpYzdtVUVpYkxla0tYc2FTRTl3LzY0MA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnd3hLQVJWU1FWaWFvaWFCcm92azlPYXhaOW1vN1k4aEkyUWljNjBJR3pQaWFmd2sxa0FiTHlTRkJuZy82NDA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnZlN2UDVWZVU3YXdvalJHTTI2OThvZDFPd3dTd3kzTXNQblY3cEYwWkxGYXoycjQ4eVdIaFNRLzY0MA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnb1djUlljNFBKTVBDaWJjSndJMTBkNHZpYnlqcVRZcTlMbjVQcUNIcmFQUWZFZGlicTQ0R29xOEpBLzY0MA?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnQVl3Y1QyYXpzd0lKZEJ6Ykh3N2duMW9pYWljYjZPMTJWeGpZSk9Nb3g5TDhJdTZpY1BqcHdONll3LzY0MA?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnN3RuN0t0emxOaGFleWpSR3RORVNObHdlS2JEUVhPZ1RLVzFTcGxGMTFpYTU5OFYyWHRCQzVpY1EvNjQw?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnNDlEMzJoZGxsc2dkMG9tZElsS1RNRUhuQTVYaWJiTzlyU1V5SzJMZDlvQTRmZWZBNzRMZE1Bdy82NDA?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnSlZ5aWNpY1VaWkZaVDlpYTM4TkpXaGpXN2ljeVY0cXlzUlRjU0h5azUycGxjOXJuZWliYnpDNVRBSmcvNjQw?x-oss-process=image/format,png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJTHA3OTJlR2ljMGljREVHNEZ0U1BmdmVnSmxpYXA0b3BEY0JSc2ZrazFRUHNDQm9qQ0I4WjlhZEl2QVBCc3hBNkxpYVpzMVZnb0FEdGFGVncvNjQw?x-oss-process=image/format,png
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9NcEdRVUhpYWliNGliNmo5WDlzMmtpYmZhaWNCTG1JbTZkVUJxeW1WbWlhS3FHRkVQbjBHM1Z5Vm5xUWp2b2duSHE0Y01pYmF5VzI0MDBqNE95RXRkejVma01ibUEvNjQw?x-oss-process=image/format,png