就是下面这一行常用工具:
1.Elements:这个大家经常用,肯定很熟悉了。元素面板,用来操作DOM和样式,可以 直接在上面进行编辑。
2.Console: 控制台,可以在代码中通过console.log(data)来打印出数据,也可以直接在控制台输入javascript进行操作,直接获取元素。
3. Sources: 这里是页面的源代码,最常用的功能就是进行断点调试,顾名思义就是你可以设置在某一个节点进行调试,这一功能是每个前端程序员必备的技能,如果你还不会,赶快去学习吧。
4.Network: 这里是网络请求,记录当前页面的网络操作,包括详细的时间,http请求和相应,cookies等。
点开之后,有几个常用的操作:
Headers,这里是http请求的核心,包含了请求页面,服务器等相关的信息。
Preview,这里是传递的Json数据,
Response,这里是响应服务器对浏览器请求的文件或数据。
Timing,这里是各种时间,等待时间,连接时间,上传时间,下载时间等。
5.Performance,这里是性能测试,可以通过查看请求开始和结束的时间,来查找加载速度过慢的原因主要实在哪一部分。
6.Memory:从来没用过,里面都是一些配置和分析。
7.Application:可以检查加载的所有资源,应用缓存,数据库,cookies,图片等。
8.Security:可以再面板当中调试安全问题。
9.Audits:这个面板可以分析页面加载过程,可以提供减少页面加载时间,提升反应速度的方案。