How to debug a yeoman application?

Question

Coming from the background of developing web apps using server-side languages/platforms such as java, python/django and php, I am starting to learn Node.js and yeoman. I consider being able to debug server-side code essential in order to improve code quality. Node supports debugging via node-inspector and --debug option. But if an application is created out of yeoman using a generator, say AngularJS, and launched using grunt, is there an easy way to enable debugging?

Perhaps a higher level question I should first ask is: If yeoman promotes (as featured in tutorial) AngularJS, which is a client-side MVC framework, then majority of code will run from browser rather than from Node. Is that the reason why server-side debugging is not important any more to yeoman and therefore not documented?

see: [Using node-inspector with Grunt tasks](http://stackoverflow.com/questions/11171013/using-node-inspector-with-grunt-tasks) for one example of how to use node-inspector — dc5, Aug 13 '13 at 23:23

Thiago C. S Ventura · Answer 1 · 2015-01-31T10:30:19.097

6

Simple like that:

npm install -g node-inspector
node-debug yo GENERATOR_NAME

It's gonna open a Chrome DevTool with an initial breakpoint.

edited Jan 31 '15 at 10:30

answered Sep 18 '14 at 11:26

Thiago C. S Ventura

2,448
1
29
43

Jerome Anthony · Accepted Answer · 2015-08-06T00:58:39.660

I am developing a yemoan angular-fullstack application. I debug the server side node js application code as follows;

Install node-inspector.
Modify the application 'Gruntfile.js' to set debug as 'true' for express server

express: { dev: { options: { script: 'server/app.js', debug: true } } }

Start the application by running grunt serve.
In a separate terminal run node-inspector.
Open chrome and navigate to http://127.0.0.1:8080/debug?port=5858. (If you see the grunt console, you would see the node debugger is on port 5858).
Now you should be able to put breakpoints and debug in your server application code. You could place debugger statement in your code to force node to break at that point and wait for your inspection.

Note: node-inspector --no-preload loads the node inspector quicker.

Using `grunt serve:debug` might help – Rob Lao Jan 07 '16 at 06:10 — Rob Lao, Jan 07 '16 at 06:10

score 3 · Answer 3 · answered Apr 09 '14 at 13:01

3

install node-inspector:

$ npm install -g node-inspector
start Node Inspector server:

$ node-inspector
run node.js with Yeoman-cli in debug mode:

$ node --debug path\to\global\npm\node_modules\yo\cli.js MyGenerator

where 'MyGenerator' is Yeoman generator name which you want to debug.
On Windows "path\to\global\npm" is something like "C:\Users{UserName}\AppData\Roaming\npm".
open Chrome or Opera and go to http://localhost:8080/debug?port=5858

answered Apr 09 '14 at 13:01

Shrike

9,218
7
68
105

My question is not about debugging a yeoman generator, but debugging a webapp generated by yeoman launched using grant. – abbr Dec 26 '14 at 00:17
1

@Fred if so then your question is not about Yeoman at all. Understand what do you want to debug: client-side code in browser or server-side code. And use appropriate tools. – Shrike Dec 26 '14 at 13:34

score 1 · Answer 4 · answered Aug 15 '13 at 14:17

If you use AngularJS and Chrome you can use Batarang plugin. In Yeoman project, you can use Grunt to check your application:

score 0 · Answer 5 · answered Dec 03 '13 at 01:45

Maybe the answer is not generic to all yeoman generated apps but I figured it out with angular-fullstack generator, which has express as backend server. Debug is enabled by setting debug to true for express config in file Gruntfile.js:

grunt.initConfig({
     ...
 express : {
    options : {
        port : process.env.PORT || 9000
    },
    dev : {
        options : {
            script : 'server.js',
            debug : true //enable debugging
        }
    },
    ...

Then node-inspector can be launched to debug on port 5858 by default.

score 0 · Answer 6 · answered Mar 29 '19 at 19:48

first enable the debug mode in Gruntfile.js

grunt.initConfig({
...
express : {
options : {
    port : process.env.PORT || 9000
},
dev : {
    options : {
        script : 'server.js',
        debug : true //enable
    }
},
...

save and run the project with this command grunt serve:debug , now you can use the debugger; var in any part of your project.

How to debug a yeoman application?

6 Answers6

Linked