这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
前端开发调试之 PC 端调试
Bug 与 Debug
No Coding，No Bug
前端 Bug 特点：
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理等
Chrome DevTools
动态修改元素与样式
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态地给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
Console
console.log：打印一条日志
console.warn：打印警告，黄色
console.error：打印错误信息，红色
console.debug：打印调试信息
console.info：console.log 别名，输出信息
console.table：具象化的展示JSON和数组数据
console.dir：通过类似文件树的方式展示对象的属性
console.time()和console.timeEnd() ：分别放在js脚本的前面和后面，测量js脚本的消耗时间
- 可以传人一个参数，作为计时器的名称
占位符：给日志添加样式，可以突出重要的信息
- %s：字符串占位符
- %o：对象占位符
- %c：样式占位符
- %d：数字占位符
Source Tab
Break Point 与 Watch
Scope 与 Call Stack
- 展开 Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前 JavaScript 代码的函数调用栈
Network
Application
Application面板展示与本地存储相关的信息：
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
通过左侧 Application 下的 Storage 面板中的 Clear Site Data 可以清除网页的本地存储数据
Performance
Lighthouse
压缩后的代码如何调试
前端代码天生具有"开源"属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？
Source Map
mappings字段存储了源文件和Source Map的映射：
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行爱吗中的内容
- 分号，代表换行
