Question

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

Answer 1

晚会，但希望以下帮助别人。该解决方案适用于angular2＆amp; angular4 =视觉工作室代码上的角度。

安装新扩展程序 - 适用于Chrome的调试程序
将在您的项目下创建一个新文件夹（自动） - '。vscode' - ＆gt; 'launch.json'。
编辑'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
        }
    ]
   }

最后我们进入'play' - 点击'debug'，然后点击'play'按钮（见下文）。从那里开始调试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的Sources选项卡中看到TypeScript文件，并在其中添加断点。

本文也可能对您感兴趣：

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

Answer 3

您可以通过在浏览器中设置断点来直接调试打字稿文件。

如何调试Angular 2 Typescript应用程序

3 个答案: