题外话开篇
作为本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错误信息、打印调试信息等。
是不是超级多,其实大概了解一下方便后面使用,用的次数多就知道每个标签的作用了。
大家正在学习前端的可以互粉哦,我们一起来交流~