Cordova-Android项目中DevTools无法正确显示源码映射的解决方案

问题背景

在Cordova-Android项目开发过程中，许多开发者会遇到一个常见问题：当使用TypeScript编译的JavaScript代码时，浏览器开发者工具(DevTools)无法正确显示源码映射(source map)。这个问题特别在使用Cordova 10.0版本时更为明显，开发者工具会显示"DevTools cannot display authored sources"的错误提示。

问题本质

这个问题的根源在于Android WebViewAssetLoader的工作机制。WebViewAssetLoader是Android SDK的一部分，它会在WebView的网络栈中拦截指向特定域(通常是https://localhost)的本地连接。然而，开发者工具中打开的连接是一个独立的WebView，并不在设备本身运行，而是在开发者工作站的Chrome浏览器中运行。

当DevTools尝试加载源码映射文件时，它实际上是在向开发者本地的https://localhost发起请求，而不是通过WebView的网络栈。如果本地没有运行监听443端口的Web服务器，连接就会被拒绝，从而产生ERR_CONNECTION_REFUSED错误。

解决方案

1. 内联源码映射

最直接的解决方案是将源码映射内联到JavaScript文件中。对于TypeScript项目，可以在tsconfig.json中配置：

{
  "compilerOptions": {
    "inlineSourceMap": true
  }
}

这种方法简单有效，但有一个局限性：它只对项目自身的代码有效，对于第三方依赖库的源码映射不起作用。

2. 使用Webpack的source-map-loader

对于使用Webpack构建的项目，可以通过source-map-loader插件来解决这个问题。这个插件可以将依赖库的源码映射提升到主应用程序的打包文件中。配置示例如下：

{
  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-library')
        ]
      }
    ]
  }
}

这种方法的优势是可以同时处理项目代码和指定依赖库的源码映射问题，特别适合大型项目。

3. 本地Web服务器方案(高级)

对于有经验的开发者，可以尝试在本地设置一个带有自签名可信证书的Web服务器来提供映射文件。这种方法理论上可以让DevTools正确加载源码映射文件，但实现起来较为复杂，需要开发者具备服务器配置和证书管理的知识。

注意事项

1. 即使不使用WebViewAssetLoader，而采用基于文件系统的策略，这个问题仍然会以不同形式出现。

2. 对于团队开发环境，如果使用其他机器构建的包，源码映射可能会指向不存在的本地路径。

3. 这个问题不仅限于TypeScript项目，任何使用外部源码映射文件的JavaScript项目都可能遇到。

总结

Cordova-Android项目中DevTools无法正确显示源码映射的问题，本质上是由于开发者工具和WebView网络栈的分离造成的。虽然这个问题无法通过Cordova本身解决，但通过内联源码映射或使用构建工具插件等方案，开发者可以有效地绕过这个限制，获得良好的调试体验。

对于不同类型的项目，开发者应根据实际情况选择最适合的解决方案。简单项目可以直接使用内联源码映射，复杂项目则推荐使用Webpack的source-map-loader等更全面的解决方案。