Setting up WebStorm to debug grunt with TypeScript

It’s possible to use the WebStorm editor to debug grunt tasks if you are using TypeScript and generating .map files.  Assuming that grunt is already launching from the command line, here’s how to step into the debugger:

• Open your project’s folder in WebStorm.
• Click Run… Edit Configurations…
• Add a new configuration for Node.js (the green + sign)
• Name it “Debug Grunt”
• Set the JavaScript File to C:\Users\YOUR_USER_ID_GOES_HERE\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt (make sure you update this path with your user ID)
• Set the application parameters to the grunt task you wish to debug, for example dev or just leave blank if it is default.

Now you should be able to hit breakpoints when running the Debug Grunt task.  WebStorm is also smart enough to notice if your JavaScript has a map file that points to a TypeScript file; if it does, you can even set breakpoints in the TypeScript code.

Thanks to Diego and everyone else who answered this question on Stack Overflow.