Chrome 开发者工具使用技巧

原文链接：https://mp.weixin.qq.com/s/Tep_dngnKCO6fPAqJ0Zdbg

Chrome 的命令菜单

命令菜单之于 Chrome，就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome。

首先，我们打开 Chrome 开发者工具，然后使用以下快捷键打开命令菜单：

• windows：Ctrl + Shift + P
• macOS：Cmd + Shift + P

或者我们可以按照下图所示的步骤将其打开：

然后，我们可以转到“命令”面板，在这里我们可以输入一些命令来执行很多强大的功能。

1. 强大的屏幕截图

Screenshot Capture full size screenshot

截取网页上所有内容的屏幕快照，包括可视窗口中未显示的所有内容

打开“命令”菜单并执行 Screenshot Capture full size screenshot，然后，我们可以就获得当前页面的完整屏幕截图了。

Screenshot Capture node screenshot

精确捕获 DOM 元素的内容

首先，我们在“元素”面板中选择一个元素，然后运行 Capture node screenshot 命令。

2. 在控制台中引用上一次的执行结果

可以使用魔术变量 $_ 引用上一次操作的结果。

$_是一个特殊变量，它的值始终等于控制台中上一次操作的执行结果。它可以让你更加优雅地调试代码。

3. 重新发送 XHR 请求

• 打开“网络”面板
• 单击 XHR 按钮
• 选择要重新发送的 XHR 请求
• 重放 XHR 请求

4. 监控页面加载状态

从一开始完全加载页面可能需要十秒钟以上的时间。我们有时需要监控页面在不同的时间点相关资源的加载行为。

在 Chrome 开发者工具中，我们可以使用“网络”面板下的 Capture Screenshots 功能来捕获页面加载时的屏幕截图。

单击每个屏幕截图可以显示相应的当前时间的网络请求状态。这种可视化的演示会让你更好地了解网络请求的详细过程。

5. 复制变量

使用 copy 函数，你可以将 JavaScript 变量的值复制到你的剪贴板中，方便在其他位置使用。

copy(xx)

6. 将复制图像为 Data URI

处理网页上的图像的通常有两种方法，一种是通过外部资源链接加载它们，另一种是将图像编码为 Data URI。

Data URL，即前缀为data:协议的 URL，允许内容创建者在文档中嵌入小文件。在被 WHATWG 撤消该名称之前，它们被称为“Data URI”。

将这些小图像编码到 Data URL 并将它们直接嵌入到我们的代码中，可以减少页面需要发出的 HTTP 请求的数量，从而加快页面加载速度。

在 Chrome 浏览器中，我们该如何将图像转换为 Data URL 呢？

• 打开“网络”面板
• 选择 Img
• 选择想要转换的图片
• 在图片上右键 Copy image as data URI

7. 表对象数组

这样的数组在控制台中不容易查看阅读。如果数组更长，元素内容很复杂，那么该数据将变得更加难以理解。

Chrome 提供了表格展示（table）功能，可以将数组对象进行列表展示，方便理解。

8. 在“元素”面板对 DOM 元素进行拖放

有时我们想调整页面上某些 DOM 元素的位置以测试 UI。在“元素”面板中，你可以拖放任何 HTML 元素来更改其在页面中的显示位置：

9. 在控制台中引用当前选定的 DOM 元素

$0 是另一个魔术变量，它会引用“元素”面板中当前选定的 DOM 元素。

• 打开“元素”面板
• 选择某个元素
• 在 console 面板中输入 $0

10. CSS 样式触发

CSS 伪类不仅可以让你将样式应用于文档树内容，还可以将其应用于外部元素，例如导航器的历史记录（例如:visited），其内容的状态（ 例如某些表单元素的:checked），或鼠标的位置（例如:hover，它可以让你知道当前鼠标是否在某个元素内容之上）。

我们可能为一个元素编写多个 CSS 伪类，并且为了方便我们对这些样式进行测试，我们可以直接在“元素”面板中选择触发或关闭这些样式。

隐藏元素的快捷方式

在调试 CSS 样式时，我们通常需要隐藏一个元素。如果选择元素并按下键盘上的H键，我们就可以快速隐藏该元素。

此操作实际上增加了 visibility: hidden !important; 样式到对应的元素上面。

11. 将 DOM 元素存储在全局临时变量中

如果要想在控制台中快速获取某个 DOM 元素的引用，可以执行以下操作：

• 选择某个元素
• 右键点击鼠标
• Store as global variable 存储为全局变量