调试

Question

调试

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

有人能分享调试步骤吗

Answer 1

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

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

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

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

首先，在/config/webpack。dev.js'

• 使用=

然后安装并使用写文件-网络包-插件：

• npm安装--保存写文件-网页包-插件

将插件添加到'/config/webpack。dev.js“添加：

• const WriteFilePlugin=require（'write-file-webpack-plugin'）

在顶部的网页包插件下面。继续添加：

• 新的WriteFilePlugin（）

到新定义后的插件列表Plugin（），即

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

这确保了源映射被写入磁盘

最后，我的发布会。下面给出了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 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:无法连接到目标：connect

Answer 3

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

开始之前，请确保您拥有最新版本的VS代码。您可以验证最新版本–帮助

>

安装名为“Chrome调试器”的扩展。安装完成后，重新启动VS代码。

转到调试窗口，打开启动。使用Chrome的json。

发射中。json配置部分，使用下面的配置

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

在Tconfig。json，确保你有“sourceMap”：true

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

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

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

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

同样，转到VS代码中的调试窗口，然后点击运行。连接到调试器的选项卡/实例如下所示。