使用AngularJS進行Visual Studio代碼調試

Question

我想使用新的Visual Studio代碼調試我的Angular應用程序，但似乎Angular和Visual Studio代碼存在問題。

這是我的launch.json：

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Manager",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "/Volumes/Transcend/WorkArea/Manager/app/app.js",
            // Automatically stop program after launch.
            "stopOnEntry": true,
            // Command line arguments passed to the program.
            "args": [],
            // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
            "cwd": ".",
            // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArguments": [],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": false
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

我嘗試調試Angular應用程序時遇到此錯誤，

錯誤：

ReferenceError: angular is not defined
    at Object.<anonymous> (/Volumes/Transcend/WorkArea/Manager/app/app.js:1:79)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.runMain [as _onTimeout] (module.js:497:10)
    at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)
MacBook-Pro:Manager user$ cd '/Volumes/Transcend/WorkArea/Manager';  'node' '--debug-brk=55539' '/Volumes/Transcend/WorkArea/Manager/app/app.js'
debugger listening on port 55539

Killed: 9

app.js

/// <reference path="../typings/angularjs/angular.d.ts"/>

var routerApp = angular.module('uiRouter', ['ui.router', 'uiRouter.dmvs']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        .state('home', {
            url: '/home',
            templateUrl: 'app/dmvs/partial-d.html',
            controller:'dController'
        })

});

Answer 1

好的，在@code人員的幫助下，我得到了它的工作。 我現在能夠從IDE完全調試Angular客戶端！ 希望，這將有助於其他人......

首先，您需要下載“Debugger for Chrome Extension”。 你這樣做是這樣的：

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

安裝完成后，我使用了MSFT的說明：

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

我只能使用“附加”方法，因此我將其與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"
        }
    ]
}

此外，不要忘記在調試模式下啟動Chrome（對於Mac）：

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

偉大的編輯@code！

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

Answer 2

我遇到了類似的問題，但我的項目還包括導致上述解決方案失敗的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 3

我們使用Gulp.js並且必須添加以下內容：

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

希望這有助於嘗試使用VS Code調試angularjs應用程序的人。

這是一個示例配置：

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