这是我参与「第四届青训营 」笔记创作活动的的第7天
1. Bug与Debug
前端Debug的特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理
2. Chrome DevTools
Elements
-
点击.cls开启动态修改元素的class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态查看类名生效效果
-
点击具体的样式值可以进行编辑，浏览器内容区域实时预览
-
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
-
激活伪类的方法：
- 选中具有伪类的元素点击：hov
- DOM树右键菜单，选择Force state
Console
console.log 输出的值的类型不同，颜色会不同
console.warn
console.error
console.debug
console.info
console.table() 具象化展示JSON和数组
console.dir() 通过类似文件树展开对象的属性
console.time()
Source
-
程序暂停的方式：
- 程序中写入debugger
- 在浏览器Sources页面的相对应行数单击，改行前面出现蓝色箭头框
-
Breakpoints列表查看断点列表
-
暂停状态下，鼠标hover变量可以查看变量的值
-
Watch可以添加对变量的监控，查看变量的值
-
Scope可以查看作用域列表
-
Call Stack可以查看当前JavaScript代码的调用栈
压缩后的代码如何调试？
使用Source Map 可以将压缩之后的代码与源码进行映射，代码上线时是不带SourceMap的，SourceMap被上传到监控平台，在代码上线出现问题的时候能够提供错误位置。
Network
Application
展示本地存储相关的信息：
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Performance
LightHouse
衡量站点性能
核心Web指标：
- LCP：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
- FID：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- CLS：累计布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。
2. 移动端H5调试
真机调试
VConsole
- 日志(Logs): console.log..
- 网络(Network): XMLHttpRequest,Fetch, sendBeacon
- 节点(Element):HTML节点树
- 存储(Storage): Cookies,LocalStorage,SessionStorage
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
- Charles 适合查看、控制网络请求、分析数据
- Fiddler 与Charles类似，适合windows平台
- spy-debugger 远程调试手机页面，抓包
- Whistle 基于Node实现的跨平台Web调试代理工具
3. Nodejs调试
Inspector Protocol + Chrome Devtool
- 执行命令 node --inspect=8888 index.js
- chrome浏览器访问服务
- 点击绿色node图标打开node调试面板
- 在node调试面板中使用断点调试
Inspector Protocol + VS code
在VSCode中点击运行，添加配置，启动调试，添加断点，查看变量和堆栈
常用开发调试技巧
线上即时修改Overrides
- 打开Source面板下的Overrides
- 选择一个本地的空文件夹目录
- 允许授权
- 在page中修改代码，修改完成后Ctrl+S保存
- 打开devTools，点击右上角三点->More tools-> Changes,就能看到所有修改
利用代理解决开发阶段的跨域问题
启用本地source map
线上不存在SourceMap时可以使用Map Local网络映射功能来访问本地的SourceMap文件
