第11章：测试与调试

Source Maps 的配置与使用

什么是 Source Maps？

Source Maps 是一种将编译后的代码（如 TypeScript 生成的 JavaScript）映射回原始源代码的技术。它使得开发者可以在调试时直接查看和操作原始的 TypeScript 代码，而不是编译后的 JavaScript 代码，从而显著提升调试效率。

为什么需要 Source Maps？

  • 调试友好性：直接在浏览器或 IDE 中调试 TypeScript 源码，而非转换后的 JavaScript。
  • 错误追踪：堆栈跟踪会指向 TypeScript 文件的行号，便于快速定位问题。
  • 开发体验：与原生 JavaScript 开发体验一致，无需手动对照编译后的代码。

如何生成 Source Maps？

在 TypeScript 中，通过 tsconfig.json 配置生成 Source Maps：

{
  "compilerOptions": {
    "sourceMap": true,       // 启用 Source Map 生成
    "inlineSources": true,   // 可选：将源码内联到 Source Map 中
    "outDir": "./dist"       // 指定输出目录
  }
}

编译后会生成 .js 文件对应的 .js.map 文件（如 app.js.map）。

在浏览器中使用 Source Maps

  1. 确保浏览器支持：现代浏览器（Chrome、Firefox、Edge）默认支持 Source Maps。
  2. 验证加载：
    • 打开开发者工具（F12），在 Sources 面板中应能看到原始的 .ts 文件。
    • 若未显示，检查浏览器是否启用了 Source Maps 功能（Chrome 中默认启用）。

在 Node.js 中使用 Source Maps

通过 source-map-support 库实现：

  1. 安装依赖：
    npm install source-map-support
  2. 在入口文件（如 index.ts）中引入：
    import 'source-map-support/register';
  3. 运行程序时确保加载 .js.map 文件（与编译后的 .js 同目录）。

常见问题与解决

  1. Source Maps 未生效：
    • 检查 tsconfig.json 中 sourceMap 是否为 true。
    • 确保编译后的 .js.map 文件与 .js 文件在同一目录。
  2. 性能影响：
    • Source Maps 会增大构建输出体积，建议仅在开发环境启用。
    • 生产环境可通过构建工具（如 Webpack）配置动态加载。

高级配置

  • Webpack 集成：在 webpack.config.js 中通过 devtool 选项选择 Source Maps 生成策略（如 eval-source-map 或 hidden-source-map）。
  • Vite/Rollup：默认支持 Source Maps，无需额外配置。

总结

Source Maps 是 TypeScript 开发中不可或缺的工具，通过合理配置可以大幅提升调试体验。务必在开发环境中启用，并根据项目需求选择适合的生成策略。

Last Updated::