谷歌浏览器调试页面可以直接按键盘F12打开,也可以鼠标右键点击 "检查"打开

谷歌浏览器F12调试页面学习 随笔 第1张

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

可以设置调试页面位于网页上的位置

谷歌浏览器F12调试页面学习 随笔 第2张

打开调试页面有以下几个模块:

谷歌浏览器F12调试页面学习 随笔 第3张

1:选择需要查看的页面HTML元素,通过选择定位到Elements中的HTML结构和css样式

2:用来切换手机模式 和 电脑模式

3:Elements主要是用来渲染HTML结构和css样式以及事件绑定

4:Console控制台,主要是用于显示 输出信息、警告信息、错误信息 、模拟window下的变量 属性 和函数

5:Sources显示当前页面所使用的源代码文件,主要用于对代码进行端点调试和代码测试,source里面的文件是可以下载到本地的。

6:Network 显示网络请求的数据

7:Performance用于检测页面性能

8:Memory 用于监控内存消耗

9:Application用于记录本地缓存的信息(cookie,session,localStorage,sessionStorage)

10:Security用于显示网页安全相关信息

11:Audits用于对当前网页进行网络利用情况、网页性能方面的诊断。

下面对每个模块进行具体的学习:

模块1:

谷歌浏览器F12调试页面学习 随笔 第4张

 

模块2:

谷歌浏览器F12调试页面学习 随笔 第5张

模块Elements:

谷歌浏览器F12调试页面学习 随笔 第6张

模块Console:

谷歌浏览器F12调试页面学习 随笔 第7张

谷歌浏览器F12调试页面学习 随笔 第8张

谷歌浏览器F12调试页面学习 随笔 第9张

模块Sources:

谷歌浏览器F12调试页面学习 随笔 第10张

模块Network:

谷歌浏览器F12调试页面学习 随笔 第11张

谷歌浏览器F12调试页面学习 随笔 第12张

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄