面试题：TypeScript 源码映射在复杂项目结构中的调试

Question

假设你正在开发一个具有多层模块嵌套和复杂构建流程的 TypeScript 项目，现有一个运行时错误需要通过源码映射调试定位问题。在构建配置（如使用 webpack 等工具）和调试工具（如 Chrome DevTools）方面，你会采取哪些步骤来确保准确调试到原始 TypeScript 代码？

Answer 1

1. Webpack 构建配置：
   • 启用 SourceMap：在 Webpack 配置文件（通常是 webpack.config.js）中，设置 devtool 选项。对于开发环境，推荐使用 'eval - source - map'，它能提供快速的构建速度同时保持较好的调试体验。例如：

module.exports = {
    //...其他配置
    devtool: 'eval - source - map'
};

• 确保 TypeScript 加载器配置正确：如果使用 ts - loader，要保证其配置正确且与 SourceMap 功能兼容。通常在 module.rules 中配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts - loader',
                exclude: /node_modules/
            }
        ]
    }
};

2. Chrome DevTools 调试：
   • 打开开发者工具：在 Chrome 浏览器中打开运行该项目的页面，然后按 F12 或者通过菜单 更多工具 -> 开发者工具 打开 Chrome DevTools。
   • 导航到 Sources 面板：在 DevTools 界面中，点击 Sources 标签。
   • 查找 TypeScript 源文件：在左侧文件导航栏中，定位到项目的 TypeScript 源文件。由于启用了 SourceMap，这里应该能看到原始的 TypeScript 文件结构，而不是编译后的 JavaScript 文件结构。
   • 设置断点：在 TypeScript 源文件中，点击要调试的代码行号旁边的空白区域，设置断点。当代码执行到该断点时，Chrome DevTools 会暂停执行，你可以查看变量值、调用栈等信息来定位运行时错误。