这是我参加【第四届青训营】笔记活动的第四天
一.bug与Debug
第一个BUG（虫子）
前端Debug的特点
- 多平台：浏览器 Hybird NodeJs 小程序 桌面应用等
- 多环境：本地开发环境 线上环境
- 多工具：Chrome devTools Charless
- 多技巧：Console BreakPoint sourceMap,代理等
二.chrome DevTools
- 动态修改元素和样式：
- Concole:
- Sorce Tab:
- break Point 和Watch
- scope和Call stack
- 压缩后的代码:代码天生具有“开源”属性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码通常只有一行，变量使用'a''b'等替换，整体变得不可阅读。
- Source Map
- NetWork:
- Application:
- Performance:
- LightHouse:
三.移动端H5调试
1. 真机调试
iOS
- 使用lightning数据线将iPhone与Mac相连
- iPhone开启web检查（设置-Safari-高级-开启web检查）
- iPhone使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试（菜单栏-开发-iPhone设备名-选择调试页面）
- 在弹出的Safari Develooper Tools中调试
Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入：Chrome：/inspect/#devices并勾选Discover USB devices选项
- 手机允许远程调试，并访问调试页面、
- 电脑点击inspect按钮
- 进调试界面
2. 代理调试
原理
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器 以Charles为例
- 安装Charles
- 查看电脑IP和端口
- 将IP，端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
3. 常用工具
- Charles:适合查看，控制网络请求分析数据
- Fiddler:与Charles类似，适合Windows平台
- spy-debugger:远程调试手机界面，抓包
- whistle基于node实现的平台web调试代理工具
四.常用开发调试技巧
- 线上及时修改overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地source map
- 使用代理工具mock数据
- 小黄鸭调试大法：传说中程序大师随身携带一只小黄鸭，在调试代码时候会在桌上放上这只小黄鸭，然后详细的向鸭子解释每行代码，然后很快就将问题定位修复了。
