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

引言 🏂

做为开发人员，平时用的最多的就是Chrome devtools了，可是可能不少同窗都像我同样平时用的最多也就只是Console和Elements面板了。

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

命令（Command） 菜单 🏈

“命令”菜单是最最经常使用的，本文也会屡次用到，因此这里先说一下打开方式:

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

截图DOM元素 🏉

当你只想对一个特别的 DOM 节点进行截图时，你可能须要使用其余工具弄半天，但如今你直接选中那个节点，打开 命令（Command） 菜单而且使用 节点截图 就能够了。 截取特定节点对应上图命令是Screenshot Capture node screenshot。

截取特定DOM元素示例：

不仅是这样，你一样能够用这种方式 实现全屏截图 ：经过 Screenshot Capture full size screenshot 命令。

❝

请注意，这里说的是全屏，并不仅是页面可视区域，而是包含滚动条在内的全部页面内容。

❞

对应截取全屏示例：

在控制台中使用上次操做的值 🎃

我是最近才发现这个技巧。使用$_能够引用在控制台执行的前一步操做的返回值。若是您正在控制台调试一些JavaScript代码，而且须要引用先前的返回值，那么这可能很是方便。

从新发起xhr请求 🚀

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

编辑页面上的任何文本 ✍

在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就能够实现对网页的编辑了。 其实这个仍是比较实用的，好比你要测试一个DOM节点文字太长时，样式是否会混乱，或者要去直接修改页面元素去知足一些业务需求时。（我以前是在Elements面板一个一个去修改的，，，）

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

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

动画检查 🎏

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

要打开该面板，能够在 DevTools 右上角菜单 → More tools 中打开 Animations ：

默认状况下，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 任何你能拿到的资源

Store as global variable

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

自定义 devtools 🌈

你们平时用的最多的Chrome 主题可能就是白色/黑色这两种了，但用的久了，不免想尝试像IDE同样切换主题。

打开方式

• 首先须要启用实验模式中的 Allow custom UI themes

  • 地址栏输入以下 url

  chrome://flags/#enable-devtools-experiments # 启用实验功能
  复制代码

  • 启用实验功能，并重启浏览器
  • 控制台中使用快捷键 F1打开设置，切换到 Experiments 选项
  • 启用 Allow custom UI themes
• 从 Chrome商店安装 Material DevTools Theme Collection扩展程序
• 选择你喜欢的主题便可

CSS/JS 覆盖率 ✅

Chrome DevTools 中的Coverage功能能够帮助咱们查看代码的覆盖率。

打开方式

• 打开调试面板，用快捷键 shift+command+P （mac）输入 Show Coverage调出相应面板
• 点击 reload 按钮开始检测
• 点击相应文件便可查看具体的覆盖状况（绿色的为用到的代码，红色表示没有用到的代码）

最后一样用一个动图作下展现：

自定义代码片断 Snippets 🌰

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

如图所示，在 Sources 这个tab栏下，有个 Snippets 标签，在里面能够添加一些经常使用的代码片断。

将图片复制为数据 URI 🦊

打开方式

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

媒体查询 🔭

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

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

keys/values 🎯

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

❝

你可能会说Object.keys()和Object.values()也能够实现啊，但这个不是更简单点吗 🤠

❞

table 🦐

Devtools提供的用于将对象数组记录为表格的API: