这是我参与「第四届青训营 」笔记创作活动的第6天
前端Debug特点
- 多平台（浏览器控制台、node、小程序、应用）
- 多环境（本地、线上）
- 多工具
- 多技巧（console、断电、代理）
浏览器控制台
style 面板
- 修改、查看元素样式
- 查看元素伪类效果（右键：force state）
- computed下面可以搜索样式，点击可以跳转到对应style面板
console面板
-
console.log 打印数据 （不同数据类型颜色不同，比如Number是蓝色，String是灰色）
-
console.table 具象化展示JSON和数组数据，不折叠
-
console.dir 通过类似文件树的方式展示对象属性
-
console.time 开始计时 测量一个javascript脚本程序执行消耗的时间
- console.time(“循环开始时间”)
- 传的参数与console.timeEnd(“循环开始时间”)的参数必须一致，否则输出是不会计时的
-
console.timeEnd 结束计时并立即打印所耗时间
-
console.warn 以警告的形式，打印信息
-
console.error 以错误的形式，打印信息
-
console.debug 与log一样
-
console.info 与log一样
source面板
- 查看源代码
- 最右边为Debug工具栏 ⭐
- 断点调试器⭐
断点调试
运行到断点所在行之前的代码就暂停，下面的代码不运行
先大致判断错误出现的位置，然后再通过断点精准定位
调试别人的代码，先看整体代码结构，先不看具体实现
-
在代码里想要添加断点（暂停运行）的代码前添加关键字 debugger，点击继续按钮取消暂停
-
在控制台代码区域点击需要暂停的代码的行号设置断点
-
- 1号按钮，继续运行到下一个断点所在的代码行之前。
- 2号按钮，快速运行当前断点所在行的代码，到断点下一行暂停
- 3号按钮，进入断点对应函数内部，一行一行看代码的具体执行。
-
可以通过打印日志的方式查看变量的值
-
可以通过鼠标悬停对应变量查看值。
-
可以通过右侧的watch面板，输入变量名查看对应的值
-
可以通过右侧的Breakpoints面板，查看设置了哪些断点
-
可以通过右侧的scope面板，查看作用域（包含闭包）
-
可以通过右侧的call stack面板，查看调用栈
network面板
- 可以模拟弱网环境
- 查看对应接口信息，检查接口是否符合预期
application面板
- 展示本地存储信息
- 一键清空存储信息
performance面板
- 查看性能信息（查看FRS指标，寻找性能瓶颈，优化代码）
- 模拟各种性能优劣情况
使用：先通过控制台录制页面后，可以查看具体帧信息。 查看FRS：找到渲染rendering界面，勾上Frame Rendering stats.
正常屏幕刷新率60hz，frs低于60则会丢帧，导致卡顿
点击红色区域可以查看对应警告和源代码
点击优化查看优化后的效果和代码
Lighthouse面板
先进行性能分析
查看核心指标
压缩后的代码如何调试
代码经过压缩和混淆或者加密之后防止被用户阅读到。
Source Map
作用：映射源码。 使用方法： webpack里配置devtool:"scource-map"，打包后就有对应文件。
一般在项目上线之前把source map文件上传到监控平台，项目上线的平台没有source map
- 英文，表示源码以及压缩代码的位置关联
- 逗号，分隔一行代码
- 分号，表示换行。
- 缺陷：比源码体积大
移动端H5调试
- 真机调试
- 代理工具调试（charles、fiddler、spy-debugger、whistle）
代理工具调试
node.js调试
inspector protocol + Chrome devtool
inspector protocol + vscode
- vscode点击运行
- 添加配置
- 添加断点
- 查看变量、堆栈
前端常用调试技巧
- 线上即时修改Overrides
- 运用代理解决开发阶段跨域问题
- 使用本地source map
- 使用mock模拟数据
