Chrome开发者工具栏都代表什么

来源：互联网发布：吴亦凡人品知乎编辑：程序博客网时间：2024/04/29 04:50

题外话开篇

作为本blog的第一篇文章，博主的内心是激动的，所以忍不住在放送知识的时候抒一小段情。首先说明博主还是一只前端的小白，既然已经深思熟虑跳入了前端的坑，那就准备头也不回的学到底。希望可以在csdn社区跟大神学习，劳烦各位小伙伴们指点一二，大家一起学习。好的题外话到此结束，等以后再发博好好抒情，哈哈。

前端代码调试大多喜欢用chrome的开发者工具，至少我是使用它。F12后出来一条工具栏，因为初期只涉及HTML文档，也只在Elements标签页中调试元素，对其他的标签页没有了解，所以首先查资料了解了这些，也对后续学习这些知识有了一定的了解。

下图是工具栏界面

工具栏

第一个查找图片按钮，可以直接在页面上选择元素，方便快速定位所需调试的元素。
第二个手机图标按钮，可以调整宽度和高度，适应更多的设备。
Elements：可查看编辑HTML、CSS里的元素。
需要查看修改哪些地方，就在上图中对应的窗口即可，所有修改都会在页面上显示。
Network：可查看网站请求的网络情况、某一请求的请求头、响应头和响应内容。特别在查看Ajax类请求时非常有帮助。[注：必须打开Chrome开发者工具后发起的请求才能显示]
Sources:左侧可以选择要调试的JS文件，在右侧可以调试JS代码。
Timeline:查看JS执行时间、页面元素渲染时间。
Profiles:查看CPU执行时间与内存占用情况，主要用于性能优化。
Resources:查看请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看存储的相关信息，并对存储的内容编辑和删除。
Audits:对优化前端页面、提高网页加载速度有很大帮助。
Console:JS控制台。可查看JS错误信息、打印调试信息等。

是不是超级多，其实大概了解一下方便后面使用，用的次数多就知道每个标签的作用了。
大家正在学习前端的可以互粉哦，我们一起来交流~

1 0