HOW - Hybrid App 详解系列（二） - 开发调试

一、背景

开发阶段：不少前端页面需要嵌入到 App 中，这就需要开发者在开发阶段能够实时查看本地项目在 App 中的效果，以及在 H5 页面中通过 JSBridge 调用原生功能，换句话说，可能需要等 App 开发者帮发包后通过 App 打开 h5 才能看到 JSBridge 调用效果，很明显这样调试成本过高。

正式环境：此外，在正式环境中，当页面嵌入到正式版本的 App 中后，前端开发者很难直接定位页面发生的请求、JavaScript 错误以及样式问题，这给线上 App 的错误排查带来了挑战。

二、整体思路

为了解决前端开发中 App h5 问题难以排查的问题：

1. 全局代理工具

使用一些代理工具如 whistle 来抓包 app 中 h5 页的网络请求来排查问题。

2. 移动端调试工具

使用一些移动端调试工具模拟线上环境。例如，Chrome DevTools 的 Device Mode 可以模拟移动设备，或者使用 chrome://inspect/#devices 来 usb 连接真机调试，使你能够在开发环境中更好地检查和调试移动端页面。操作都比较简单可以自行尝试。

3. Console 工具

一些专门为移动端开发的线上调试工具可以帮助你远程调试 App。例如，eruda(Console for Mobile Browsers) 是一个轻量级的移动端调试工具，可以通过在页面中引入脚本进行使用。它支持控制台输出、查看网络请求、查看元素等功能。

4. 日志和性能监控系统

在 App 中引入前端日志和性能监控系统，记录关键的应用版本信息、用户操作、网络请求、错误信息以及页面加载时间指标、交互性能指标等。这些日志可以在后台上传到服务器，供开发团队分析。

5. Bug 反馈与崩溃报告

集成 Bug 反馈工具和崩溃报告工具。这样，当用户在 App 中遇到问题时，可以方便地向开发团队报告问题，同时收集到崩溃日志。一些第三方服务如 Bugsnag、Sentry 等提供了这样的功能。

本文主要详细介绍第一个场景：全局代理工具，使用如 whistle 代理工具抓包调试。

三、基于真机的开发调试

1. 安装和启动 whistle

阅读：https://wproxy.org/whistle/install.html

2. 安装证书（https场景必须）

当你在进行 HTTPS 通信时，通信的两端（客户端和服务器端）之间的数据是经过加密的，这种加密使得第三方无法轻易地窃听或篡改数据。当你使用类似 Whistle 这样的工具拦截 HTTPS 请求时，实际上你的浏览器会认为你正在与服务器进行通信，但实际上是与 Whistle 进行通信。为了使 Whistle 能够解密 HTTPS 请求和响应，它需要提供一个类似服务器的身份，并且需要一个证书。这个证书会被安装在你的系统中，作为一个“中间人”，用于在你和目标服务器之间进行通信的中转，同时解密和重新加密数据。这样 Whistle 就可以拦截并查看 HTTPS 请求和响应的内容了。更多关于 https 的内容，可以阅读 WHAT - https 详解

阅读：https://wproxy.org/whistle/webui/https.html 查看手机部分

以 iOS 为例：

• 手机设置代理后，Safari 地址栏输入 rootca.pro，按提示安装证书（或者通过 whistle 控制台界面的二维码扫码安装。注意，iOS安装根证书需要到连接远程服务器进行验证，需要暂时把Https拦截功能关掉）
• iOS 10.3 之后需要手动信任自定义根证书，设置路径：Settings > General > About > Certificate Trust Testings

因为 Whistle 生成的证书实际上是一个自签名证书，而不是由正规的 CA（证书颁发机构）颁发的。自签名证书通常会引发浏览器的安全警告。然而，当你手动设置信任后，你的系统就会信任这个证书，使得 Whistle 能够成功地拦截 HTTPS 请求并进行解密。

3. 配置代理

打开你的手机设置，在 Wi-Fi 设置中找到当前连接的 Wi-Fi 网络，并进入其详细设置。找到代理设置（Proxy），选择手动配置代理。输入你的计算机的 IP 地址和 whistle 的监听端口（默认为 8899）。保存设置并返回。

4. 真机访问 h5 页面和查看请求详情

在手机 App（如浏览器）上访问目标 h5 页面，在计算机浏览器打开的 whistle 控制台界面中，你可以看到所有被捕获的请求。若要查看请求的详细信息，可以点击或选中对应请求，并按下 Enter 键。这将显示请求的详细信息，包括请求头、请求体等。

注意，在一步，我们可以在 App 里访问生产环境域名 h5 url，也可以访问携带计算机 ip 的前端本地起的开发服务器端口号 url，分别进行拦截。

四、基于 iOS 模拟器的开发调试

iOS 模拟器是开发者在 Mac 系统上使用的工具，用于在电脑上模拟 iOS 设备的运行环境，方便开发和调试 iOS 应用程序。

以下是关于 iOS 模拟器的一些重要信息：

4.1 功能和用途

1. 应用程序开发：iOS 模拟器是 iOS 开发工具包（Xcode）的一部分，开发者可以使用它来在虚拟的 iOS 设备上测试和调试他们的应用程序。

2. 调试和测试：开发者可以使用模拟器来模拟不同型号和版本的 iOS 设备，以确保应用程序在各种设备上的兼容性和性能表现。

3. 性能分析：模拟器还提供了一些性能调试工具，开发者可以使用这些工具来分析应用程序的性能表现，并进行优化。

4. 屏幕截图和录制：开发者可以在模拟器中进行屏幕截图和录制操作，用于创建应用程序的演示视频或者用于文档和报告。

4.2 基本流程

1. 安装 Xcode：iOS 模拟器是 Xcode 开发工具包的一部分，因此首先需要安装最新版本的 Xcode。您可以从 Mac App Store 中下载和安装 Xcode。

2. 启动模拟器：安装完 Xcode 后，您可以在 Launchpad 或者 Applications 文件夹中找到 Xcode，然后打开 Xcode。在 Xcode 中，您可以选择一个模拟器设备，然后单击 “Run” 按钮来启动模拟器。

3. 选择设备和版本：在启动模拟器之前，您需要选择要模拟的设备类型和 iOS 版本。Xcode 提供了一系列的模拟器设备和 iOS 版本供选择。

4. 调试应用程序：启动模拟器后，您可以将您的应用程序（iOS App 安装包）安装到模拟器中，并进行调试和测试。然后您可以使用 Xcode 提供的调试工具来监视和调试应用程序的行为。

5. 模拟器设置：iOS 模拟器还提供了一些设置选项，您可以在模拟器中模拟不同的网络连接、位置信息等，以便测试应用程序在不同环境下的行为。

总的来说，iOS 模拟器是开发 iOS 应用程序时的重要工具，它提供了方便的环境来测试、调试和优化应用程序，有助于提高开发效率和应用程序质量。

4.3 具体实践

1. 准备工作

首先，需要安装模拟器。

方式一：Mac 电脑的 App Store 直接搜索 Xcode 并点击安装。

方式二：通过 XcodesApp 安装任意版本，可以理解为类似前端的 nvm 工具。官方下载链接。

如果能看到以下页面, 则说明安装成功了：

2. 打开模拟器

3. 切换不同型号

4. 安装 iOS App 到模拟器

一般可以找App开发者要一个测试版本的 zip 包，解压后，将 .app 格式的文件拖入到模拟器中。

5. 模拟器安装证书

将证书拖入模拟器中，然后在 Settings app -> General -> About -> Certificate Trust Settings 设置即可。

6. 模拟器配置代理

与真机一样，在模拟器打开设置，在 Wi-Fi 设置中找到当前连接的 Wi-Fi 网络，并进入其详细设置。找到代理设置（Proxy），选择手动配置代理。输入你的计算机的 IP 地址和 whistle 的监听端口（默认为 8899）。保存设置并返回。

7. 模拟器访问 h5 页面和查看请求详情

在 iOS 模拟器中启动应用，尝试访问 H5 页面。在计算机浏览器打开的 whistle 控制台界面中，你可以看到所有被捕获的请求。

五、安卓模拟器

• Windows: https://www.twle.cn/l/yufei/android/android-basic-sdk.html
• Mac: https://www.lifewire.com/how-to-install-android-sdk-4770060