这是我参与「第四届青训营 」笔记创作活动的的第8天。
前端Debug的特点
- 多平台
浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境
本地开发环境、线上环境
- 多工具
Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧
Console、BreakPoint、sourceMap、代理等
Chrome DevTools
1. Elements页面
-
动态修改元素和样式
点击.cls开启动态修改元素的class 输入字符串可以动态的给元素添加类名 勾选/取消类名可以动态的查看类名生成效果 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览 Computed下点击样式里的箭头可以跳转到styles面板中的css规则。
2. Console页面
-
console.log：普通打印
-
console.warn：警告打印
-
console.error：错误打印
-
console.debug、console.info：效果和普通打印一样
-
占位符：给日志添加样式，可以突出重要信息
%s：字符串占位符%o：对象占位符%c：样式占位符%d：数字占位符
-
console.table：具象化的展示JSON和数组数据 -
console.dir：通过文件树的方式展示对象的属性
3. Sources页面
-
Score Tab
-
进入断点调试界面
-
使用关键字debugger或代码预览区域的行号可以设置断点
-
执行到断点处使代码暂停执行
-
展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
-
暂停状态下，鼠标hover变量可以查看变量的值
-
在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
-
-
Scope与Call Stack
-
展开Scope可以查看作用域列表（包含闭包）
-
展开Call Stack可以查看当前javascript代码的调用域
-
-
前端代码天生具有“开源”属性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'等替换，整体变得不可阅读。压缩后的代码想要调试，需要用Source Map方法
-
mappings字段存储了源文件和Source Map的映射
-
英文，表示源码及压缩代码的位置关联 逗号，分隔一行代码中的内容 分号，代表换行
-
4. NetWork页面
5. Application页面
-
Application面板展示与本地存储相关的信息
-
LocalStorage、SessionStorage、IndexedDB、WebSQL、Cookie
