Cordova Android项目中DevTools无法正确显示源码映射的问题解析

在Cordova Android 10.0版本开发过程中，开发者可能会遇到一个棘手的问题：当使用TypeScript编译的JavaScript代码时，浏览器控制台无法正确显示源码映射(source map)。本文将深入分析这一问题的成因，并提供可行的解决方案。

问题现象

开发者在使用WebViewAssetLoader类加载本地网页时，DevTools会显示以下错误信息：

DevTools cannot display authored sources, but can debug deployed code.
Load URL https://localhost/xxx.js.map: Connection error: net:ERR CONNECTION REFUSED

根本原因分析

这个问题源于Android SDK中的WebViewAssetLoader工作机制。WebViewAssetLoader会在WebView的网络栈中拦截特定域(默认为https://localhost)的本地连接请求。然而，DevTools窗口实际上是在开发者本地工作站上的Chrome浏览器中运行的独立进程，并不通过设备上的WebView网络栈。

当DevTools尝试加载源码映射文件时：

1. 对https://localhost的请求会被发送到开发者本地工作站
2. 如果本地没有运行监听443端口的web服务器，连接就会被拒绝
3. 即使使用HTTP协议而非HTTPS，同样的问题也会出现

解决方案

1. 内联源码映射

最有效的解决方案是将所有源码映射内联到打包文件中。对于使用webpack的项目，可以按照以下方式配置：

{
    devtool: 'inline-source-map',
    module: {
        rules: [
            { 
                test: /\.js$/, 
                enforce: 'pre',
                use: ["source-map-loader"],
                include: [
                    // 包含需要提取源码映射的路径
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'node_modules/some-package')
                ]
            }
        ]
    }
}

这种配置会：

• 将主应用的源码映射内联
• 通过source-map-loader提取依赖包的源码映射并合并

2. 本地服务器方案（高级）

对于有经验的开发者，可以尝试设置一个本地web服务器：

1. 创建自签名可信证书
2. 配置服务器监听443端口
3. 提供源码映射文件服务

这种方法理论上可以让DevTools正确加载映射文件，但实现较为复杂。

技术背景补充

源码映射是现代前端开发中的重要调试工具，它建立了编译后代码与原始源代码之间的对应关系。在移动混合开发中，由于以下特殊因素导致问题复杂化：

1. WebView与DevTools运行在不同的环境中
2. Android的安全机制限制了本地文件访问
3. HTTPS要求增加了调试复杂度

最佳实践建议

1. 开发环境使用内联源码映射
2. 生产环境移除源码映射以减小体积
3. 对于团队开发，确保所有成员的构建环境一致
4. 考虑使用专门的调试工具如eruda作为辅助

通过理解这些底层机制，开发者可以更有效地解决Cordova Android项目中的调试难题，提高开发效率。