谷歌浏览器F12调试页面学习

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

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

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

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:

模块2:

模块Elements:

模块Console:

模块Sources:

模块Network:

原文地址:https://www.cnblogs.com/zengxia/p/10614414.html