How to debugging a Grunt served site in JetBrains WebStorm

Question

I've used a Yeoman generator and I'm using Grunt to serve up file via the connect module:

// The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35730
      },
      livereload: {
        options: {
          open: true,
          base: [
            '.tmp',
            '<%= yeoman.app %>'
          ]
        }
      },

Every thing works fine testing in the browser and debugging using Chromes dev tools.

However I would prefer to debug inside WebStorm through its browser plugin Is it possible to wire up the connect process to WebStorm to debug this way?

Answer 1

Please see http://devnet.jetbrains.com/message/5505407#5505407 In short, to make this work you normally need to enable 'browser/Live edit' for your Node.js run configuration used to start Grunt ('after launch' and 'with javascript debugger' checked, 'http://localhost:9000' URL specified) and change 'open' livereload option from 'true' to 'false' in gruntfile to avoid a second tab being opened on 127.0.0.1:9000