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

200

译者:MinweiShen

原文链接

在JavaScirpt里设置断点,检阅HTML和CSS元素并在它们更新时实时查看变化,性能分析...没错,这周的文章主题就是IE8里的开发者工具

[那是什么?真的假的?你确定?我知道了,谢谢,再见,不过真的没必要]

好吧,刚才有人告诉我没人像我一样喜欢IE8,那么这周的主题就写关于Chrome的开发者工具吧。更具体点,我用 Chrome Canary ,你也应该用用它。这可不仅仅是因为Chrome Canary好像一种很小很可爱的鸟,而且它们会燃烧生命给我们提供燃料。

这里,我列出了一些开发工具的建议,希望里面至少有一条是你还不知道的。如果你发现你不知道的那条其实很有用,说句实话,我会非常高兴的。

(在这个文章里,我用了动态的gif。第一遍看的时候,它们很有用,不过之后就变得很讨人厌了。如果你在电脑上,我建议你打开开发者工具,删掉那些带图片的节点。如果你是在一台小的设备上,那你就把那些不想看的东西用牌或者围巾什么的挡起来吧。)

好吧,游戏开始了。

编辑:这一条完全值得放在最开始。评论里的某个聪明人告诉我

**copy (someVariable)**

会把变量的值拷贝到剪贴板。我绝对会充分用这个的!

现在,节目开始。

1. 动画审阅

动画很可爱。它们可以取悦用户,更重要的是,它们让我觉得愉悦。开发工具里的动画工具让你可以把页面里的所有动画减慢到25%或10%(世界会变得好像兔子眼中的世界一样),甚至允许你回放某个特定的动画。

<canvas width=""75"" height=""26"">

哇! 动态的面板!

2. 好看的截图

当你在设备模式中时,你可以打开设备的边框,并且在你按下截图按钮时,截图会包含边框。

<canvas width=""75"" height=""47"">

结果跟你猜的可能差不多,是这个样子的:

<canvas width=""37"" height=""75"">

3. 控制台里的$0

这是个很小的技巧。

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

这是一个该元素的真正引用,所以,你可以用例如 0.classList.add(touchof)0.classList.add('touch-of')**或 **0.getBoundingClientRect() 这样的代码来把它变大,或者如果你的页面里加载了jQuery,你可以用诸如**((0).data()**这样的代码来获得节点上面的数据。

默认情况下,Chrome会给你显示该节点DOM风格的表达。不过,如果你想以JavaScirpt对象的形式查看这个元素,你可以输入console.dir($0)

注意这个区别:

<canvas width=""75"" height=""61"">

如果你用着很时髦的React,并且安装了React开发者工具,那么 r是对React组件的引用。举个例子,你可以输入r**是对React组件的引用。举个例子,你可以输入 **r.props来查看所有的属性。

<canvas width=""75"" height=""67"">

额外的建议:你可以在控制台里输入一个元素的ID,并得到对应元素的引用,因为元素的ID是有点排序但又不完全是的全局变量。真奇怪。

4. 控制台里的箭头函数

这其实并不是一个开发者工具的建议,不过因为是我写的,所以你不得不看到它,而且你肯定会喜欢它的。由于箭头函数的出现,在控制台里写一些实用的单行的函数更方便了,例如:**performance.getEntries().filter(entry => entry.name.includes(‘static’)) **提供了一些关于我所有的从同一个域名发出的请求的有用信息,他们的名字中还包含了静态的信息。

当然,如果你一定要用超过一行的代码,你可以按shift+enter到新的一行,而不执行上面的代码。

5. 选中选择器

Elements面板上的搜索框不仅仅可以用来搜string(真有意思,它还能搜什么呢?!),它也可以匹配CSS选择器。这对那些需要写选择器,但又不是前端开发者的人或工具来说非常方便,例如,实现自动化测试。

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

<canvas width=""75"" height=""75"">

6. 尝试不同颜色

在你尝试不同颜色时,你可以用eyedropper去选择页面上的任意元素,或者选择页面上已经存在的任意颜色模板,甚至是从material design中选一个现成的颜色。

<canvas width=""75"" height=""26"">

注意这些动态的gif会毁了那些颜色,它们实际上并不是那样子的。

7. 检查渲染的字体

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

<canvas width=""75"" height=""61"">

8. 编辑页面上的任何文字

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

接下来,你就可以在任意地方点击并输出文字了。

<canvas width=""75"" height=""26"">

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

9. 幻灯片

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

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

<canvas width=""75"" height=""57"">

每当我不开心的时候,我就会看看这个。我最喜欢的部分就是当所有的文字全消失的时候。

10. 在Network面板上过滤

如果你在做任何一种性能测试,你都会想知道网络加载了什么。如果你的页面上有广告,那么那大概会加载200多个东西。为了让这个列表短一点,你可以通过资源类型或域名来进行过滤(按住cmd或ctrl可以多选)。

<canvas width=""75"" height=""32"">

11. 深色主题

没啥,就因为它是深色主题

<canvas width=""75"" height=""41"">

幸好它在偏好页面的最上面

12. Chrome代码片段

我超爱代码片段(很可惜它们不像其他设置一样可以在不同浏览器之间同步)

<canvas width=""75"" height=""27"">

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


结语

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

请在下面的评论里分享你最喜欢的技巧。如果它们实在太酷炫,我有可能觉得受到威胁并把它们删了。所以,普通一点的就行。


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

<canvas width=""75"" height=""70"">