How to debug Javascript in webstorm when gulp is serving the application How to debug Javascript in webstorm when gulp is serving the application angularjs angularjs

How to debug Javascript in webstorm when gulp is serving the application


In your Javascript - put debugger; between two of your lines, and pop open your Developer Tools in Chrome. When you refresh the page - if your script runs, it should stop where you put the debugger; and you'll be able to hover on different variables to see their values. Very powerful and basic tool.

Also, if you don't want to have the script stop - you can console.log(variable); to have the Developer Tools console print out the variable.

Example:

var somethingOrOther = function(){var blah = 'foo';console.log(blah);// to print to consoledebugger; // to stop script at this point and look around};

Don't forget to remove the debugger; when you're done.I recommend using jshint in your gulp to make sure you don't miss those kinds of things.