使用Visual Studio Code调试并运行Angular2 Typescript？

Answers:

124

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

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

  1. 安装名为“ Debugger for Chrome”的扩展程序。安装完成后，重新启动VS代码。

  2. 转到调试窗口，使用Chrome打开launch.json。

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

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

  4. 在tsconfig.json中，确保您具有“ sourceMap”：true

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

  1. 使用npm start命令和Chrome作为默认浏览器运行您的项目。

  2. 一旦应用程序成功运行，您将收到端口号。从Chrome浏览器复制网址，然后粘贴到上面的网址部分。（注意：如果您在应用程序中使用路由，则url将像上面一样，否则将以index.html等结尾）

  3. 现在，在您的打字稿文件中的任意位置放置断点。

  4. 再次，转到VS代码中的调试窗口，然后单击“运行”。您连接到调试器的选项卡/实例将如下所示。

Chrome调试

— 桑凯
source
4
无法理解.. 1.要安装哪个扩展。2. Launch.json在哪里？
— azulay7 '16
3
@ azulay7您是第一次使用VScode吗？其VScode不是Visual Studio 2015 IDE。无论如何，在左侧，您将看到Debug选项（或使用CTRL + SHFT + D）单击以打开Debug窗口。打开Debug窗口后，在Debug窗口的右上角，您将看到打开Launch.json的选项。对于Chrome扩展程序，您将在左侧看到扩展程序选项（或使用CTRL + SHFT + X）。打开扩展程序窗口后，搜索Chrome调试器安装此扩展程序。您将必须重新启动VScode。希望这可以帮助。
— 桑凯特，2016年
4
我还在为“ open launch.json”苦苦挣扎。步骤如下：单击左侧边栏中的“调试”图标，然后单击“调试”窗口右上角的齿轮，如果显示，则从下拉列表中选择“ Chrome”。
— 伊万·克里瓦雅科夫
6
其他人得到Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:3000/)
— benscabbia '16
3
我还在调试端口上收到连接错误吗？HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:9222在本地主机上正常加载。
— Mangopop
15

指定一个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：无法连接到目标：连接ECONNREFUSED

— 海德科技
source
还有一个可能会出问题。.我将代码库移至C：（root）驱动器，调试工作正常。
— HydTechie '16
angular 2 chrome调试无法正常运行有奇怪的原因..有时将所有未处理的代码签入源代码管理，清理文件夹，最新的调试开始运行...原因我不知道..
— ::
我正在使用以下启动json-始终可以运行调试模式代码\ 0 /：{“ version”：“ 0.2.0”，“ configuration”：[{“ name”：“使用sourcemaps启动本地主机”，“ type”： “ chrome”，“ request”：“启动”，“ url”：“ localhost：4200 ”，“ webRoot”：“ $ {workspaceRoot} / app / files”，“ sourceMaps”：true}，{“ name”：“ Launch”，“ type”：“ chrome”，“ request”：“ launch”，“ url”：“ 127.0.0.1:4200”、“port”：9222，“ sourceMaps”：true，//“ diagnosticLogging”：true ，“ trace”：“详细”，“ webRoot”：“ $ {workspaceRoot}”，“ userDataDir”：
— HydTechie
TRY启动选项用于实时调试，而不是源地图！
— HydTechie '17
5

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

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

无论如何，这就是完成的工作。

注意：-在开始之前，您必须检查您是否具有Visual Studio代码的最新版本，以及是否已在VS Code中安装了名为“ Chrome调试器”的扩展。

首先，在“ ./config/webpack.dev.js”中

  • 使用=> devtool：“源地图”
  • 代替=> devtool：'cheap-module-source-map'

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

  • npm install --save写文件-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将绝对根添加到工作区中，并正确解析文件。

— malmike21
source
5

这是有关如何在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的安装按钮。该按钮将变为“正在安装”，然后在完成安装后将变为“重新加载”。按重新加载以重新启动VS Code并激活扩展。

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

— 泰迪熊
source
如果我想运行Internet Explorer而不是Chrome，该怎么办？
— robermann '18
我不知道您为什么要这样做，但是目前不支持IE。
— 泰迪
2

对于角种子：

{
  "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/*"
      }
    }
  ]
}
— 马特·比纳
source
0

这些模块可以launch.json在MacOS上为我工作，这使我能够在每个调试会话的新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}/*" }
— 西缅
source
0

这是经过试验和测试的-

第1步：安装chrome调试器：只需打开VS Code中的命令面板（Ctrl + Shift + P），然后输入扩展程序：安装扩展程序命令。当扩展程序列表出现时，键入“ chrome”以过滤列表并安装Debugger for Chrome扩展程序。然后，您将创建一个启动配置文件。

[步骤1的更多详细信息]

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

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[步骤2的更多详细信息]

— 爱好者
source
0

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

CMD生产线将启动禁用了网络安全性的Chrome：

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}"
        },
    ]
}
— 卡尔提克
source
0

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}"
        }
    ]
}
— 哈米德·马哈迪扎德
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.