使用AngularJS进行VisualStudio代码调试-VisualStudioCodedebuggingwithAngularJS

7  

Okay, with the help of the @code folks, I got it working. I'm now able to fully debug an Angular client from the IDE! Hopefully, this will help someone else...

好的，在@code人员的帮助下，我得到了它的工作。我现在能够从IDE完全调试Angular客户端！希望，这将有助于其他人......

First, you need to download the "Debugger for Chrome Extension." You do this by typing this:

首先，您需要下载“Debugger for Chrome Extension”。你这样做是这样的：

F1
ext Install Extensions
debug (then select Debugger For Chrome)

Once that is installed, I used MSFT's instructions found here:

安装完成后，我使用了MSFT的说明：

https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

I only can get the "attach" method working, so I use that with Chrome. Here is the final version of the launch.son file I use:

我只能使“附加”方法有效，所以我在Chrome中使用它。这是我使用的launch.son文件的最终版本：

{
    "version": "0.2.0",
    "configurations": [
        {
            // Use this to get debug version of Chrome running:
            // /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "./www"
        }
    ]
}

Also, don't forget to start Chrome in debug mode with this (for Mac):

另外，不要忘记在调试模式下启动Chrome（对于Mac）：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Great editor @code!

伟大的编辑@code！

OBS: Don't forget to kill ALL Chrome Instances as mentioned here: https://github.com/Microsoft/vscode-chrome-debug/issues/111#issuecomment-189508090

OBS：不要忘记杀死所有Chrome实例，如下所述：https：//github.com/Microsoft/vscode-chrome-debug/issues/111#issuecomment-189508090

2  

I was having a similar issue but my project also included webpack that caused the above solutions to fail. After traversing the Internet I found a solution in a thread on github:

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

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

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

Anyway, this is what was done.

无论如何，这就是所做的。

Note:- Before you start you must check whether you have the latest version of visual studio code and also have installed the extension called 'Debugger for Chrome' within VS Code.

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

Firstly, in './config/webpack.dev.js'

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

• use => devtool: 'source-map'
• use => devtool：'source-map'
• instead of => devtool: 'cheap-module-source-map'
• 而不是=> devtool：'cheap-module-source-map'

Then install and use the write-file-webpack-plugin:

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

• npm install --save write-file-webpack-plugin
• npm install --save write-file-webpack-plugin

Add the plugin to './config/webpack.dev.js' by adding:

通过添加以下内容将插件添加到'./config/webpack.dev.js'：

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

under the Webpack Plugins at the top. Continue to add:

在顶部的Webpack插件下。继续添加：

• new WriteFilePlugin()
• 新的WriteFilePlugin（）

to the list of plugins after new new DefinePlugin(), i.e

新的DefinePlugin（）之后的插件列表，即

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

This ensures that the source maps are written to disk

这可确保将源映射写入磁盘

Finally, my launch.json is given below.

最后，我的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}"
    }]
}

notice the absence of '/dist/' in the webroot. with this config, source-maps are in ./dist/, but they point to ./src/. vscode prepends the absolute root to the workspace, and correctly resolves the file.

注意webroot中没有'/ dist /'。使用此配置，源映射在./dist/中，但它们指向./src/。 vscode将绝对根添加到工作空间，并正确解析文件。

0  

We were using Gulp.js and had to add the following:

我们使用Gulp.js并且必须添加以下内容：

"sourceMapPathOverrides": {
    "/source/*":"${workspaceRoot}/[directory where all of our mappings are located]/*"
 }

Hope this helps someone who is trying to debug an angularjs app with VS Code.

希望这有助于尝试使用VS Code调试angularjs应用程序的人。

Here's a sample config:

这是一个示例配置：

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "[your url here]",
        "webRoot": "${workspaceRoot}/[directory where your app is located]",
        "sourceMaps": true,        
        "sourceMapPathOverrides": {
            "/source/*":"${workspaceRoot}/[directory where your app is located and any additional .js files that are required by your app]/*"
        },        
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "runtimeArgs": [
            "--disable-session-crashed-bubble"
        ]
    }
]
}