Chrome开发者工具的12条使用技巧

JavaScript断点，审查HTML与CSS并实时更改，性能分析... 是的，本周内容均与IE8开发者工具有关。

[你在逗我吗？我明白了，再见。哦不，是永远不见。]

傻瓜，我的意思是没人喜欢IE8，本周的内容当然与Chrome DevTools有关。需要特别指出的是，我一直使用Chrome Canary1，推荐你也使用它，因为它能体验Chrome的最新功能。

下面这份关于使用技巧的清单我希望你至少有一条没听过，假如你不了解的那条恰好能帮到你，那我就太开心了。

（文章中的gif图循环播放可能让你心烦，如果你用的是大屏幕，建议打开Chrome DevTools，删掉容纳图片的DOM节点；如果是小屏幕，用扑克牌或者围巾挡住那张图就好...）

好的，下面我开始复制粘贴了:)

1.动画审查

动画效果的确很棒，它能让每个人开心。DevTools的animation选项2可以将动画播放速度降到25%或10%（尽管和兔子看世界的角度差不多...），当然也能禁止某个特定动作。

2.截屏功能

当你处于设备模式3时，打开设备选项的弹窗并点击Capture screenshot选项,你就得到了一张包括设备外观的截图。

3.控制台中的$0

一般人我不告诉...

在console中键入$0，你将得到最近一次在Elements中选中的DOM节点。

这是元素的正常参考信息，你可以尝试键入$0.classList.add('touch-of')或者$0.getBoundingClientRect()看看，又或者你在页面中使用了jQuery，键入$($0).data()也可以看到结果。

默认情况下，Chrome会以DOM对象形式展示节点信息。如果你想看节点的JavaScript对象形式，键入console.dir($0)即可。

如果你正在用React并安装了React dev tools扩展程序，键入$r就能看到react组分信息。譬如键入$r.props就能看到任意一个DOM对象。

额外提示:在console中键入一个元素的ID同样能得到该元素的参考信息，因为元素ID是"非真正意义上"的全局变量（是不是很奇怪...）

4.console中的箭头函数

这并非严格意义上的DevTools技巧，但我就是写了，你必须得看...相信我，你会喜欢它的。随着箭头函数的出现，在console中一行代码就可能解决问题。譬如键入performance.getEntries().filter(entry=>entry.name.includes('static'))可以得到你对某个特定域名的所有请求。

当然你可以按shift+enter对代码换行。console由CodeMirror支持(Chrome56之后)，有个功能叫'智能换行'。如果该功能认为你想另写一行代码，按enter键就能自动换行。但在回调函数里该功能似乎不起作用。

谢谢Kayce指出这个问题。

5.对选择器的搜索匹配

Elements面板的搜索功能不仅能搜索字符串(那它还能干什么?!)，还能匹配CSS选择器。这让不需要网络的开发者写选择器时相当顺手，比如自动化测试。

6.尝试不同色彩

当你在尝试各种颜色时，你可以用eyedropper4选择页面中的任何元素更改其颜色，或者通过调色板实现更改。当然用Web安全色也完全可以。

7.检查实际字体

有时不能确定实际使用的是何种字体。Elements面板的底部有个Computed选项，点击就能查看实际使用的字体，即使你的电脑的font-family列表中没有这种字体，字体名也能显示。

8.编辑页面中的文本

假如你有一个指定宽度的菜单栏，你想知道增加现有文本长度后的折叠效果，请调整到设计模式(在console中键入document.designMode = 'on' 运行即可)。这样你就能点击任意文本并编辑了。

9.幻灯片模式

一个最棒的性能调整功能是Network选项的幻灯片模式5。它让你清楚地看到用户加载内容的过程，这比难以理解的domContentLoaded实在好太多。

10.netwoork面板中的过滤器

假如你正在做性能工作，你一定想了解线路的通信内容。如果你的站点有广告，可能就需要加载200项资源。你可以通过资源类型(按住cmd/ctrl多选)和域名进行过滤操作。

11.黑色DevTools主题

你懂的...程序员的最爱

12.代码区块功能(snippet)

代码区块能在上下文中执行，还有比这更酷的吗?也就是说，即使你的代码有DOM操作，外链URL，cookies操作，跨域请求等等，代码区块的执行结果不变。

结语

你可能在想下面该如何做，我有个建议:算算你去年在DevTools上花了多长时间，现在抽出它的0.5%在下周读完DevTools的文档4。

你也可以在评论中分享最爱哪条技巧，如果你写得特别棒，请放心，我一定会删掉你的评论...

额外提示:当你安装Chrome Canary时，登陆并同步谷歌账号，但在高级同步设置中不要勾选“扩展程序”。这样就同步了历史和书签等功能，但并未同步可能扰乱开发环境的DOM操作扩展程序。

译文出处