How to debug grunt in PHPStorm (WebStorm)

Question

Has anobody a good idea about debugging grunt (for example an event listener function) in PHP Storm.

There is Node.js support in storm but I'm not sure how to configure debug settings if I'd like to debug a grunt task for example when a file changed and the watch task emits it.

Answer 1

I am using Linux and I have to configure the PhpStorm Run/Debug in a weird way to run or debug Grunt tasks, maybe due that I have installed Node in my home folder rather than to have a link to the binary in /usr/bin

My settings are:

A) "Paht to Node": I set the path to my bin node that I have in /home/ifraixedes/Apps/node/bin/node B) "Node parameters" I set the path to Grunt-cli script, in my case: /home/ifraixedes/Apps/node/lib/node_modules/grunt-cli/bin/grunt C) "Working directory": I typed the path to the directory where the Gruntfile.js, that I want to execute, is D) "Path to Node App JS File": I typed the name of the grunt task to execute, e.g default

And with this settings, I can execute the PhpStorm's debugger as an usual NodeJS Application so I can set the breakpoints wherever I need.

Answer 2

I use Windows 7. I found when I type "grunt" in cmd it actually runs

node c:\Users\<username>\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

So I put into PhpStorm Run/Debug configuration Path to Node App JS File = c:\Users\<username>\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

Now I put a breakpoint inside module.exports = function (grunt) { ... } and click "Debug" button on toolbar - breakpoint works as expected!

(if you do not know where Run/Debug configuration in PhpStorm read this: http://www.jetbrains.com/phpstorm/webhelp/running-and-debugging-node-js.html )

Answer 3

Petr's post is correct but am adding some pictures to make this a little more clear for PHPStorm or WebStorm Newbies

---

1) FROM THE WEBSTORM MAIN MENU: Run->Edit Configurations... opens a dialog

2) Click the [+] icon, then select the Node.js entry from the drop down if it's not already selected

3) This will open a Node.js template with the basic fields filled in. You will need to add the following fields Name, Working directory, Java script file, Application parameters

Name GRUNT or whatever you like

Working Directory C:\GRUNT-TASKPATH (or wherever the source for the grunt task is installed) which contains source, and also should contain a gruntfile.js

Javascript File "C:\Users\USERNAME\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt" This is the grunt node app, on linux/mac it will be in a different directory

Application Parameters TASKNAME The name of your grunt task that you are going to debug

4) Don't forget to apply the settings you just made and press OK to close the dialog

5) Open the task source that should be in your working directory under something like (tasks/taskname.js) and set a breakpoint

That's it, you can now run or debug the task using the GRUNT configuration from the run menu, or the drop down in the toolbar.