PhpStorm is a great PHP IDE, but did you know it can also debug JavaScript pretty well too? Here's how to debug scripts using Google Chrome as a host web browser.

As of 2012, all of the major Web Browsers include some form of JavaScript debugging built right into them, so you may be asking, what's the point in getting your PHP IDE to do this? My impetus for trying this was wanting to use one common tool for the purposes of debugging code, plus whilst the tools offered by PhpStorm might not provide anything that can't otherwise be done in-browser, I personally find following the code easier in PhpStorm than say Chromes in-built console.

Initial setup

The setup for this requires some setup on both the Google Chrome and the PhpStorm sides.

I build Drupal sites exclusively, so I've found that remote debugging works best for this purpose. Local JavaScript debugging works great for simple, flat HTML sites or templates that include the JavaScript <script> tags inside the page content, but for Drupal sites, where it's all constructed at the last minute, having the Web Browser tell you what files it's included on render obtains all of the included JS files for the page you are debugging.

Setting up Google Chrome

The setup here is minimal; you just need to ensure that you are running a recent release! This guide was written against Google Chrome 18 (the current version as of September 2012, when this guide was written), which includes the necessary features.

Setting up PhpStorm

Web Browsers settings

From the PhpStorm menu, select File > Settings..., then search for "Web Browsers" in the top box (or find the right panel under IDE Settings in the left-hand tree). Select the 'Settings...' button in the Chrome section. This will bring up a further settings window, ensure that 'Enable remote debug on port:' is checked (leave the port as the default 7930), then OK this window and the main settings window.

Project debug configuration

From the PhpStorm menu, select Run > Edit configurations..., which brings up the debug configurations window. Select the + arrow in the top-left hand corner, then 'JavaScript Debug > Remote' from the menu that appears.

Give the debug configuration a name (I usually choose 'JS Remote:80', assuming the site runs on Port 80), and fill in the URL of the page that you wish to debug. In the 'Browser:' drop-down, select 'Chrome' to ensure it launches the correct browser for debugging.

In the 'Remote URLs of local files', you should see your project root folder. In the 'Remote URL' column, ensure that this maps to the correct place to ensure that any JS files in module/theme subfolders can be found correctly

You can now OK this window.

Running your debug

This is a little unconventional, but once you've done it once it makes perfect sense. To run your debug, From the PhpStorm menu, select Run > Debug..., then select 'JS Remote:80' from the pop-up menu (or whatever you labelled the configuration as earlier). Google Chrome should load a new tab, which for a short while, will say...

Waiting for connection from JetBrains PhpStorm...

... whilst it creates the connection to PhpStorm to hand it the debugging information.

Now one caveat with working on older Drupal sites - the scripts are usually appended with ?SOMETHING when output to the page, so the scripts exact name won't match the name of the source file. Not to dispair. In the 'Debug:' panel at the bottom of the PhpStorm window, that appeared when you launched the debug configuration, there's now a 'Scripts' tab.

Select this to see all of the scripts that the page included, and you can then select one for debug. You can set breakpoints on this script, reload the page, and voila!

That's just the basics to get it up and running, bu you should find that once set up, re-running the debug is simple. Have fun!