谷歌浏览器开发者工具的作用

时间:2022-07-01 05:06:35

就是下面这一行常用工具:

谷歌浏览器开发者工具的作用

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:这个面板可以分析页面加载过程,可以提供减少页面加载时间,提升反应速度的方案。