这是我参与【第五届青训营】笔记创作的第 9 天。
前端 DeBug 的特点
- 多平台：浏览器、Hybrid、Node.js、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理等
Chrome DevTools
动态修改元素和样式
- 打开控制台，可以在 elements tab 下动态修改元素的 class，点击 .cls 输入样式名可以添加样式
- 输入字符串可以动态地给元素添加类名
- 勾选/取消类名可以动态地查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则，即可查看生效的样式代码
- 在某个 DOM 元素（例如 body）中的右键，选中 Capture node screenshot 即可对该节点内容进行截屏
Console
-
console.log
-
console.warn
-
console.error
-
console.debug
-
console.info
-
console.table
- 具像化的展示JSON和数组数据
-
console.dir
- 通过类似文件树的方式展示对象的属性
-
占位符
- 给日志添加样式，可以突出重要的信息
- %s:字符串占位符；%o:对象占位符；%c:样式占位符；%d:数字占位符
-
console.time()和console.timeEnd()，用来显示代码的运行时间
Source Tab
展示项目源代码，还有Debug调试栏、
断点调试器：断点地方加入debugger;
压缩后的代码需要用Source Map来调试
NetWork
列表展示各种请求资源，总的请求数量还有所耗时间，串行并行，可以模拟弱网环境。可通过查看返回结果判断前端问题还是后端问题。
Application
浏览器存储相关
clear site data 清除缓存
Performance（性能）
控制面板、概览面板、线程面板、统计面板
可模拟性能较差的条件。
例：页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码
Lighthouse
点击性能分析->核心Web指标。（LCP:2.5s,FID:100ms,CLS:0.1或更少）
移动端 H5 调试
真机调试
iOS
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
- 在弹出的 Safari Developer Tools 中调试
没有 iPhone 设备可以在 Mac AppStore 安装 Xcode 使用其内置的iOS 模拟器
Android
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
使用手机扫码查看体验更佳
NodeJs 应用调试
- Inspector Protocol + Chrome devTools
- Inspector Protocol + VS code
常用开发调试技巧
-
线上即时修改Overrides
-
利用代理解决开发阶段的跨域问题
-
启用本地source map
-
使用代理工具Mock数据
-
小黄鸭调试大法
