

Select the 'Settings.' button in the Chrome section. Setting up PhpStorm Web Browsers settingsįrom 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). 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. Local JavaScript debugging works great for simple, flat HTML sites or templates that include the JavaScript 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. I build Drupal sites exclusively, so I've found that remote debugging works best for this purpose. The setup for this requires some setup on both the Google Chrome and the PhpStorm sides. 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.Īs 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.
