Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debugging grunt with Intellij

I'm trying to debug grunt with Intellij (IDEA). The technologies are: NodeJS, express, AngularJS.

The problem: Debugger does not stop on breakpoints.

I'll be happy to hear your thoughts.

configuration tab:
Node interpreter: C:\Program Files\nodejs\node.exe
Javscript file: C:\Users[user]\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

Browser / Live Edit tab:

http://localhost:3000/

and here is the Gruntfile.js:

var path = require('path');

module.exports = function (grunt) {

grunt.initConfig({
    express: {
        dev: {
            options: {
                script: 'server.js'
            }
        },
    },
    watch: {
        html: {
            files: [ '**/*.html'],
            options: {
                livereload: true
            }
        },
        server: {
            files: [ 'server.js'],
            tasks: ['express:dev'],
            options: {
                livereload: true,
                spawn: false // Without this option specified express won't be reloaded
            }
        },
        js: {
            files: [ '**/*.js'],
            options: {
                livereload: true
            }
        }
    },
    open: {
        express: {
            // Gets the port from the connect configuration
            path: 'http://localhost:3000'
        }
    }

});

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-open');

grunt.registerTask('default', ['express:dev', 'watch' ])

};

like image 929
chenop Avatar asked Feb 22 '14 17:02

chenop


2 Answers

Just tried a sample Angular+Express application run as a Grunt task. I've used your Gruntfile.js (unchanged). My Node.js Run configuration looks as fololows:

configuration tab: Node interpreter: C:\Program Files\nodejs\node.exe Javscript file: C:\Users[user]\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt Working directory: my project root - the folder where Gruntfile.js is located

Live Edit tab: After launch enabled with JavaScript Debugger enabled

http://localhost:3000

I set breakpoints in my controllers.js and run the configuration above in debugger => breakpoints in Angular code work as expected. Breakpoints in my server code don't :)

To get breakpoints in server-side code working, I did the following:

  • added 'debug: true' to dev options in Gruntfile.js:

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

  • modified the node_modules\grunt-express-server\tasks\lib\server.js, line 65, changing '--debug' to '--debug-brk=' ('--debug-brk=47977' in my case)
like image 148
lena Avatar answered Oct 13 '22 12:10

lena


Try installing the JetBrains IDE Support extension for chrome, and then create a javascript Debug configuration like this:
(source: ignaciosuay.com)

My grunt server is running in the port 9000, so change it for 3000. note: You need to run grunt before running this configuration. If you have any query, please have a look to this post where is explained step by step how to debug AngularJS with Intellij.

like image 27
ignacio.suay Avatar answered Oct 13 '22 11:10

ignacio.suay