相信大多数前端职业生涯的开始都是从
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运行时性能瓶颈分析 这篇算是写的比较好的性能调试介绍了,以后会也会专门写一篇性能调试