这是我参与「第四届青训营 」笔记创作活动的第6天
一 、Bug与Debug
1. 第一个bug
第一个bug的产生：bug原意本来为昆虫的意思，1947年9月9日，葛丽丝·霍普（Grace Hopper）发现了第一个电脑上的bug，之后人们开始用“bug”来称呼计算机中的隐错。
2.前端Debug的特点
- 多平台：浏览器、Hybrid、Nodejs、小程序…
- 多环境：本地来开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debuger…
- 多技巧：Console、BreakPoint、sourceMap、代理…
二、Chrome DevTools
2.1 动态修改元素和样式
1. 点击.cls开启动态修改元素的class
2. 输入字符串可以动态的给元素添加类名
3. 勾选/取消类名可以动态的查看类名生效效果
4. 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
5. Computed下点击样式里的箭头可以跳转到styles面板中的Css规则
可以用以下2种方式强制激活伪类：
- 选中具有伪类的元素：点击: hov
- DOM树右键菜单，选择Force State
2.2 Console
-
console.log、console.warn、console.error、console.debug、console.info
-
console.table具象化的展示JSON和数组数据
-
console.dir通过类似文件树的方式展示对象的属性
-
占位符：给日志添加样式，可以突出重要的信息：
- %s: 字符串占位符
- %o：对象占位符
- &c：样式占位符
- %d：数字占位符
2.3 Sorce Tab
2.3.1 Break Point与Watch
1. 使用关键字debugger或代码预览区域的行号可以设置断点
2. 执行到断点处时代码暂停执行
3. 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
4. 暂停状态下，鼠标hover变量可以查看变量的值
5. 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
2.3.2 Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）、
- 展开Call Stack可以查看当前JavaScript代码的调用栈
2.3.3 Source Map
Mapping字段储存了源文件和Source Map的映射
- 英文，表示源码以及压缩代码的位置关系
- 逗号，分隔一行代码中的内容
- 分号，代表换行
2.4 NetWork
2.5 Performance
三、移动端 H5 调试
通常所用的调试方法有：真机调试、VConsole调试以及使用代理工具调试
3.1 真机调试
使用数据线将PC端与手机连接在一起，之后通过手机进入调试页面并完成代码调试
3.2 使用代理工具调试
常用代理工具：
调试原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles为例：
1. 安装Charles
2. 查看电脑IP和端口
3. 将IP、端口号填入手机HTTP代理
4. Charles允许授权
5. 使用SwitchHosts!软件给Mac电脑配Hosts6.手机访问开发环境页面
注：默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书
四、Node·Js调试
4.1 Inspector Protocol + Chrome Devtool
- 执行命令：node --inspect=8888 index.js
- CHrome浏览器访问服务
- 点击绿色Node图标打开node调试面板
- 在Node调试面板中使用断点调试
4.2 Inspector Protocol + VS code
- VScode点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
五、常用开发调试技巧
5.1 线上即时修改 Overrides
1.打开Sources面板下的的Overrides
2.点击Select folders for Overrides。选择一个本地的空文件夹目录。
3.允许授权
4.在page中修改代码，修改完成后command + S保存
5.打开devTools点击右上角的三个小点-> More tools ->Changes,就能看到所有修改了
5.2 利用代理解决开发阶段的跨域问题
5.3 启用本地 Source Map
注：线上不存在Source Map时，可以使用Map Local网络映射功能来访问本地的Source Map文件
5.4 使用代理工具Mock数据
-
右键选中要mock数据的接口，选择save response,保存文件到本地。
-
本地打开保存的文件，编辑想mock的数据并保存。
-
右键选中第一步的接口，选择 Map Local, Local Path 选择第二步的文件。
六、个人总结
今天是我在青训营学习的第8天，今天主要学习了前端相关的开发调试知识，包括Bug的产生、Chrome Devtools的应用，移动端调试代码以及代理工具调试的方法。通过今天所学的调试方法，我掌握了动态修改元素、样式以及利用断点进行调试的方法。
