本节课将围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，你应该掌握哪些开发调试知识。为了方便大家更好地知悉不同场景下 debug 方法，将分为 PC 端与移动端展开解读。
PC端调试
BUG与DEBUG
Bug的产生
前端Debug的特点：多平台、多环境、多工具、多技巧；
代码的调试:
浏览器代码调试：检查—调试代码；
动态修改元素的样式：实时显示修改效果；
Console：日志打印样式，对日志进行分类查看，不同样式打印出的结果颜色不同，对应不同类型；
拥有很多实用技巧；
Sorce Tab：
小demo：计算器
实时展示代码，分区域预览
区域1：页面资源文件目录树；
区域2：代码预览区域；
区域3：Debug工具栏
区域4：断点调试器；
Scope与Call Stack：
展开Scope可以查看作用于列表（包含闭包）；
展开Call Stack可以查看当前JS代码的调试栈；
压缩后的代码如何调试：
前端代码天生具有“开源”属性，出于安全考虑，上线前JS代码通常会被压缩，压缩后的代码只有一行，变量使用“a,b”等替换，整体变得不可阅读。
Sorce Map：
Mapping字段存储了源文件和Sorce Map的映射；
英文：表示源码级压缩代码的位置关联；
逗号：分隔一行代码中的内容；
分号：代表换行；
Performance：
区域1：控制面板；
区域2：概览面板；
区域3：线程面板；
区域4：统计面板；
页面卡顿—查看FPS指标—寻找性能瓶颈—优化代码
Linghthuose：
性能分析：性能评分
核心Web指标：LCP,FID,CLS;
移动端H5调试
真机调试
IOS:使用数据线将移动手机与电脑连接进行调试；或使用扫码进行调试；
VConsole调试：
日志，网络等
使用代理工具进行调试
常用代理工具：Charles（花瓶标志），Progress，wuchangming/spy-debugger，Whistle
NodeJS调试：
结合浏览器和JS程序进行调试；
1执行命令；
2浏览器访问；
3点击绿色NODE图标打开调试面板；
4在node中使用调试面板中的断点调试；
浏览器+VS Code进行调试：
开始运行VS Code；
添加配置；
启动调试；
添加断点；
查看变量、堆栈；
常用开发调试技巧
1线上及时修改Overrides；
现在开发多使用热更新；
2利用代理解决开发阶段的跨域问题；
3启用本地source map；
4小黄鸭调试大法；
