Debugging grunt with Intellij

All we need is an easy explanation of the problem, so here it is.

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\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' ])

};

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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\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)

Method 2

Try installing the JetBrains IDE Support extension for chrome, and then create a javascript Debug configuration like this:
Debugging grunt with Intellij
(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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Tags: , , ,

Leave a Reply