用Visual Studio代码debugging和运行Angular2 Typescript？

用Visual Studio代码debugging和运行Angular2 Typescript？

我想用VS代码https://angular.io/guide/quickstart来debuggingAngular2打字稿应用程序

任何人都可以请分享步骤debugging和VS代码运行？

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

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

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

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

  3. 在Launch.jsonconfiguration部分，使用下面的configuration 

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

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

这将完成您的debugging环境设置。 现在，在开始debugging之前，请确保所有现有的Chrome.exe实例都已closures。 从任务pipe理器validation或使用DOS命令“killall chrome”

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

  2. 一旦应用程序成功运行，您将收到端口号。 从Chrome浏览器复制URL并粘贴到上面的url部分。 （注意：如果你在你的应用程序中使用路由，那么URL会在上面，否则它会结束index.html等）

  3. 现在，在打字稿文件中放置任何你想要的断点。

  4. 再次，在VS代码中去debugging窗口，然后点击运行。 连接到debugging器的选项卡/实例将如下所示。

Chrome调试

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

我有一个类似的问题，但我的项目还包括导致上述解决scheme失败的webpack。 遍历互联网之后，我在github的一个线程中发现了一个解决scheme：

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

无论如何，这是做了什么。

注意：在开始之前，你必须检查你是否有最新版本的Visual Studio代码，并且已经在VS代码中安装了名为“ 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（）

到新的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 /”。 使用这个configuration，源地图在./dist/中，但是它们指向./src/。 vscode将绝对根目录前置到工作区，并正确地parsing文件。

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

具体添加到launch.json中 

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

对于angular种子： 

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

这里是关于如何在VSCode中debuggingAngular的官方Visual Studio代码文档https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

为了debugging客户端的Angular代码，我们需要安装Debugger for Chrome扩展。 打开扩展视图（Ctrl + Shift + X）并在search框中input“chrome”。 您会看到几个引用Chrome的扩展程序。 按下Chrome的“debugging器”安装button。 该button将更改为安装，然后，完成安装后，它将更改为重新加载。 按重新加载重新启动VS Code并激活分机。

我们需要初步configurationdebugging器。 为此，请转到debugging视图（Ctrl + Shift + D），然后单击齿轮button以创buildlaunch.jsondebugging器configuration文件。 从“select环境”下拉列表中selectChrome。 这将在您的项目中的一个新的.vscode文件夹中创build一个launch.json文件，其中包括启动网站或附加到正在运行的实例的configuration。 我们需要对我们的例子做一个改变：将端口从8080改为4200。

这些mod的launch.json在MacOS上为我工作，使我能够在每个debugging会话的Chrome的新实例中获得debugging器和断点… 

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

这一个是尝试和testing –

步骤1：安装chromedebugging器：只需在VS Code中打开Command Palette（Ctrl + Shift + P），然后键入Extensions：Install Extension命令即可。 当出现扩展名列表时，input“chrome”来过滤列表并安装Debugger for Chrome扩展。 然后，您将创build一个启动configuration文件。

[步骤1的更多细节]

第2步：创build和更新launch.json文件：两个示例launch.jsonconfiguration“request”：“launch”。 您必须指定文件或url才能针对本地文件或url启动Chrome。 如果使用url，请将webRoot设置为从中提供文件的目录。 这可以是使用$ {workspaceRoot}（在Code中打开的文件夹）的绝对path或path。 webRoot用于parsing磁盘上的文件（比如“/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的更多细节]

    Interesting Posts

    从Macterminal运行/打开VSCode