Chrome DevTools：10 个有用的提示和技巧

我已经使用 Chrome 十多年了，早在 Mozilla 设法解决他们的内存泄漏问题之前。 而且，作为一个每天都在做前端开发的人，我也是 Chrome DevTools 的狂热用户。 无论是进行最基本的 CSS 检查还是性能测试，DevTools 都是我作为开发人员日常工作中不可或缺的一部分。

多年来，我既学习了又收集了各种技巧和窍门，其中一些并不十分明确。 如果您想了解 DevTools 可以做的所有事情，我建议您参考官方文档。 但更重要的是，DevTools 中的新增功能页面，因为在那里您可以一目了然地获得所有新功能和工具。

浏览此资源的最佳方式是使用CTRL+F并查找您感兴趣的“关键字”，或者您也可以切换上面的目录，然后直接跳转到特定示例。 随着我学习新事物，我相信这个页面会随着时间的推移而增长，所以请随时为这个页面添加书签以供将来参考。 让我们从一些实用但非常有用的东西开始吧。

阻止资源以在没有 CSS/JavaScript 的情况下呈现站点

我们认为 JavaScript 是理所当然的，但有很多人在他们的浏览器中阻止 JS，其中大多数是出于与可访问性、隐私和安全相关的原因。

您还必须考虑由于网络问题或浏览器无法获取特定资源而无法访问 JS/CSS 的情况。 那么，当特定文件/库被阻止时，您的网站会是什么样子？

• 打开 DevTools 并转到Network选项卡。
• 重新加载您所在的页面以获取所有资源。
• 单击任何资源并选择阻止资源 URL 。
• 再次刷新页面以查看结果。

我相信这也适用于 Firefox 和 Edge 开发者工具。

CSS 更改一目了然（使用导出）

您是否曾经对从 DevTools 中更改 CSS 感到厌烦，只是意识到您现在必须回溯到 10 个不同的属性来保存这些更改？ 是的。 去过也做过。

值得庆幸的是，有更好的方法来解决这个问题。

• 转到自定义和控制 DevTools -> 更多工具。
• 选择更改。
• DevTools 中将出现一个永久选项卡，展示您所做的代码更改。

也可以通过CTRL/CMD+Shift+P快捷方式访问“更改”面板，然后在“运行”控制台中输入“更改”。 在更改界面的底部，您有一个复制按钮，可用于直接导出您在该会话中所做的所有更改。

更改 Grid 和 Flexbox 布局结构

我最近写了一篇关于一些最好的 CSS 布局生成器的文章，所以下一个技巧与那篇文章密切相关。 首先，检查Grid 或 Flexbox 支持的任何容器，然后查找已分配的具有display: flex;的属性。 或相反亦然。

在属性旁边，您会看到一个可点击的小图标（编辑器）——点击它会打开一个面板，您可以在其中使用 Grid 或 Flexbox 中指定的定位属性。

当您想要实时测试新的布局对齐时，此功能很有用。 还有一个叫做 CSS Grid Inspector 的东西，Chrome 开发团队已经为此做了一篇文章。

使用内置工具调试可访问性

可访问性是前端开发者圈子中非常热门的话题。 以至于大多数组件库和 UI 工具包都预先构建了可访问性最佳实践。 像 WordPress 这样的 CMS 平台也接受了可访问性，并开始实施优先考虑设计包容性的功能。 DevTools 也不例外。

»在 Chrome DevTools 中启用辅助功能树

选中启用复选框后，您需要重新加载 DevTools。 在这个阶段，您将在元素窗口的右上角看到一个可访问性图标。 单击此图标将在 DOM 树视图中显示整个站点的结构。 然后，您可以检查各个站点部分和元素，并查看它们是否具有分配给它们的 ARIA 标签。

» 源订单查看器

在上面 GIF 所示的同一面板上，还有另一个复选框。 该复选框称为Show source order 。 它的作用是什么——一旦启用——它可以让你看到元素出现的顺序，访问者可能会使用辅助工具访问你的页面。

启用后，您可以选择页面的任何区域并查看项目出现的顺序。

这在使用 Grid 或 Flexbox 时特别有用，它们都具有用于重新排列项目显示顺序的属性。 例如order: 1;

» 低对比度文本的颜色建议

颜色对比度是主要的可访问性问题之一，即使对于不一定患有严重视力障碍的人也是如此。 我遇到过一些情况，我的视力开始变差，我需要为我的眼镜找一个新的处方，而导致它泄露的东西是低/高对比度的颜色让我的眼睛感到疲倦。 红底白字，蓝底绿字等。

web.dev 团队已经完成了关于以下方法如何工作的完整文章。

此方法适用于任何页面元素。 即使您认为对比度很好，对比度算法也可以提出微妙的建议来提高整体对比度的可见性。

将缩小的 JavaScript/CSS 格式化为可读代码

将压缩后的代码导入 VS Code 然后应用 Prettier 只需要几秒钟，但是当您可以直接从 DevTools 控制台格式化（取消压缩）时，何必费心呢。

为了使这项工作：

• 打开 DevTools 中的Sources面板。
• 打开任何已缩小的文件。
• 单击控制台底部的{ }图标。
• 代码现在已格式化。

使用 designMode 编辑（文本）和删除元素

designMode 是 Web API 规范的一部分，使您能够直接编辑页面元素，尽管有一些限制。 例如，只能编辑文本，但可以完全删除任何其他元素。 请记住，这不是“官方”功能，但在处理 CSS 数学函数和其他特定于文本的属性之类的东西时，它仍然很有用。

自己尝试一下：

• 打开 DevTools控制台。
• 输入document.designMode=”on”并提交。
• 返回页面并开始编辑。

当您想要禁用设计模式时， off属性也适用。 如果您在 GIF 中没有注意到，这也非常适合对您的页面内容进行拼写检查。

从设备模拟器捕获屏幕截图

这是我最长时间没有想到的功能。 我通常的截图工作流程是 Snip 或 Awesome Screenshot 扩展。 事实证明，您可以直接从设备模拟器捕获移动/平板电脑和其他分辨率的屏幕截图。

但是，这不是此功能有用的唯一原因。 您实际上可以捕获包括设备框架在内的屏幕截图。 在我进入更多细节之前，这里有一个例子：

那么，如何为手机/平板截图启用设备框架呢？

• 打开开发工具。
• 单击切换设备工具栏图标。
• 导航到右上角的菜单图标（三个点）。
• 选择显示设备框架。

这是一个视觉预览：

问题是，即使您单击按钮，设备框架也不会显示。 这是因为只有少数设备显示了框架。 事实上，您需要从Dimensions -> Edit中的可用菜单中手动启用这些设备。 这些设备类型有一个框架：

• iPhone 5/SE
• iPhone 6/7/8 和 Plus
• 连结 5 & 5x
• 连结 6P
• iPad

感谢 StackOverflow 用户 RoCk RoCk 的澄清。

从浏览器外部选择颜色

这是添加到 DevTools 的最新功能之一。 假设您已经熟悉颜色选择器- 现在可以选择浏览器中没有的颜色。 换句话说，您可以直接从桌面选择颜色，无论是图像还是特定图标。

现在，您可以更快地从您喜爱的照片中获取颜色。

使用 copy() 作为伪刮板

copy()函数可用于批量获取页面上的对象。 对我来说，这是快速抓取页面上所有 URL 的最快方法。

在您的控制台类型中：

 copy($$('a').map(a => a.href).join('\n'))

结果是：

替代 JavaScript 函数如下所示：

 var link_array = [], l = document.links; for(var i=0; i<l.length; i++) { link_array.push(l[i].href); } console.log(link_array)

如何更改 Chrome DevTools 颜色主题

我想知道有多少开发人员将他们的 Chrome 浏览器主题更改为深色，但没有意识到您必须为 DevTools 单独执行此操作。 我敢肯定有不少。

DevTools 打开后，您可以按F1打开设置。 这将打开默认的首选项面板，您可以在其中选择浅色或深色主题，或使用系统首选项。

一瞥开发强国

这绝不是 DevTools 可以做的所有事情的详尽列表。 随着时间的推移，我希望添加更多我遇到的有趣的技巧。 我希望这些技巧中至少有一两个足够有趣，可以让你添加到你的笔记中。 如果没有，请稍后再回来查看！