How to debug a yeoman application?

问题:

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?

回答1:

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

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

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

3. Start the application by running grunt serve.
4. In a separate terminal run node-inspector.
5. 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).
6. 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.

回答2:

Simple like that:

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

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

回答3:

1. install node-inspector:

   $ npm install -g node-inspector

2. start Node Inspector server:

   $ node-inspector

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

4. open Chrome or Opera and go to http://localhost:8080/debug?port=5858

回答4:

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

• http://net.tutsplus.com/tutorials/javascript-ajax/meeting-grunt-the-build-tool-for-javascript/
• https://github.com/gruntjs/grunt/wiki/Getting-started

回答5:

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.

回答6:

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.