Question

调试＆amp;使用Visual Studio代码运行Angular2 Typescript？

我正在尝试使用VS代码调试Angular2打字稿应用程序 https://angular.io/guide/quickstart

任何人都可以分享调试步骤吗？从VS代码运行？

Answer 1

经过大量研究后，我发现了这些步骤 -

在开始之前，请确保您拥有最新版本的VS代码。您可以验证最新版本 - 帮助＆gt;检查更新或关于。

安装名为＆＃39; Debugger for Chrome＆＃39;的扩展程序。安装完成后，重新启动VS代码。
转到调试窗口，使用Chrome打开launch.json。

在Launch.json配置部分中，使用以下配置

{
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/Welcome",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}

在tsconfig.json中，请确保您拥有＆＃34; sourceMap＆＃34;：true

这样就完成了调试环境设置。现在，在开始调试之前，请确保关闭所有现有的Chrome.exe实例。从任务管理器验证或使用DOS命令'killall chrome'

使用npm start命令和Chrome作为默认浏览器运行项目。
成功运行应用程序后，您将收到端口号。从Chrome浏览器复制URL并粘贴到上面的url部分。（注意：如果你在你的应用程序中使用路由，那么url会喜欢上面，否则它将结束index.html等）
现在，您可以在打字稿文件中的任何位置放置断点。
再次，转到VS代码中的调试窗口，然后点击Run。连接到调试器的选项卡/实例将如下所示。

Answer 2

指定userDataDir - 这样可以避免与您可能已经运行的其他Chrome实例发生冲突。我之所以注意到这一点，Chrome就会停止侦听您指定的任何端口。以下是我使用的内容，非常棒！

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

感谢@reecebradley - GitHub: Cannot connect to the target: connect ECONNREFUSED

Answer 3

我遇到了类似的问题，但我的项目还包括导致上述解决方案失败的webpack。在遍历Internet之后，我在github上的一个线程中找到了一个解决方案：

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

无论如何，这就是所做的。

注意： - 在开始之前，您必须检查您是否拥有最新版本的visual studio代码，并且还在VS代码中安装了名为“Debugger for Chrome”的扩展程序。

首先，在'./config/webpack.dev.js'

中

use =＆gt; devtool：'source-map'
而不是=＆gt; devtool：'cheap-module-source-map'

然后安装并使用write-file-webpack-plugin：

npm install --save write-file-webpack-plugin

通过添加以下内容将插件添加到'./config/webpack.dev.js'：

const WriteFilePlugin = require（'write-file-webpack-plugin'）;

位于顶部的Webpack插件下。继续添加：

新的WriteFilePlugin（）

到新的DefinePlugin（）之后的插件列表，即

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

这可确保将源地图写入磁盘

最后，我的launch.json如下所示。

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

注意webroot中没有'/ dist /'。使用此配置，源映射在./dist/中，但它们指向./src/。 vscode将绝对根添加到工作空间，并正确解析文件。

Answer 4

以下是有关如何在VSCode中调试Angular的官方Visual Studio代码文档https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

要调试客户端Angular代码，我们需要安装Debugger for Chrome扩展。   打开“扩展”视图（Ctrl + Shift + X），然后在搜索框中键入“chrome”。您会看到几个引用Chrome的扩展程序。   按下Debugger for Chrome的Install按钮。该按钮将更改为“安装”，然后在完成安装后，它将更改为“重新加载”。按Reload重新启动VS Code并激活扩展名。

我们需要初始配置调试器。为此，请转到“调试”视图（Ctrl + Shift + D）并单击齿轮按钮以创建launch.json调试器配置文件。从“选择环境”下拉列表中选择Chrome。这将在项目的新.vscode文件夹中创建一个launch.json文件，其中包括启动网站或附加到正在运行的实例的配置。   我们需要对我们的示例进行一次更改：将端口从8080更改为4200.

Answer 5

我遇到了这方面的问题，而@Sankets的回答帮助了解决这个问题https://github.com/angular/angular-cli/issues/2453。

具体将以下内容添加到launch.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}

Answer 6

对于角种子：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}

Answer 7

launch.json的这些mod在MacOS上为我工作，这使我能够获得调试器＆amp;每个调试会话在新的Chrome实例中使用的断点...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }

Answer 8

这是经过试验和测试的 -

步骤1：安装chrome调试器：只需在VS Code中打开命令调色板（Ctrl + Shift + P），然后键入Extensions：Install Extension命令。当显示扩展名列表时，请键入“chrome”以过滤列表并安装Debugger for Chrome扩展程序。然后，您将创建一个启动配置文件。

[More Details of Step 1]

步骤2：创建和更新launch.json文件：两个示例launch.json配置“请求”：“启动”。您必须指定文件或网址才能针对本地文件或网址启动Chrome。如果使用URL，请将webRoot设置为提供文件的目录。这可以是绝对路径，也可以是使用$ {workspaceRoot}（在Code中打开的文件夹）的路径。 webRoot用于将URL（如“http://localhost/app.js”）解析为磁盘上的文件（如“/Users/me/project/app.js”），因此请注意正确设置。更新launch.json文件的内容，如下所示 -

tsconfig.json

[More Details of Step 2]

Answer 9

我需要使用CORS，因此我在禁用网络安全性的情况下打开Chrome。然后我通过将调试器附加到chrome来调试Angular应用程序。

使用已禁用的网络安全功能启动Chrome的CMD行：

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

用于附加调试器的

launch.json文件：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}

Answer 10

@Sanket的答案是正确的，但我对此有些疑问。首先Launch.json在项目的“ .vscode”目录中。第二个：端口号应与用于启动应用程序的默认服务器端口相同。我使用cmd中的 ng serve 启动我的项目，默认端口号为 4200 ，所以我如下更改了launch.json文件

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:4200", "sourceMaps": true, "webRoot": "${workspaceFolder}" } ] }

调试＆amp;使用Visual Studio代码运行Angular2 Typescript？

10 个答案: