如何调试Angular 2 Typescript应用程序

Question

如何使用可视代码或开发人员工具调试Angular 2 Typescript应用程序？

Answer 1

迟到了,但希望以下帮助别人.该解决方案适用于visual studio代码上的angular2和angular4 = Angular.

1. 安装新扩展程序 - 适用于Chrome的调试程序

2. 将在您的项目下创建一个新文件夹(自动) - '.vscode' - >'launch.json'.

3. 编辑'launch.json'以反映如下.注意,如果您的端口不同,端口4200默认为"ng服务"调整.

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true
        }
    ]
   }

4. 最后我们进入"播放" - 点击"调试",然后点击"播放"按钮(见下文).从那里开始调试chrome窗口,查看控制台以查看console.log输出.

快乐的编码!:-)

Answer 2

这个级别重要的是源映射。它们允许您将 TypeScript 源代码链接到转译后的 JavaScript 代码。

您的文件中有一个sourceMap选项tsconfig.json必须设置为true：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true, // <-----
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

然后，您将能够在 DevTools 的“源”选项卡中查看 TypeScript 文件，并在其中添加断点。

您可能还会对这篇文章感兴趣：

https://medium.com/@ttemplier/how-to-debug-the-typescript-source-code-of-angular2-99a593e2983f#.sltohvpio