Chrome DevTools的六个技巧

以下是Umar Hansa的来宾帖子。 乌玛（Umar）发行了一个时事通讯，我很喜欢，并愿意提供这种风格的客座文章。 我让他自我介绍。

嘿，我是Umar。 我喜欢在Twitter（ @umaar ）上以及通过Dev技巧 （与gif形式的开发人员技巧时事通讯）共享与Web开发相关的技巧。 现在，这主要与Chrome DevTools有关。 在开始之前，感谢CSS-Tricks让我为我一直很喜欢的社区做出贡献。

这篇文章将介绍Chrome DevTools的六个流行技巧。 您以前可能已经看过其中的一些内容，但是希望您有机会在Inspect Element旅程中重新尝试一下。

通过CSS选择器进行DOM搜索

这是快速找到所需DOM节点的便捷技巧。 在“元素面板”中，按Cmd + F（在Windows中为Ctrl + F）打开搜索框。 您可以使用以下内容进行搜索：

• CSS Selector ：这是很酷的选择，它是关于技巧的。 使用a[href='']查找所有没有href属性值的锚标记，或者通过实时更新搜索结果来遍历DOM。
• 字符串 ：例如，段落元素中的一段文本。
• XPath ：也许不是最受欢迎的，但是值得知道。

媒体查询检查器

本技巧假定您已经了解Device Mode 。

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

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

复制回应

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

复制为cURL

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

内联JS值

最近，在DevTools中调试JavaScript有了很多改进。 现在，您可以在断点处暂停并接收有关变量值当前状态的视觉反馈。 这些内联值通常将揭示函数附近的参数。

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

网络幻灯片（偷看！）

最后，我想我将展示一个可能的即将发布的功能，我认为它很酷。 实际上，这个功能非常酷，需要它自己的警告。

这是实验性的 DevTools功能。 实验性功能可能会中断，更改或消失，因此请记住这一点。

如果您以前使用过WebPageTest ，则可能对您很熟悉此幻灯片功能。 它显示了页面渲染的屏幕截图，对于了解用户可能看到的内容非常有用。

在记录CSS技巧时，我们注意到：

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

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

结论

我知道，这些都是以Chrome为中心的。 但是，Firefox DevTools也添加了一些出色的功能。

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

翻译自: https://css-tricks.com/six-tips-for-chrome-devtools/