1. 使用说明

浏览器控制台是针对于前端开发者进行页面调试，错误定位，日志打印等开发的辅助工具，谷歌浏览器控制台是当前最受前端开发喜欢的调试工具。

主要包含：Element（页面元素查看、css样式调整）、Console（日志打印记录）、Sources（js断点调试、资源查找）、Network（网络接口调用查看）、Application（客户端存储）等5个主要部分。

控制台使用方法：打开谷歌浏览器，页面上按 F12 按键，调出控制台。

2. 整体布局介绍

上图标记 1 的为选中，即点击之后，在页面对应元素位置点击，下方HTML可以直接定位到对应元素；
上图标记 2 的为移动端模拟切换，同时可以调整移动端型号与宽高，调试页面布局；
上图标记 3 的为功能tab页签切换，后面会进行每一项的详细讲解；
上图标记 4 的为控制台位置切换，点击可以看到有4种布局方式，方便页面调试，分为独立窗口展示、页面左边展示、下方展示、右边展示。

在页面中进行右键操作，可以查看网页源代码，检查元素，保存等操作：

3. Element

经常使用有两种情况：1. 页面元素查找修改对应元素的css样式； 2. 页面HTML操作

3.1 页面元素查找&修改css样式

点击左上角图标，选中页面元素，点击，自动定位到id为 testDiv 的元素，在右侧，可以修改css样式进行页面调试，查看修改结果

3.2 操作HTML元素

选中想要操作的元素，右键可以进行编辑，删除等操作，以及对外部引用资源可以进行 open in new tab ，进行访问。

4. Console

经常使用有两种情况：1. 日志打印，代码调试；2. 可以作为小型代码编辑器使用。

上图标记 1 可以限制展示日志类型，告警、信息、错误等
上图标记 2 可以清除所有日志
上图标记 3 可以设置日志保留机制，Preserve log 可以在页面跳转时仍然保留日志信息

4.1 日志打印

日志打印用于调试代码，查看当时变量信息等，判断代码处理逻辑；

4.2 代码编辑器

用于元素获取，数组方法测试编写等；

5. Sources

用于资源文件获取，代码断点调试等

Sources面板可以查看当前引入的所有资源文件，点击对应文件，可以进行断点调试功能：
上图标记 1 点击后可以切换打断点；
上图标记 2 为跳过断点；
上图标记 3 为下一步逻辑处理；
上图标记 4 为进入当前方法；
上图标记 5 为跳出当前方法；

6. Network

Network 主要用来判断接口调用状态，以及接口传参与接口数据返回

上图标记 1 为 network 清除；
上图标记 2 为 接口不清除，即页面跳转也能保留前一页面接口，用于解决部分接口报错导致的跳转；
上图标记 3 为禁用接口缓存；
上图标记 4 为切换网络，模拟3G等网络；
上图标记 5 为状态码，用于判断资源与接口返回是否正常；

6.1 接口状态码

200 – 请求正常
300 – 页面重定向
404 – 资源没有找到
500 – 服务器报错

6.2 接口传参&数据返回

点击某一接口可以看到接口的 request Headers 和 response Headers ，以及接口传参，在 response 里面可以看到接口返回的数据，方便前后台对接调试。

7. Application – 浏览器存储

浏览器存储分为三种：1. cookie存储； 2. localStorage存储； 3. sessionStorage存储；

7.1 cookie 存储

cookie 存储的东西会随着每次接口进行传送，出于安全性考虑，cookie 应该设置 HttpOnly 属性，客户端禁止操作 cookie，服务端只存必要的身份标识字段进行性能优化；

7.2 localStorage存储

客户端永久性存储，除非用户手动清理，否则一直存在，不会随着当前窗口的关闭而关闭，出于安全性考虑，禁止存储敏感数据，尽量避免使用localStorage存储；

// 以键值对形式存储，存储值为string类型，JSON.stringify()；
localStorage.setItem('key','string');	
// 移除
localStorage.removeItem('key');
// 获取
localStorage.getItem('key');
// 清理所有localStorage存储
localStorage.clear();

7.3 sessionStorage存储

客户端临时性存储，随着当前窗口的关闭而关闭，出于安全性考虑，禁止存储敏感数据，使用完成后及时进行移除操作；

// 以键值对形式存储，存储值为string类型，JSON.stringify()；
sessionStorage.setItem('key','string');	
// 移除
sessionStorage.removeItem('key');
// 获取
sessionStorage.getItem('key');
// 清理所有sessionStorage存储
sessionStorage.clear();