Grunt debugging from Webstorm

Question

Its possible to run grunt tasks within WebStorm through external tools. However, is it possible to avail debugging with external tools? By running tasks like grunt server or grunt test within WebStorm, it would make debugging a lot easier if it's possible with external tools like grunt.

Answer 1

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

• Create a new Node.js Run/Debug configuration: Run->Edit configurations...
• In Path to Node choose your node binary, ie: /Users/someuser/nvm/v0.10.5/bin/node
• In Working Directory , choose your Gruntfile.js directory, ie /Projects/someproject
• In Path to Node App JS File , choose your Grunt CLI path (you can choose the grunt-cli symlink created on your node bin directory, WebStorm will use the symlink target), ie: /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 Application parameters enter the Grunt task to run, eg default or test

Click on Run or Debug and you are done :)

Answer 2

I just happened to try this in WebStorm 10 today. I'm not sure if it's a new feature but WebStorm have integrated the steps described by @diego so you don't have to perform them manually:

1. Click View > Tool Windows > Grunt to display the Grunt window in WebStorm.
2. Right-click on any task and choose "Debug"

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