用 VisualStudio 代码调试和运行 Angular2类型脚本? ？

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

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

1. 安装扩展名为‘ Debugger for Chrome’。安装完成后，重新启动 VS 代码。

2. 转到 Debug 窗口，使用 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. In tsconfig.json, make sure you have "sourceMap": true

This completes your debug environment settings. Now, before you start debugging, make sure all your existing Chrome.exe instances are closed. Verify from Task Manager OR Use DOS command ‘killall chrome’

5. Run your project, using npm start command and Chrome as default browser.

6. Once application is run successfully, you will receive port number. Copy URL from chrome browser and paste into url section above. (NOTE: If you are using routing in your application then url would like above otherwise it will be ending index.html etc)

7. Now, place breakpoints wherever you want in your typescript files.

8. Again, go to debug window in VS code, and hit Run. Your tab/instance connected to debugger will looks like below.

指定一个 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

我有这个问题，而@Sankets 的答案帮助它是这个问题，为我解决了 https://github.com/angular/angular-cli/issues/2453。

特别将下面的代码添加到 launch.json

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

这些对 launch.json的修改适用于我在 MacOS 上的工作，它使我能够让调试器和断点在一个新的实例中工作，每个调试会话..。

// 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}/*" }

我有一个类似的问题，但我的项目也包括网络包，导致上述解决方案失败。在浏览了互联网之后，我在 github 上的一个帖子中找到了一个解决方案:

Https://github.com/angularclass/angular2-webpack-starter/issues/144#issuecomment-218721972

不管怎样，这就是我们所做的。

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

首先，在’./config/webpack.dev.js’中

• 使用 = > Devtool: ‘ source-map’
• 而不是 = > Devtool: “廉价模块源地图”

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

• Npm install —— save write-file-webpack-plugin

将插件添加到’./config/webpack.dev.js’，添加:

• Const WriteFilePlugin = demand (‘ write-file-webpack-plugin’) ;

继续添加:

• 新的 WriteFilePlugin ()

插件列表后，新的定义插件() ，即

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/”。有了这个配置，源映射就进入了。但他们指向。/src/.Vscode 将绝对根预置到工作区，并正确解析文件。

对于角状种子:

{
"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/*"
}
}
]
}

这个已经被测试过了

步骤1: 安装 chrome 调试器: 只需打开 VS Code 中的 Command Palette (Ctrl + Shift + P) ，然后输入 Extended: Install Extension Command。当扩展列表出现时，键入“ Chrome”以过滤列表并安装 Debugger for Chrome 扩展。然后创建一个启动配置文件。

[步骤1的详情]

步骤2: 创建和更新 launch.json 文件: 两个例子 launch.json 配置为“ request”: “ laun”。您必须指定 file 或 url 来启动针对本地文件或 url 的 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步详情]

下面是一个关于如何在 VSCodehttps://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger中调试 Angular 的官方可视化工作室代码文档

要调试客户端的 Angular 代码，我们需要安装 Debugger for Chrome 扩展。 打开扩展视图(Ctrl + Shift + X) ，在搜索框中输入“ Chrome”，你会看到几个引用 Chrome 的扩展。 按下安装按钮为调试器的 Chrome。该按钮将改为安装，然后，在完成安装后，它将改为重新加载。按“重新加载”重新启动 VS 代码并激活扩展。

我们首先需要配置调试器。为此，转到 Debug 视图(Ctrl + Shift + D) ，单击 gear 按钮创建 launch.json 调试器配置文件。从选择环境下拉菜单中选择 Chrome。这将在一个新的。项目中的 vscode 文件夹，其中包含启动网站或附加到正在运行的实例的配置。 对于我们的示例，我们需要做一个更改: 将端口从8080更改为4200。

我需要使用 CORS，所以我打开与残疾人网络安全铬在。然后通过将调试器附加到 chrome 上对角度应用程序进行调试。

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}"
},
]
}

桑基特的回答是正确的，但我对此有些疑问。

{
// 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}"
}
]
}