做混合应用开发的都知道，页面跑在 WebView 里，既不像纯网页那样能直接用浏览器开发者工具看，也不像原生那样有完整的日志输出，调试起来总让人头疼。但其实只要掌握几种常用方法，问题就能迎刃而解。
用 Chrome 远程调试 Android 应用
如果你的应用是基于 Android 的 WebView，Chrome 提供了非常方便的远程调试功能。只要设备通过 USB 连上电脑，在 Chrome 地址栏输入 chrome://inspect，就能看到所有可调试的 WebView 实例。
点击对应页面的 "inspect"，就会打开和浏览器一模一样的开发者工具，可以查看 DOM、调试 JS、分析网络请求，几乎和调试普通网页没区别。
前提是 Android 应用里的 WebView 必须开启调试模式，代码中加上这句：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}iOS 上用 Safari 调试
苹果用户也不用担心。iOS 的 WebView 内容可以通过 Safari 来调试。先在 iPhone 的设置里打开 "Safari - 高级 - Web 检查器"，然后在 Mac 上打开 Safari 的开发菜单。
连接设备后，Safari 的菜单栏会出现设备名称和正在运行的页面，点击就能进入调试界面。DOM 结构、控制台日志、JavaScript 执行情况都能实时查看。
在 JS 中加 log 别偷懒
别觉得 console.log 是土办法，它在混合应用里依然管用。尤其是在某些 WebView 不支持远程调试的场景下，打印关键变量和流程状态，是最直接的排错方式。
比如某个按钮点了没反应，可以在绑定事件的地方打个 log：
document.getElementById('submit-btn').addEventListener('click', function() {
console.log('按钮被点击了');
// 其他逻辑...
});然后通过 Chrome 或 Safari 的控制台看输出，确认是不是事件根本没注册上，还是后续逻辑出错了。
利用本地服务器模拟接口
混合应用常依赖后端接口，网络环境不稳定时容易误判问题。可以用本地起一个 mock 服务，比如用 Node.js 写个简单的 Express 接口，把真实请求指向本地地址。
这样不仅能排除网络问题，还能模拟各种异常返回，测试应用的容错能力。
真机测试别跳过
模拟器看着方便，但很多问题只在真机出现。比如 WebView 版本差异、系统字体渲染、权限弹窗遮挡页面等。尤其是老机型，WebView 内核版本低，某些 ES6 语法不支持，JS 直接报错卡住，这些在模拟器上可能根本发现不了。
上线前一定要拿几台不同品牌、系统的手机实测一遍，特别是用户量大的主流机型。
集成调试工具库
有些团队会在开发版里集成 vConsole 这类轻量调试面板。它会在页面上加一个小按钮，点开就能看到 console 输出、网络请求、本地存储内容。
对没有电脑在身边的场景特别有用，比如产品同事在会议室演示时突然出问题，掏出手机点开 vConsole 就能看到错误信息，当场定位。
<script src="https://cdn.jsdelivr.net/npm/vconsole@3.14.0/dist/vconsole.min.js"></script>
<script>
var vConsole = new window.VConsole();
console.log('Hello world');
</script>发布正式版时记得移除，避免信息泄露。