谷歌浏览器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: