How can I debug JavaScript with PhpStorm without loading a new tab each time?

Question

I'm all setup to debug JavaScript in PhpStorm, however, clicking the 'Debug' button in PhpStorm each time stinks. Is there anyway, maybe a Chrome extension, that I can use to enable debugging with from within the browser? (Just like you would while Xdebug debugging with the Chrome Xdebug helper?)

For example.. I'm working on a large project and need to debug site.com/some/thing/here, PhpStorm JavaScript debugging is setup for my site url (site.com), I have to click 'Debug' in PhpStorm, and a new Chrome tab opens to site.com. I then need to navigate to the page in question before my breakpoint will trigger; and I end up with a ton of tabs in Chrome. That workflow stinks :(

I'd much rather stay in one tab, navigate to the page in question, enable 'debugging mode', set my breakpoint in PhpStorm, and do a JS action or refresh the page to start debugging (just as you would with Xdebug).

I use the Chrome step-through debugger a lot, but I really want to move to using PhpStorm so I'm able to set breakpoints and edit my code in the same place / with the same workflow I use to debug PHP.

Any ideas? Suggestions? Thank you!!

Answer 1

In the URL box, just enter the URL of the page you're debugging (e.g. http://example.com/some/thing/here)

When you click the debug button it will navigate to that page. You can then just refresh the same page