如何在Chrome中调试Angular 2源码TypeScript文件？

我来帮你搞定这个问题——要在Chrome里调试Angular 2的源码TS文件，核心是让Webpack正确识别并加载Angular包自带的SourceMap，同时允许调试node_modules中的Angular代码。具体步骤如下：

• 调整Webpack配置，允许处理Angular源码
  打开你的webpack.config.js文件，修改TypeScript文件的加载规则：

  • 原来的规则可能会排除所有node_modules目录，你需要修改exclude选项，让它不排除@angular相关的文件：

    module.exports = {
      // ...其他配置
      module: {
        rules: [
          {
            test: /\.ts$/,
            loader: 'ts-loader',
            // 修改exclude规则，保留@angular目录
            exclude: /node_modules(?!\/@angular)/,
            options: {
              transpileOnly: true
            }
          }
        ]
      },
      // 设置合适的SourceMap类型，开发环境推荐用source-map
      devtool: 'source-map'
    };
    

  这样Webpack就会处理node_modules/@angular下的TS文件，并生成对应的SourceMap。

• 确保tsconfig.json启用SourceMap
  检查你的tsconfig.json，确保compilerOptions里开启了SourceMap相关配置：

  {
    "compilerOptions": {
      "sourceMap": true,
      "inlineSources": true,
      // ...其他配置
    }
  }
  

  inlineSources会把原始TS源码嵌入到SourceMap中，让Chrome能直接看到完整的源码内容。

• 在Chrome中定位并调试Angular源码

  1. 启动Webpack开发服务（比如执行npm start）
  2. 打开Chrome访问你的Angular应用，按F12打开开发者工具
  3. 切换到Sources标签页，在左侧文件树中展开webpack:// -> . -> node_modules -> @angular，就能找到Angular的TS源码文件了
  4. 直接在这些文件里设置断点，当应用执行到对应代码时，就会触发调试，你可以查看变量、单步执行等

如果按上面的步骤操作后还是找不到Angular源码，可以试试清理浏览器缓存、重启Webpack服务，或者检查你的Angular 2版本是否带有完整的SourceMap（早期部分版本可能需要额外配置，但大部分正式版都自带）。

内容的提问来源于stack exchange，提问作者Sameer Sarmah