这是我参与「第五届青训营 」伴学笔记创作活动的第 12天
青训营课程笔记
Bug和Debug
Bug的产生：Bug一词的原意是昆虫或虫子;而在电脑系统或程序中隐藏着的一些未被发现的缺陷或问题,人们也叫它bug
Bug来源故事：Bug的创始人格蕾丝·赫柏是一位为美国海军工作的电脑专家，在一个炎热的夏天，由赫柏带领的小组构造的计算机“马克二型”突然死机，赫柏观察到出错的继电器有一只飞蛾躺在中间，并记录下第一只虫子的存在
Debug特点
- 多平台
- 多环境
- 多工具
- 多技巧
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/消除类名可以查看类名生效效果
Conslole
- console.log
- console.warm
- console.error
- console.debug
- console.info
- console.table:具象化展示JSON和数组数据
- console.dir：通过类似文件树的方式展示对象的属性
- 占位符:给日志添加样式，可以突出重要信息
- %s字符占位符、%o对象占位符、%c样式占位符、%d数字占位符
Break Poit与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点代码暂停执行
- 展开Breakpoits列表可以查看断点列表
- 暂停状态下鼠标hover变量可以查看变量的值
NetWork
区域：控制面板、过滤面板、概览区域、Requst Table面板、总结面板、请求详情面板
Application
Appliaction面板展示与本地存储相关的信息
- local Storage
- Seesion Storage
- IndexedDB
- Web SQL
- Cookie
Performance
区域：控制面板，概览面板、线程面板、统计面板
移动端调试
真机调试
分IOS和Android版：
一般是连接手机进行调试
使用代理工具
原理：使用电脑作为代理服务器、手机通过HTTP代理连接到电脑，手机的请求经过代理服务器
Node.js调试
Inspector Protocol+Chrome Devtool
- 执行命令 node --inspect===88 index.js
- chrome浏览器访问服务
- 点击绿色node图标打开node调试面板
- 在node调式面板中设置断点调试
Inspector Protocol+VS Code
VS Code点击运行，添加配置，启动调试，添加断点，查看变量、堆栈
常用的开发调试技巧
- 线上即使修改Overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地source map
- 使用代理工具Mock数据
- 小黄鸭调试大法
