12个酷炫的Chrome开发者工具建议

在JavaScirpt里增设PT5716SB0，仪仗队HTML和CSS原素并在它预览时静态查阅变动，操控性预测…要说，九月份的该文主轴就是IE8里的开发人员辅助工具。

[那是甚么？许晓萌的？你确认？我晓得了，非常感谢，我爱你，不过吗没必要性]。

好吧，这边没人说我没法像我一样讨厌IE8，那么九月份的主轴就写有关Chrome的开发人员辅助工具吧。更具体内容点，我用 Chrome Canary，你也应该它。这可更为重要原因在于Chrome Canary好似一种极小很调皮的鸟，而且它会熔化心灵给我们提供推进剂。

这里，我列举了一些开发辅助工具的提议，期望里头最少有两条是你还不晓得的。假如你发现你不晓得的这条只不过很管用，Cadours，就要十分高兴的。

（在那个该文里，我用了静态的gif。第二遍看的时候，它很管用，但是之后就显得很说实话了。假如你在笔记本电脑上，我提议你关上开发人员辅助工具，删去这些带相片的结点。假如你是在两台小的电子设备上，那你就把这些不该看的小东西用牌或是领带甚么的挡起来吧。）

好吧，格斗游戏已经开始了。

撰稿：这两条全然值得称赞放到最已经开始。该文里的某一傻子说我

会把表达式的值复制到配置文件。我当然会充份用那个的！

现在，电视节目已经开始。

1. 动画电影校对

动画电影很调皮。它能讨好使用者，更重要的是，它让我真的畅快。开发辅助工具里的动画电影辅助工具让你能把网页里的大部份动画电影减慢到25%或10%（世界会显得好似兔子眼中的世界一样），甚至允许你回放某一特定的动画电影。

2. 好看的截图

当你在电子设备模式中时，你能关上电子设备的边框，并且在你按下截图按钮时，截图会包含边框。

结果跟你猜的可能差不多，是那个样子的：

3. 控制台里的$0

这是个极小的技巧。

在控制台里输入$0返回的是Elements面板里当前选中的DOM结点的引用。

这是一个该原素的真正引用，所以，你能用例如 $0.classList.add(touch-of)或 $0.getBoundingClientRect() 这样的代码来把它变大，或是假如你的网页里加载了jQuery，你能用诸如$($0).data()这样的代码来获得结点上面的数据。

默认情况下，Chrome会给你显示该结点DOM风格的表达。但是，假如你想以JavaScirpt对象的形式查阅那个原素，你能输入console.dir($0)。

注意那个区别：

假如你用着很时髦的React，并且安装了React开发人员辅助工具，那么 $r是对React组件的引用。举个例子，你能输入$r.props来查阅大部份的属性。

额外的提议：你能在控制台里输入一个原素的ID，并得到对应原素的引用，因为原素的ID是有点排序但又不全然是的全局表达式。真奇怪。

4. 控制台里的箭头函数

这只不过并不是一个开发人员辅助工具的提议，但原因在于是我写的，所以你不得不看到它，而且你肯定会讨厌它的。由于箭头函数的出现，在控制台里写一些实用的单行的函数更方便了，例如：performance.getEntries().filter(entry => entry.name.includes(‘static’))提供了一些有关我大部份的从同一个域名发出的请求的管用信息，他们的名字中还包含了静态的信息。

当然，假如你一定要用超过一行的代码，你能按shift+enter到新的一行，而不执行上面的代码。

5. 选中选择器

Elements面板上的搜索框更为重要能用来搜string（真有意思，它还能搜甚么呢？！），它也能匹配CSS选择器。这对这些需要写选择器，但又不是前端开发人员的人或辅助工具来说非常方便，例如，实现自动化测试。

这里，我找了点乐子，去匹配.section-inner p:nth-of-type(2)

6. 尝试不同颜色

在你尝试不同颜色时，你能用eyedropper去选择网页上的任意原素，或是选择网页上已经存在的任意颜色模板，甚至是从material design中选一个现成的颜色。

7. 检查渲染的字体

有时，你很难判断到底是哪种字体被渲染了。在Elements面板上的Computed的最下面，你能看到到底用了甚么字体，即使它的名字都没有出现在font-family中。

8. 撰稿网页上的任何文字

好，现在你有一个固定宽度的菜单，然后你想晓得过长的文字是否还能在上面优雅地显示。很简单，在设计模式下试试！

接下来，你就能在任意地方点击并输出文字了。

假如你是那个决定用on/off而不是true/false的人，请你来我的办公室，我有话跟你说说。

9. 幻灯片

对于操控性调试来说，最好的特性无外乎Network面板上的幻灯片模式。它让你致力于使用者体验，而不是一些很不明确的数据，像甚么domContentLoaded。

在Adobe的网页上，享受一下它的字体加载有多讽刺，也是很有意思的。

每当我不开心的时候，我就会看看那个。我最讨厌的部分就是当大部份的文字全消失的时候。 ### 10. 在Network面板上过滤 假如你在做任何一种操控性测试，你都会想晓得网络加载了甚么。假如你的网页上有广告，那么那大概会加载200多个小东西。为了让那个列表短一点，你能通过资源类型或域名来进行过滤（按住cmd或ctrl能多选）。

11. 深色主轴

没啥，就因为它是深色主轴

12. Chrome代码片段

我超爱代码片段（很可惜它不像其他增设一样能在不同浏览器之间同步）

最棒的是它执行的上下文是当前网页。所以，这些代码片段就像你网页里的代码一样，能访问DOM，URL，cookie以及其他跨域的资源。

结语

你可能会想，你接下来该怎么办。我有个提议，算一算去年你在开发人员辅助工具上花了多少时间，然后花其中0.5% 的时间，在下面一周读一读那个文档

请在下面的该文里分享你最讨厌的技巧。假如它实在太酷炫，我有可能真的受到威胁并把它删了。所以，普通一点的就行。

噢，我刚想到一个额外的提议。当你安装Chrome Canary时，用你的Google账号登录并同步，但是，在高级同步增设里，不要选择扩展。这样，你就能获得你所有的书签、历史和其他方便的小东西，但是，不会有哪些会毁了你开发环境的能改变DOM的扩展。