谷歌浏览器控制台使用
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();