Ourai.WS共享

如何在基于 Web 的应用中进行调试

虽然之前写过一篇《如何调试一个页面》，但里面有的内容已经过时，且不够全面；本篇笔记要弥补它的缺点，尽量覆盖更多场景，且与时俱进。

HTTP 请求

对 HTTP 请求的调试发生在串起用户操作与后端逻辑的流程中，根据前后端开发的完成状态，可分为以下几种情况——

前端比后端先完成

理想状况下，也就是在需求、交互与界面、HTTP API 定义等前置条件都已确定并几乎没有什么变更时，一般来说某个业务模块的前端部分会比后端开发得快一些，尤其是在 Handie 之类配置化/低代码开发框架的加持下。

这时，前端在开发完成并按照 HTTP API 定义对接好请求之后，可以先发到测试环境；待后端开发人员写完相应代码实现时，可经由 Proxy SwitchyOmega 这类浏览器插件将测试环境的 HTTP API 请求代理到本地服务，通过实际的界面操作来测试并调试后端代码实现得是否正确。

后端比前端先完成

TBD

两端本地主机互连

当不在一个局域网内时，后端开发人员需用 cpolar、ngrok 等配置内网穿透后将工具提供的域名发给前端开发人员，前端连这个域名进行联调。

混合应用

混合应用依赖于原生应用的机制，因而调试起来有些不便，需要借助于网络代理工具。

具体的调试方式上，有以下两种——

本地调试

一些必要的在原生应用中设置的环境变量需要对在原生应用中发起的 HTTP 请求进行抓包才能获取。

拿到所需环境变量后，在本地 Web 应用中写死进代码中进行调试。

真机调试

将线上文件映射到本地文件上。