这是我参与「第四届青训营 」笔记创作活动的的第9天
01.Bug与Debug
01-1.Bug的产生
01-2.前端Debug的特点
1）多平台：浏览器、nodejs、桌面应用等 2）多环境：本地开发环境、线上环境 3）多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole... 4）多技巧：Console、BreakPoint、SourceMap、代理等
02.chorme DevTools
02-1.动态修改元素和样式
02-2.Console
02-3.Sources
02-3-1 Break Point与Watch
02-3-2 Scope与Call Stack
02-3-3.压缩后的代码如何调记？
前端代码天生具有“开源”属性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？
02-3-3.Source Map
02-4.Network
02-5.Application
02-6.Performance
02-6-1.Performance运用示例
02-7.Lighthouse
03.移动端H5调试
03-1.真机调试
iOS
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器(设置 -> Safari -> 高级 -> 开启 Web 检查器)
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面)
- 在弹出的 Safari Developer Tools 中调试 没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器
Android
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入:chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面 直接使用手机扫码查看，体验更佳
03-2.VConsole
03-3.使用代理工具调试
原理
- 电脑作为代理服务器
- 手机通过HITP代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例
- 安装 Charles
- 查看电脑 IP 和 端口
- 将 IP、端口号填入手机 HTTP 代理
- Charles 允许授权（默认情况下，Charles 无法抓取https的请求，需要安装证书）
- 使用 SwitchHosts！软件给 Mac 电脑配 Hosts
- 手机访问开发环境页面 默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。
