如何在 Angular 2 中调试问题 javascript 文件？答案

【问题标题】：how to debug issue javascript file in angular 2?如何在 Angular 2 中调试问题 javascript 文件？
【发布时间】：2016-05-23 12:03:54
【问题描述】：

我下载了这个示例https://github.com/angular/angular2-seed。我正在使用 webstrom 编辑器，然后使用 npm install 然后我使用 npm start..应用程序运行良好，但我没有能够调试应用程序..我将如何调试应用程序？有什么方法可以调试应用程序

我遵循所有步骤

Clone or fork this repository
Make sure you have node.js installed
run npm install to install dependencies
run npm start to fire up dev server
open browser to http://localhost:8080

【问题讨论】：

你想在哪里调试？哪个IDE？在浏览器中打开 devtools 并设置一个断点。在 WebStorm 中，您可以在运行应用程序之前或期间设置断点。请提供有关您要完成的工作的更多信息。
实际上它缩小了所有文件
您可能需要禁用缩小。可能需要在浏览器的devtools设置中开启source maps（本人不使用TS，不了解详情）
我需要在 chrome 上调试..
是的，但我无法找到我评论代码的地方

标签： angular angular2-routing

【解决方案1】：

此 angular2 种子应用程序中的 webpack 配置未配置为使用源映射。看看这里：How do I generate sourcemaps when using babel and webpack? 一些提示

简而言之：在您的 tsconf.json 中：

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true //Set to true to get source maps from .ts, not .js
  },
  "files": [
    ...
  ]
}

在你的 webpack.config 中：

module.exports = {
  devtool: 'source-map', // to generate sourcemaps

【讨论】：

如果你重启 webpack 服务器，你会得到 sourcemaps。 - 但我看到这个解决方案为您提供了已编译 .ts 文件的源映射，而不是实际源。
其实请下载代码然后你发现它不起作用
我发现github.com/AngularClass/angular2-webpack-starter 项目非常有用。它还包含用于测试的设置，所以如果你只是在玩，它可能对你来说有点过头了。
是的......那么调试代码的最佳方法是什么......因为如果有错误......比我发现的方式
我做到了。我得到了源图，在 chrome 中它们位于开发工具源目录中的“webpack://”下。