C/C++教程

你真的会用 Chrome-devtools 吗？

本文主要是介绍你真的会用 Chrome-devtools 吗？，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

工具使用方法参考：

Chrome工具中文

Chrome开发者工具

每天一点dev技巧

这篇关于你真的会用 Chrome-devtools 吗？的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航