Bug与Debug
前端Debug的特点
- 多平台-浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境-本地开发环境，线上环境
- 多工具-Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……
- 多技巧-Console、BreakPoint、sourceMap、代理等
动态修改元素和样式
Console
Sorce Tab
Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
Scope与Call Stack
Source Map
Performance
移动端H5调试
真机调试
VConsole
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles为例：
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts！软件给Mac电脑匹配Hosts
- 手机访问开发环境页面
默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书
