TypeScript【Webpack 打包过】 编译过的代码怎么对源码调试？

变换都可以通过 sourcemap 恢复。

如果用的 Angular CLI，那么 ng serve 默认就提供完整的 sourcemap，直接点鼠标打断点就行：

对于Angular 开发的项目：可以用这个插件 https://augury.angular.io/





如果是自己配置的 Webpack 环境（Devtool），需要选择带 module 版本的 sourcemap 才会把 bundle 中的内容映射回源文件，例如 cheap-module-eval-source-map。

——————————————

Chrome

直接 Chrome 调试，Chrome 开发者工具中选择 Sources 标签，然后在左侧的树中选择 webpack:// 节点展开后进入源码目录设置断点即可







VS Code

直接在 vscode 中调试，前提条件是安装了 Debugger for Chrome，且在 .vscode 文件夹中创建了 launch.json，启动程序，然后直接 debug 走起





WebStorm/Idea

在 Run/Debug Configurations 中创建一个 Javascript Debug，指定好端口号即可进行 debug 了，当然别忘了先启动应用。