这是我参与「第五届青训营 」笔记创作活动的第10天
一、本堂课重点内容：
- Elements
- Console
- Source
- Performance
- Network
- 移动端真机调试
- 移动端代理调试
- 移动端调试常用工具
二、详细知识点介绍：
前端debug的特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理等
Chrome DevTools
1.Elements
- 动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)，可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下2种方式强制激活伪类：
- 选中具有伪类的元素，点击:hov
- DOM树右键菜单，选择Force State
2.Console
-
console.log
-
console.warn
-
console.error
-
console.debug
-
console.info
-
console.table
具象化的展示JSON和数组数据
- console.dir
通过类似文件数的方式展示对象的属性
- 占位符
给日志添加样式，可以突出重要的信息
%s:字符串占位符;%o:对象占位符;%c:样式占位符;%d:数字占位符
3.Source Tab
Scope与Call Stack
前端代码天生具有开“源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用 'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
4.NetWork
5.Application
6.Performance
7.Lighthouse
移动端调试
1.真机调试
2.VConsole
3.使用代理工具调试
4.常用代理工具
5.NodeJS调试
5-1 Inspector Protocol + Chrome Devtool
5-2 Inspector Protocol + VS Code
6.常用开发调试技巧
6-1 线上即时修改Overrides
5-2 利用代理解决开发阶段的跨域问题
由浏览器发出请求给代理服务器，代理服务器转发请求给真实服务器，再由真实服务器响应给代理服务器，代理服务器转发响应给浏览器。
5-3 启用本地source map
线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件。
5-4 使用代理工具Mock数据
- 右键选中要mock数据的接口，选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想mock的数据并保存。
- 右键选中第一步的接口，选择Map Local，Local Path选择第二步的文件。
5-5 小黄鸭调试大法
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。——《程序员修炼之道》
三、课后个人总结：
- 这堂课分别介绍了在PC端和移动端怎么进行开发调试，由详细的举例来说明怎么做好调试，借助各种工具来帮助自己在开发阶段快速找到代码的问题所在。
- 这堂课又一次拓展了我的知识边界，让我知道了web前端调试其实有很多可以找出问题的地方，也知道了怎样去更好的优化自己的代码。
