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

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

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

傻瓜，个人意思是没人喜欢IE8，本周的内容固然与Chrome DevTools有关。须要特别指出的是，我一直使用Chrome Canary¹，推荐你也使用它，由于它能体验Chrome的最新功能。

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

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

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

 

1.动画审查

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

2.截屏功能

当你处于设备模式³时，打开设备选项的弹窗并点击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.尝试不一样色彩

当你在尝试各类颜色时，你能够用eyedropper⁴选择页面中的任何元素更改其颜色，或者经过调色板实现更改。固然用Web安全色也彻底能够。

7.检查实际字体

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

8.编辑页面中的文本

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

9.幻灯片模式

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

10.netwoork面板中的过滤器

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

11.黑色DevTools主题

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

12.代码区块功能(snippet)

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

 

结语

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

你也能够在评论中分享最爱哪条技巧，若是你写得特别棒，请放心，我必定会删掉你的评论...

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

 

注:本文为译文，此处略去原文全部gif图。

原文连接: https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d#.e6agd1m4v

1 Chrome Canary: https://www.google.com.au/chrome/browser/canary.html

2 Animation选项: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations

3 Device Mode: https://developers.google.com/web/tools/chrome-devtools/device-mode/?hl=en

4 eyedropper: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-styles?hl=en#color-picker

5 DevTools文档: https://developers.google.com/web/tools/chrome-devtools/