使用 Visual Studio Code 调试和运行 Angular 2 Typescript？
Posted
技术标签:
【中文标题】使用 Visual Studio Code 调试和运行 Angular 2 Typescript？【英文标题】：Debug & Run Angular2 Typescript with Visual Studio Code? 【发布时间】：2016-07-29 10:36:32 【问题描述】：使用 Visual Studio Code 调试和运行 Angular2 Typescript？
我正在尝试使用 VS 代码调试 Angular2 打字稿应用程序 https://angular.io/guide/quickstart
谁能分享从 VS 代码调试和运行的步骤？
【问题讨论】：
【参考方案1】：经过大量研究，我找到了这些步骤-
开始之前，请确保您拥有最新版本的 VS 代码。您可以验证最新版本 - 帮助 > 检查更新或关于。
安装名为“Debugger for Chrome”的扩展程序。安装完成后，重启 VS 代码。
进入 Debug 窗口，使用 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 中，确保你有 "sourceMap": true
这样就完成了您的调试环境设置。 现在，在开始调试之前，请确保所有现有的 Chrome.exe 实例都已关闭。从任务管理器验证或使用 DOS 命令“killall chrome”
运行您的项目，使用 npm start 命令和 Chrome 作为默认浏览器。
一旦应用程序成功运行，您将收到端口号。从 chrome 浏览器复制 URL 并粘贴到上面的 url 部分。 （注意：如果您在应用程序中使用路由，则 url 会像上面那样，否则它将结束 index.html 等）
现在，在 typescript 文件中的任意位置放置断点。
再次，转到 VS 代码中的调试窗口，然后点击运行。 您连接到调试器的选项卡/实例将如下所示。
【讨论】：
看不懂.. 1. 安装哪个扩展。 2. Launch.json在哪里？ @azulay7 你是第一次使用 VScode 吗？它的 VScode 不是 Visual Studio 2015 IDE。无论如何，在左侧，您将看到 Debug 选项（或使用 CTRL+SHFT+D）单击以打开调试窗口。打开 Debug 窗口后，在 Debug 窗口的右上角，您将看到 open Launch.json 选项。对于 chrome 扩展，您将在左侧看到 Extension 选项（或使用 CTRL+SHFT+X）。打开扩展程序窗口后，搜索 Debugger for Chrome 安装此扩展程序。您将不得不重新启动 VScode。希望这会有所帮助。 我也在为“open launch.json”而苦苦挣扎。步骤如下：点击左侧边栏中的“Debug”图标，然后点击Debug窗口右上角的齿轮，如果出现下拉列表中选择“Chrome”。 其他人得到Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:3000/)
调试端口也出现连接错误？ HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:9222 在本地主机上加载正常。【参考方案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
【讨论】：
仍有问题。我将代码库移动到 C:(root) 驱动器，调试工作正常。 angular 2 chrome 调试不工作有奇怪的原因.. 有时将所有待处理的文件签入源代码管理，取一个干净的文件夹，最新的，调试开始工作......原因我不知道.. :( 我在下面使用启动 json - 始终可以运行调试模式 code\0/: "version": "0.2.0", "configurations": [ "name": "Launch localhost with sourcemaps", "type": "chrome", "request": "launch", "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”：“verbose”，“webRoot”：“$workspaceRoot”，“userDataDir”：“temp”] 尝试使用启动选项进行实时调试，而不是使用源映射！【参考方案3】：我对此有疑问，虽然@Sankets 的回答有所帮助，但正是这个问题为我解决了问题https://github.com/angular/angular-cli/issues/2453。
在launch.json中具体添加以下内容
"sourceMapPathOverrides":
"webpack:///c:/foo/bar/angular-project/*": "$workspaceRoot/*"
【讨论】：
【参考方案4】：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/*"
【讨论】：
【参考方案5】：我遇到了类似的问题，但我的项目还包含导致上述解决方案失败的 webpack。上网查了一下，在github上的一个帖子里找到了解决办法：
https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972
不管怎样，事情就是这样。
注意：-在开始之前，您必须检查您是否拥有最新版本的 Visual Studio Code，并在 VS Code 中安装名为“Debugger for Chrome”的扩展。
首先，在'./config/webpack.dev.js'中
使用 => devtool: 'source-map' 而不是 => 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()到 new new 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 将绝对根添加到工作区，并正确解析文件。
【讨论】：
【参考方案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/*"
]
【讨论】：
【参考方案7】：这个是久经考验的-
第 1 步： 安装 chrome 调试器：只需在 VS Code 中打开命令面板 (Ctrl+Shift+P) 并输入 Extensions: Install Extension 命令。当扩展列表出现时，输入“chrome”来过滤列表并安装 Debugger for Chrome 扩展。然后，您将创建一个启动配置文件。
[More Details of Step 1]
第 2 步： 创建和更新 launch.json 文件：两个带有“request”的示例 launch.json 配置：“launch”。您必须指定文件或 url 以针对本地文件或 url 启动 Chrome。如果您使用 url，请将 webRoot 设置为提供文件的目录。这可以是绝对路径，也可以是使用 $workspaceRoot 的路径（在代码中打开的文件夹）。 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"
,
]
[More Details of Step 2]
【讨论】：
【参考方案8】：这是关于如何在 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 的安装按钮。按钮将变为正在安装，然后在完成安装后，它将变为重新加载。按 Reload 重新启动 VS Code 并激活扩展。
我们需要对调试器进行初始配置。为此，请转到 Debug 视图 (Ctrl+Shift+D) 并单击齿轮按钮以创建 launch.json 调试器配置文件。从选择环境下拉菜单中选择 Chrome。这将在项目的新 .vscode 文件夹中创建一个 launch.json 文件，其中包括启动网站或附加到正在运行的实例的配置。 我们需要对我们的示例进行一项更改：将端口从 8080 更改为 4200。
【讨论】：
如果我想运行 Internet Explorer 而不是 Chrome，该怎么办？ 我不知道你为什么要这样做，但目前不支持IE。【参考方案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"
,
]
【讨论】：
【参考方案10】：Sanket's answer 是正确的，但我有一些问题。
首先，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"
]
【讨论】：
以上是关于使用 Visual Studio Code 调试和运行 Angular 2 Typescript？的主要内容，如果未能解决你的问题，请参考以下文章
使用Visual Studio Code开发和调试Java Burp扩展
如何使用 Visual Studio Code 中的 Electron 和 Angular 调试应用程序？
Visual Studio Code 支持 iOS Web 应用调试