这是我参与「第四届青训营 」笔记创作活动的的第7天
01 Bug 与 Debug
前端Debug特点
- 多平台
浏览器, Hybrid, NodeJs, 小程序, 桌面应用等
- 多环境
本地开发环境, 线上环境
- 多工具
Chrome devTools, Charles, Spy-Debugger, Whistle, vConsole...
- 多技巧
Console, BreakPoint, sourceMap, 代理等
02 Chrome devTools
元素 (Element)
-
样式 (Style)
- 点击.cls后, 可以动态修改元素的class
- 动态添加类名
- 勾选/取消类名动态查看效果
- 动态修改样式, 实时预览
- 调式伪类可以在样式中点:hov或者在元素中右键元素, 然后选择强制设置元素状态
- 右键节点有个截取节点屏幕截图的功能
-
计算样式 (Computed)
- 可以根据计算样式检索到样式
控制台 (Console)
- console.log() 支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种占位符, 还支持样式 (%c)
- console.table() 具象化的展示JSON和数组数据
- console.dir() 通过类似文件数树的方式展示对象的属性
- console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间
源代码 (Source)
- 可以通过鼠标悬停或者右侧的监视(Watch)在查看变量的值
- 右侧的断点(Breakpoints)可以临时启用或停用断点
- 作用域(Scope)可以看到各个作用域的变量和值
- 压缩混淆后的代码如何调式? 用SourceMap
网络 (Network)
应用 (Application)
性能 (Performance)
- 页面卡顿 => 查看FPS指标 => 寻找性能瓶颈 => 优化代码
Lighthouse
-
核心Web指标
- LCP (Largest Contentful Paint) 最大内容绘制
- First Input Delay (FID) 首次输入延迟
- Cumulative Layout Shift (CLS) 积累布局偏移
03 移动端H5调式
1 真机调试
2 VConsole
3 使用代理工具 (Charles)
04 Node.js调试
1 结合浏览器调试
1 执行命令node --inspect=8888 index.js
2 打开浏览器访问服务
3 点击图标打卡调式面板
2 结合VSCode调试
05 常用开发调试技巧
1 线上即时修改
- 打开Sources面板下的Overrides
- 点击Select folders for Overrides 选择一个本地的空文件夹目录
- 允许授权
- 在page中修改代码, 修改后command + s保存
2 利用代理解决开发阶段的跨域问题
思考题: 为什么用代理能解决跨域问题
