Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Grunt debugging from Webstorm

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.

like image 538
Kamal Reddy Avatar asked Jun 11 '13 11:06

Kamal Reddy


People also ask

How do I run debug mode in WebStorm?

To start debugging, hold Ctrl+Shift and click the link. WebStorm starts a debugging session with an automatically generated Attach to Node. js/Chrome configuration.

Is grunt deprecated?

grunt. util. _ is deprecated and we highly encourage you to npm install lodash and var _ = require('lodash') to use lodash .

How do I run a JavaScript file in WebStorm?

To run a script, open it in the editor or select it in the Project tool window, and then select Run <script file name> from the context menu. WebStorm creates a temporary run/debug configuration of the type Node. js. To run a test, click the gutter icon next to it or press Ctrl+Shift+F10 .


2 Answers

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 :)

like image 82
Diego Avatar answered Nov 08 '22 06:11

Diego


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.

like image 42
jayp Avatar answered Nov 08 '22 06:11

jayp