一些不为人知的chrome devtool调试方法

[FrankKai]

作为一个前端工程师，chrome 的 devtool为我们提供了非常多的便利的开发工具，但实际上，这些工具是在工作中一点一点的需求累积后逐渐掌握起来的，所以接下来我将记录自己的chrome devtool调试技巧。 实际上我之前也接触过一些调试工具，并且整理成了博客，前端性能优化之Performance神器，简单前端性能优化之Waterfall。

[FrankKai]

Command Menu

Mac打开DevTools Command Menu，快捷键是Cmd+Shift+P，Windows和Linux是Ctrl+Shift+P。 通过命令行的方式，可以提升以下速度：

• 切换Devtool的Panel，Console，Network等等
• 切换Drawer，Coverage，Performance monitor等等
• 配置Appearance，切换主题，更改panel位置等等
• 配置Console，显示时间戳，清空console等等
• 控制Debugger，Deactivate breakpoints，Pause on exceptions等等
• 控制Devtool，修改Devtook dock位置，搜素等等
• 控制Elements，隐藏Element注释，显示DOM breakpoints等等
• Help，这个很重要，有Chrome 的Release notes
• Mobile调试，截屏full，node等等
• Navigation，Hard reload page，Reload page等等
• Network，禁用cache，开启请求blocking等等
• Performance，很酷炫，显示event listener，类似安卓的开发者模式等等
• Rendering，show frames per second (FPS)，show scroll performance bottlenecks等等
• Settings，各种设置。
• Sources，设置首行缩紧，设置CSS，JS source map

Command Menu对于前端来说，是很提升技术和提升逼格的一个东西。 技术层面可以优化工作流，多方面分析调试应用，提升应用性能等等；逼格层面则就是外行人眼里的专业性。连chrome devtool都没玩转，还好意思自诩高级前端吗？我觉得不能。