前端必须知道的调试工具

Bug和Debug#

Bug的起源：

当时人们还在使用第一代真空计算机（马克二型），这种计算机是依靠控制电流来改变开关，从而实现控制，但是它会发出大量的热和光。

1949年9月9日，天气非常炎热，有一只娥死在了70号继电器里面，造成电路不通，机器死机，经过近一天的检查，Grace Hopper（格蕾斯哈珀）终于找到了真凶，原来正是被光吸引过来的娥造成了机器宕机，在这儿之后，在计算机科学中，Bug就从虫子变成了程序的缺陷，一只虫子就这样被载入了计算机史册。

前端Debug的特点：

1. 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用
2. 多环境：本地开发环境、线上开发环境
3. 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
4. 多技巧：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: 概览面板

1. FPS:每秒顿数
2. CPU: 处理各个任务花费的时间
3. NET:各个请求花费时间

• 区域3: 线程面板

1. Frames: 顿线程
2. Main:主线程，负责执行
3. Javascript,解析HTML/CSS,完成绘制
4. 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

1. 打开 sources 面板下的的Overrides
2. 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
3. 允许授权
4. 在 page 中修改代码，修改完成后ctrl +s保存
5. 打开 devTools ，点击右上角的三个小5.点->More tools ->Changes，就能看到所有修改了

• 利用代理解决开发阶段的跨域问题
• 启用本地source map
• 小黄鸭调试大法！