这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
移动端 H5 调试
真机调试
使用数据线将手机和电脑相连，在手机上访问页面，在电脑上看效果
更方便方法：通过二维码扫码
VConsole
在页面中注入VConsole这一组件
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例：
- 安装 Charles
- 查看电脑 IP 和 端口
- 将 IP、端口号填入手机 HTTP 代理
- Charles 允许授权
- 使用 SwitchHosts！软件给 Mac 电脑配 Hosts
- 手机访问开发环境页面
NodejS 调试
Inspector Protocol + Chrome Devtool
- 执行命令 node --inspect =8888 index.js
- chrome 浏览器访问服务
- 点击绿色 node 图标打开 node 调试面板（在chrome://inspect/#devices 中配置network target）
- 在 node 调试面板中使用断点调试
常用开发调试技巧
线上即使修改 Overrides
- 打开 Sources 面板下的 Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录
- 允许授权
- 在 page 中修改代码，修改完成后 command + s 保存
- 打开 devTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了
线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 Source Map 文件
北风卷地白草折，胡天八月即飞雪
