How to debug Grunt plugins?

I am starting to get into Grunt development by adding a requested feature to Grunticon.

To get even more specific, I need to modify a library Grunticon uses called Directory Encoder, which is also by the Filament Group.


I am to the point where simple Grunt log messages to the console will no longer do, so being able to debug with PhpStorm / WebStorm would be super nice.

I've tried to follow this StackOverflow answer to get things up and running, but I am unable to successfully hit a breakpoint in any of the Grunt JavaScript.

I am hoping that someone can kindly point out the obvious to me or connect the dots I'm missing.

I have a feeling it's one of two things

  1. A configuration issue. Screenshot is attached of what I currently have.
  2. What to do even if I get it confogured properly... Do I do something else in PhpStorm / WebStorm to hit a breakpoint? Do I run the Grunt command from the command line?

I sincerely appreciate any help anyone can provide.


Comment actions Permalink


you can't currently debug applications run as Grunt tasks (at least this doesn't work for me - see
Debugging will work if you run your application directly, not as a grunt  task. To do this, you need to create a Node.js run configuration,  specifying your main application files as a javascript file to run. Such  configuration can be easily created from a file right-click menu if  Node.js support is configured for the project ('Node.js vXXX Core  modules' library has to be enabled in Settings/javascript/libraries)

Comment actions Permalink

Elena Pogorelova : :

Thanks for the reply and the link.

That actually helped me out quite a bit with getting Node Inspector working how I needed it to.


Please sign in to leave a comment.