使用Visual Studio代码调试和运行Angular2 Typescript？

Question

使用Visual Studio代码调试和运行Angular2 Typescript？

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

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

Answer 1

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

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

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

2. 转到Debug窗口,使用Chrome打开launch.json.

3. 在Launch.json配置部分中,使用下面的配置

   {
       "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'

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

6. 成功运行应用程序后,您将收到端口号.从Chrome浏览器复制URL并粘贴到上面的url部分.(注意:如果您在应用程序中使用路由,那么url会喜欢上面,否则它将结束index.html等)

7. 现在,在您的打字稿文件中的任何位置放置断点.

8. 再次,转到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:无法连接到目标:连接ECONNREFUSED

Answer 3

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

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

无论如何,这就是做了什么.

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

首先,在'./config/webpack.dev.js'中

• use => 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 /'.使用此配置,源映射在./dist/中,但它们指向./src/.vscode将绝对根添加到工作空间,并正确解析文件.

Answer 4

这是关于如何在VSCode中调试Angular的官方视觉工作室代码文档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.