三、移动端H5调试
- 真机调
- iOS
- 使用Lightning数据线将iPhone与Mac相连
- iPhone 开启Web检查器（设置→Safari→高级→开启Web检查器）
- iPhone使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试（菜单栏→开发→iPhone设备名→选择调试页面）
- 在弹出的Safari Developer Tools中调试
- Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入：
- chrome:// inspect/#devices 并勾选Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
- 没有iPhone设备可以在Mac App Store安装Xcode使用其内置的iOS模拟器
- 直接使用手机扫码查看，体验更佳
- VConsole
- 日志（Logs): console.log|info|error
- 网络（Network):XMLHttpRequest，Fetch，sendBeacon
- 节点（Element)：HTML 节点树
- 存储（Storage): Cookies，LocalStorage，SessionStorage
- 手动执行JS命令行
- 自定义插件
- 使用代理工具调试
- 原理：
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
- 以 Charles 为例：
- 安装Charles
- 查看电脑IP和端口
- 将IP端口号填入手机HTTP代理
- Charles允许授权
- 使用 SwitchHosts！软件给 Mac电脑配Hosts
- 手机访问开发环境页面
- 默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。
- NodejS 调试
- Inspector Protocol+Chrome Devtool
- 执行命令node—inspect =8888 index.js
- chrome浏览器访问服务
- 点击绿色node图标打开 node 调试面板（在chrome:// inspect/#devices中配置 network target )
- 在node调试面板中使用断点调试
- Inspector Protocol+VS Code
- VS Code点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
四、常用开发调试技巧
- 线上即时修改 Overrides
- 打开Sources面板下的Overrides
- 点击 Select folders for
- Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在page中修改代码，修改完成后command+s保存
- 打开devTools，点击右上角的
- 三个小点→More tools→Changes，就能看到所有修改了
- 利用代理解决开发阶段的跨域问题
- 启用本地source map
- 线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件
- 使用代理工具 Mock 数据
- 右键选中要mock数据的接口，选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想mock的数据并保存。
- 右键选中第一步的接口，选择Map Local，Local Path选择第二步的文件。
- 小黄鸭调试大法
