miofino miofino - 2 days ago 7
AngularJS Question

Visual Studio Code debugging with AngularJS

I want to debug my Angular App with the new Visual Studio Code, but It seems there is a problem with Angular and Visual Studio Code..

This is my 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
}
]
}


I have this error when I try to debug my Angular app,

Error:

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

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...

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

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

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

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:

{
    "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):

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

Great editor @code!

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

Comments