前端必须知道的调试工具
Bug和Debug
Bug的起源：
当时人们还在使用第一代真空计算机（马克二型），这种计算机是依靠控制电流来改变开关，从而实现控制，但是它会发出大量的热和光。
1949年9月9日，天气非常炎热，有一只娥死在了70号继电器里面，造成电路不通，机器死机，经过近一天的检查，Grace Hopper（格蕾斯哈珀）终于找到了真凶，原来正是被光吸引过来的娥造成了机器宕机，在这儿之后，在计算机科学中，Bug就从虫子变成了程序的缺陷，一只虫子就这样被载入了计算机史册。
前端Debug的特点：
- 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用
- 多环境：本地开发环境、线上开发环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、SourceMap、代理
Chrome DevTools
Elements 元素
- 动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到style面板中的css规则
可以用以下2种方式强制激活伪类：
- 选中具有伪类的元素：点击：hov
- DOM树右键菜单：选择Force State
Console 日志
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table (具象化的展示JSON和数组数据)
占位符：
给日志添加样式，可以突出重要的信息
%s：字符串占位符、%o：对象占位符、%c：样式占位符、%d：数字占位符
（巧用console来Debug）
Score Tab
- 区域1：页面资源文件目录树
- 区域2：代码预览区域
- 区域3：Debug工具栏（从左到右：暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处截断）
- 区域4：断点调试器
Break Point & Watch
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下鼠标hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值
Scope & CallStack
展开 Scope 可以查看作用域列表(包含闭包),闭包可以参考
https://developer.mozilla.org/en-US/docseb/JavaScript/Closures
展开Call Stack 可以查看当前javaScript代码的调用栈,关于调用栈可以参考
https://developer.mozilla.org/en-US/docs/Glossary/Call_stack
压缩后的代码如何调试？
前端代码天生具有“开源”属性，出于安全考虑，Js代码通常会被压缩，压缩后的代码只有一行，变量使用字母替换，整体变得不可阅读，那么压缩后的代码如何调试呢？
解决： 压缩时先产生source map文件，以便后续查看
mappings 字段存储了源文件和 SourceMap 的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容。
- 分号，代表换行。之所以没有显示分号是因为压缩后的代码就只有一行
既然 Source Map 可以映射源码，那压缩后的代码不就又不安全了吗?
https://blog.csdn.net/m0_67392273/article/details/126496551
Performance
- 区域1: 控制面板
- 区域2: 概览面板
- FPS:每秒顿数
- CPU: 处理各个任务花费的时间
- NET:各个请求花费时间
- 区域3: 线程面板
- Frames: 顿线程
- Main:主线程，负责执行
- Javascript,解析HTML/CSS,完成绘制
- Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制
- 区域4: 统计面板
Network
- 区域1: 控制面板
- 区域2: 过滤面板
- 区域3: 概览区域
- 区域4: Request Table 面板
- 区域5:总结面板
- 区域6:请求详情面板
Application
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SOL
- Cookie
点击左侧 Application 下的Stroage 面板中的 Clear Site Data可以清楚网页的本地存储数据
常用工具
- Charles：适合查看、控制网络请求、分析数据
- Fiddler：与Charles类似，适合windows平台
- spy-debugger：远程调试手机页面、抓包
- Whistle：基于Node实现的跨平台Web调试代理工具
常用开发调试技巧
- 线上即时修改 Overrides
- 打开 sources 面板下的的Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在 page 中修改代码，修改完成后ctrl +s保存
- 打开 devTools ，点击右上角的三个小5.点->More tools ->Changes，就能看到所有修改了
- 利用代理解决开发阶段的跨域问题
- 启用本地source map
- 小黄鸭调试大法！