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

Question

In Webstorm, I am running gulp serve task that launches localhost:9000 stub angular project generated with yo. I am trying to debug JavaScript code and this is what i have tried:

I run gulp as a debug task, I can only debug gulp file lines
I try to run gulp serve before JavaScript, it starts serving and Webstorm never gets to launching its JavaScript debug session
I try to run JavaScript debug, I don't get breakpoints inside my code.

What is the workflow in this situation?

PS. i am not trying to debug code inside chrome developer tools, i want my breakpoints to work in Webstorm

you mean the script line, that breaks inside chrome. that is what i would like to avoid as I'm trying to use native debugging capabilities of webstorm — RIAwolf
– RIAwolf, Commented Dec 16, 2015 at 14:49
If you don't want to use debugger or console.log() - I am not sure what you're looking for. As far as I know, Webstorm is not aware of the app running in another application. — itamar
– itamar, Commented Dec 16, 2015 at 14:51

itamar · Accepted Answer · 2015-12-16 14:45:39Z

1

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 console
debugger; // 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.

answered Dec 16, 2015 at 14:45

itamar

3,9775 gold badges37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RIAwolf Over a year ago

I need to break code inside webstorm IDE with its integrated debugger.

itamar Over a year ago

Ah - sorry, I haven't used it - but here's the docs which I'm sure you've seen already. jetbrains.com/webstorm/help/…

RIAwolf Over a year ago

Yes, it works when you are not using gulp for serving, however these days its not the workflow developers use

Has AlTaiar Over a year ago

This does not really answer the question. U could use debugger without WebStorm

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related