设计一款模拟手机环境的H5应用调试工具

　　对移动前端工程师来说，用手机去调试H5应用既费时又费力，多数情况下还需要求助于端开发的同事，直到今天，我相信很多前端团队还挣扎其中。那今天我们就一起来谈一下如何设计一款模拟手机环境的H5应用调试工具。
　　在进入正题之前，我们先谈一下目前H5应用调试的几种方案。
　　Chrome|Safari调试
　　通过把手机连接到电脑，用Chrome或Safari去调试有问题的页面是最常用的调试方案。这种方案优势很明显，它可以调试不同机型的兼容问题，也可以监控所有网络的请求状况，通常情况下来说，这是我们最优的选择方案。但是，这种方案劣势也很突出，Android手机的调试需要连接到Google服务器，在国内目前复杂的网络环境下比较耗费成本。
　　Console调试库
　　Console调试库也是目前比较流行的一种调试方案，它是把Console调试库引入到H5项目中，在应用打开时右下角会显示一个调试的入口按钮，点击入口可以打开一个类似Chrome开发者工具的迷你调试面板，我们通过console输出的所有日志都可以在这里看到。这种方案相比较第一种方案来说更为简洁方便，但缺点是调试板太小，非常不利于分析问题，而且每次调试都需要手动开启调试入口。
　　以上我们讲了两种主流调试方案的优劣，结合真实的业务场景，综合分析之后，我们发现在80%的场景下，我们调试的目标都是跟踪接口的返回情况，配合后端工程师快速定位问题，只有20%的场景我们是需要解决不同机型的兼容性问题，所以我们设计的目标是优先解决80%的业务场景。
　　有人可能会问直接用Chrome调试H5页面不行么？答案是当然可以，但是我们很多互联网公司的H5应用都是跑在自己的APP浏览器内核里面，它需要跟APP进行大量的交互，单纯的用Chrome是无法模拟出APP运行的接口环境。
　　所以我们需要设计一款可以模拟APP交互环境的PC端H5应用调试工具。
　　为了模拟手机的交互环境，我们用Electron设计开发了一款可以在H5应用运行前可以提前载入运行环境的调试工具。这款工具我们采用APP扫码登录的方式，目的是为了获取用户登录的环境信息，为后续交互环境的生成做准备。
　　其次我们把手机APP所能交互的API在Electron开发的调试工具中进行模拟实现，数据可以采用服务端获取的方式注入。在H5应用调用APP交互的接口时，这些模拟的接口就会起作用，让H5应用感觉自己是运行在APP中。
　　最后我们需要做的是用WebView模拟手机浏览器，用Electron Devtools来实现WebView模拟器的调试功能，这样，一款支持PC端调试的H5辅助工具就完成了。
　　下图是最终效果图：