25.Hybrid+安卓项目调试方法

本文总结了在 Hybrid 项目中进行调试的常见方式，覆盖前端 H5 调试、Android 原生调试、JSBridge 通信调试等场景，适用于项目开发期、联调期和线上问题排查。

一、H5 页面单独调试（不依赖原生容器）

适用于前端开发阶段，调试页面逻辑、交互和接口联调。

调试方法：
1. 使用浏览器 F12 开发者工具调试页面
2. 启动本地服务（如使用 Vite：npm run dev），通过 http://localhost:5173 打开页面
3. 查看控制台、DOM 结构、JS 报错、网络请求
4. 配合 Mock 工具（如 Mock Service Worker、Mockoon）模拟后端接口，便于前端独立开发

二、原生 Android 项目调试

适用于调试原生 Java / Kotlin 代码逻辑，包括网络请求、生命周期、异常处理等。

调试方法：
1. 使用 USB 真机或 Android 模拟器运行调试
2. 在关键代码处设置断点，使用 Android Studio 单步调试
3. 使用 Logcat 输出日志，便于查看数据流程与异常信息
4. 日志可写入本地文件或上传云端平台，如 Bugly、Firebase Crashlytics
5. 若后端接口尚未完成，可使用 Mockoon 等工具模拟 REST API，通过替换接口域名进行联调

这里接口调试可以使用postman等方式避免网关拦截

😺真机usb调试 获取日志文件的方式？
连接安卓studio成功后
此电脑-真机-内部共享存储空间-android-data-找到自己软件的名字-files-.log
log文件保存本地改成txt查看即可

三、Hybrid 模式调试（WebView + JSBridge）

适用于 WebView 加载 H5 页面，H5 与原生通过 JSBridge 进行交互的场景。

😺1.H5 侧 JSBridge 调试
1.使用 USB 真机连接设备，打开 Chrome 浏览器，访问：chrome://inspect/#devices
2. 找到对应 WebView 页面，点击 inspect，查看控制台日志、调用栈、网络请求等信息
3. 注意：原生发起的请求可能无法在此处查看
4. 前端可注入 mock 的 window.myAndroidProject 对象，模拟调用 JSBridge 功能（如图片上传、用户信息等），便于本地开发测试

😺2.Android 侧 JSBridge 调
1.在 WebView 相关类中设置断点（如 WebViewClient、WebChromeClient、addJavascriptInterface、evaluateJavascript）
2. 调试 JS 调用原生的流程，查看是否接收到消息、是否正确解析参数
3. 使用 Logcat 输出 JSBridge 通信数据，例如接收到的 JSON、处理结果、是否回调成功等

四、推荐辅助调试工具

1.	Chrome DevTools：远程调试 WebView 中的 H5 页面
2.	Android Studio：原生代码断点、查看 Logcat 日志
3.	Mockoon：模拟本地 REST API，适合开发环境接口联调
4.	Charles 或 Fiddler：抓包工具，可查看原生或 WebView 的网络请求
5.	VConsole（前端可选）：嵌入到 Web 页面，查看移动端 JS 日志、请求、存储信息

五、调试策略场景分类

1.	H5 页面开发

使用浏览器 + 本地 mock 服务进行调试，不依赖原生环境
2. 原生接口调试
 使用 Android Studio 运行、断点调试 + Logcat 日志查看，分析接口请求、回调及异常
3. JSBridge 前端调试
 使用 Chrome Inspect 连接真机，调试 JS 调用原生桥接逻辑，结合 mock bridge 实现脱离原生测试
4. JSBridge 原生调试
 使用断点与日志打印，调试原生端对 JS 调用的处理逻辑，分析通信流程和参数正确性