Webstorm Grunt Debugging

Question

It can run grunt tasks inside WebStorm using external tools. However, is it possible to use debugging with external tools? By running tasks such as grunt server or grunt test in WebStorm, this makes debugging easier if possible with external tools like grunt.

Answer 1

You need to run grunt-cli as a Node application:

• Create a new Node.js Run / Debug configuration : Run-> Edit configuration ...
• In the Node Path, select the Node binary, i.e. /Users/someuser/nvm/v0.10.5/bin/node
• In the working directory, select the Gruntfile.js directory, i.e. /Projects/someproject
• In the path to the Node JS application file, select the path to the Grunt command line (you can select the grunt-cli symbolic link created in your Node bin directory, WebStorm will use the symlink target), i.e.: /Users/someuser/nvm/v0.10.5/lib/node_modules/grunt-cli/bin/grunt ( C:\Users\someuser\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt on Windows 7)
• In the Application Settings, enter the Grunt task to run, i.e. test

Click "Run" or "Debug" and everything will be done :)

Answer 2

I just tried this in WebStorm 10 today. I'm not sure if this is a new feature, but WebStorm integrated the steps described by @diego, so you don't have to do them manually:

• Click View> Tools> Soil to display the Soil window in WebStorm.
• Right click on any task and select "Debug"

You can set breakpoints, etc. in Gruntfile.js just like any other file.