Chrome DevTools 的六个小技巧

以下是 Umar Hansa 的客座文章。Umar 的新闻简报是我喜欢的，他慷慨地提供以这种风格撰写这篇文章。我会让他自我介绍。

大家好，我是 Umar。我喜欢在 Twitter 上分享有关 Web 开发的相关技巧 (@umaar)，以及通过 Dev Tips 分享开发技巧，这些技巧以 GIF 的形式呈现。目前，所有内容主要与 Chrome DevTools 相关。在开始之前，感谢 CSS-Tricks 让我为我一直非常喜欢的社区做出贡献。

本文将介绍六个常用的 Chrome DevTools 小技巧。您可能已经看到过其中的一些技巧，但希望如果您已经看到过，它们将作为您在“检查元素”之旅中的复习资料。

通过 CSS 选择器搜索 DOM

这是一个方便的技巧，可以快速找到您需要的 DOM 节点。在“元素”面板中，按 Cmd + F（Windows 上为 Ctrl + F）打开搜索框。您可以使用以下方法搜索

• CSS 选择器：这是最酷的技巧，也是本文的重点。使用 a[href=''] 查找所有没有 href 属性值的锚点标签，或通过 DOM 进行遍历，因为搜索结果会实时更新。
• 字符串：例如，段落元素中的文本片段。
• XPath：可能不是最流行的，但值得了解其存在。

媒体查询检查器

本技巧假定您已经了解 设备模式。

您的样式表可以注册媒体查询。在设备模式下，这些媒体查询将显示在媒体查询检查器中。彩色媒体查询条的宽度与视口标尺对齐。

• 您可以点击媒体查询条中的一个段来触发该媒体查询，这将反过来设置视口尺寸。
• 您可以将鼠标悬停在段上以查看包含精确规则的工具提示。
• 您可以右键点击条中的一个段，然后选择“在源代码中显示”。这将带您到定义媒体查询的源代码位置。

复制响应

在“网络”面板中，您可以右键点击一个资源，然后选择“复制响应”将内容复制到剪贴板。除此之外，您还可以转到“源”面板，并将资源拖放到代码编辑器中。这会将该文件的内容嵌入到编辑器中。

复制为 cURL

在“网络”面板中，您可以右键点击一个资源，然后选择“复制为 cURL”。DevTools 会将一个终端友好的命令放到剪贴板中，以及 原始请求标头。这样，您可以确保您发出的请求尽可能接近原始请求。

内联 JS 值

最近，在 DevTools 中调试 JavaScript 的体验有了很大改进。您现在可以在断点处暂停，并获得 当前 变量值状态的视觉反馈。这些内联值通常会显示在函数参数附近。

此功能的开/关开关位于“设置”>“常规”>“源”>“调试时内联显示变量值”。

网络胶片（抢先体验！）

最后，我想展示一个即将推出的功能，我认为它非常酷。事实上，它酷到需要发出警告。

这是一个 实验性 的 DevTools 功能。实验性功能可能会出现故障、更改或消失，因此请牢记这一点。

如果您之前使用过 WebPageTest，那么您可能熟悉这个胶片功能。它显示了页面渲染的屏幕截图，对于理解用户可能看到的内容很有价值。

在录制 CSS-Tricks 时，我们注意到

• 页面最初渲染时没有文本，因为字体尚未准备好。
• 次要内容，例如广告/赞助商，在主要内容加载 之后 加载。
• 由于显示了时间数据，因此可以将特定屏幕截图与到达该点的所需时间匹配，并且我们可以看到主要内容在不到一秒钟的时间内可见。

此功能默认情况下未启用，但快速搜索将显示如何启用 DevTools 隐藏的实验。但请记住上面的警告！

总结

我知道，这一切都非常以 Chrome 为中心。但是，Firefox DevTools 也一直在添加一些非常棒的功能。

感谢您的阅读。如果您喜欢这些类型的技巧，您可以订阅 Dev Tips 或关注我的 Twitter 帐户。