WebStorm debugging with Chrome - best Workflow with useful console and setting breakpoints in WebStorm

Question

The main thing I want to achieve is setting breakpoints directly in WebStorm instead of having to find them in Chrome again (I currently do this with warnings as the fastest way...), without losing any features available in Chrome.

I'm currently trying to switch from debugging JavaScript in Chrome to debugging in WebStorm directly. I got it setup using Remote Debugging together with the Chrome-plugin and it works quite good.

But the console style and options in WebStorm are far away from what I have in Chrome. console.warn has just the same colors as console.log output and I can't filter the output for errors or warnings. Are there any plugins or options to improve this behavior or do I need to stick to the Chrome console?

And if I fall back to using Chromes console, when starting the developer tools JetBrains debug plugin gets disabled, making the breakpoints set in WebStorm useless - is there a better workflow for getting best out of both worlds?

Update : I am using the "debugger;" command in the code for now, it at least is way better than what I used before. Source : Set a javascript breakpoint in code - in chrome?

I am still open for better suggestions where I don't have to change the code for debugging purposes.

/edit : Here is a screenshot of my console color setup and outputs (with the corresponding commands above them) :

Answer 1

There currently seems to be no better solution than using the "debugger;" command in javascript for setting breakpoints (see comments to the question). That way we can use the great browser-debugger while setting breakpoints in the code.