相信大多数前端职业生涯的开始都是从
F12(Windows) 或Cmd+Opt+I(Mac), chrome调试工具的使用能很大程度的体现一个前端工程师的能力,所以打算写一篇我所了解使用的 devtools 调试方法
1. 打开全局命令菜单
Cmd + Shift + P(Mac)或Ctrl + Shift + P(Windows,Linux)打开命令菜单,chrome有挺多入口很深的功能都可以在这里找到

2. 快速全局搜索
接手项目时常常出现只记得api或者某个id却不知道具体静态资源的情况这个时候就需要全局搜索
... -> More tools -> Search

这时就出现了全局搜索,这个全局是针对所有Source下的资源的,我们在搜索框中输入想要搜索的api,点击搜索结果就能跳转到对应的js下
3. source中js行数快捷跳转

4. 截屏长图

5. Alt + Click 展开当前dom全部子节点

6. 查看资源在何处加载

7. css搜索器搜索dom

8. chrome加载资源图片转base64

9. 多光标编辑

10. 按住alt局部选中

11. 关于performance的用法
个人感觉 Chrome运行时性能瓶颈分析 这篇算是写的比较好的性能调试介绍了,以后会也会专门写一篇性能调试