Chrome 开发者工具的六个小技巧

下面是特邀Umar Hansa做的一篇文章。Umar有一个新闻组，我是他的粉丝，他很亲切地应我们要求把这篇约稿写成了新闻组的形式。我将让他介绍一下他自己。

嘿，我是Umar。我喜欢在Twitter(@umaar)上分享web开发相关的小技巧，同时也喜欢通过Dev Tips以gif的形式分享开发的小技巧。Dev Tips是开发者的一个新闻组。现在，它主要是Chrome开发工具相关的内容。开始之前，感谢CSS-Tricks给我机会为自己喜欢的一个组织做点贡献。

这篇文章将涵盖Chrome开发工具的六个流行的小技巧。也许有些人已经看过其中一部分，如果已经有所了解，希望本文也能在你们的调试之旅中起到温故知新的作用。

用CSS选择器做DOM搜索

视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/search-by-selector.mp4

这里有一个快速找到你需要的DOM节点的方便技巧。在Elements面板上，按Cmd + F（在Windows上按Ctrl + F），打开搜索框。你可以用下列工具来搜索：

• CSS选择器：这个很酷，也是本条技巧的意义所在。例如使用a[href=”]来找到所有href值为空的anchor元素（a标签），或者借助实时更新的搜索结果来遍历DOM节点。
• String: 例如，在一个段落元素里的一个文本。
• XPath: 可能不是最流行的，但值得知道它在那儿。

媒体查询查看器

视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/media-query-inspector.mp4

假设你已经对设备模式（Device Mode）有所了解。

你的样式可以注册媒体查询。当在设备模式时，这样的媒体查询显示在Media Query Inspector里。彩色的媒体查询条的宽度和视标尺对齐。

• 你可以点击媒体查询条里的刻度来触发媒体查询——这样会依次设置视图大小。
• 你可以悬停在刻度上，看看有准确规则的工具提示。
• 你可以右键点击媒体查询条里的刻度，并选择显示源代码。这会把你定位到源代码中定义媒体查询的地方。

视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/media-query-inspector-reveal.mp4

复制一个响应

视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/copy-response.mp4

当在网络面板里时，你可以右键点击一个资源并选择复制响应来将资源内容复制到剪贴板里。除此之外，你可以直接到资源面板里将一个资源拖拽到编辑器里。这样可将该文件的内容嵌入编辑器。

作为cURL复制

视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/copy-as-curl.mp4

当在网络面板里时，你可以右键点击一个资源并选择作为cURL复制。开发者工具在剪贴板里放入了一条终端友好的指令，其中包含原始的请求头。这样，你可以确定你发出的请求尽可能接近初始请求。

内嵌的JS值

视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/inline-js-values.mp4

最近，在开发者工具里调试JavaScript做了很多改进。你现在可以在一个断点暂停，并接收变量的当前状态的可视化反馈。这些内嵌在代码旁边的值会显示附近函数的参数。

这个特性的开/关切换在Settings > General > Sources > “Display variable values inline while debugging”里。

网络幻灯片（抢先看！）

为了收尾，我想我应该展示一个可能即将上线的特性，我觉得它相当酷。事实上，这个特性太酷了，因此它需要它自己的警告。

这是一个实验性的开发者工具的特性。实验性的特性可能突破，变化，或者消失，所以请记得这点。

视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/network-filmstrip.mp4

如果你以前用过WebPageTest, 这个幻灯片特性可能看起来似曾相识。它给你展示页面渲染中的屏幕，可贵的是它能理解你的用户可能看到的画面。

在CSS-Tricks的记录里，我们注意到：

• 最初无文本的页面渲染是由于字体没准备好。
• 次要内容加载，像是广告/赞助，是在主要内容加载之后。
• 因为显示了时间数据，一个特定的显示画面可以和它所被渲染的时间相吻合，并且我们可以在不到一秒内看到主要内容。

这个特性并不是缺省可用的，不过一次快速搜索会给你展示怎样使DevTools隐藏的实验可用。但是要记住以上的警告！