Debugging Multiple Sites / Projects in NetBeans and Xdebug

I use NetBeans / MAMP / Xdebug  with Chrome and Firefox in OSX for debugging PHP applications. I'm not a fan of IDEs in general; I find them to be pretty clunky and slow. But I really like having breakpoints and a nice debugger window with stack and variable inspectors.

If you develop apps that communicate to each other via services and AJAX, you might find yourself needing to debug two sites or projects at once. This can be tricky, because NetBeans seems to want to debug just one site at a time. My own experience up to this point was that it works sometimes, but not always. I couldn't figure out why. But recently, I think I finally found out how to make it work farily consistently.

Let's say that you have an app running at dev.example.com. This site needs to make AJAX calls to retrieve product information from a web service running at dev.services.example.com. If the app is running locally, and the service is running on a remote server, you can debug the app pretty easily. But I usually have both dev sites running locally, making revisions to both sites at once. I'd like to be able to set breakpoints within the main app, but also within the PHP scripts on the services site.

I've found that, if you tell NetBeans to debug only the app site, it will hang up on AJAX calls to the services site. Hitting the debug button for both sites in NetBeans also failed.

Here is the process seems to work best for me:

  1. Open both projects in NetBeans. Be sure that both projects are set to debug in the same browser. This preference is specific to each project. I generally use Chrome or Firefox, depending on what I'm doing at the time. Pick one or the other.
  2. Open both sites in the same browser: open the projects window/pane in NetBeans, then right-click on the project root, and select "Run". Repeat for the second site.
  3. Debug the main app (dev.example.com): open the projects window/pane in NetBeans, then right-click on the project root, and select "Debug". Be sure the debugger opens a page with no AJAX calls to the services site. Depending on your browser and preferences, this might open a third tab in your browser, or it might refresh the main app tab that you opened in step 2. If you have a debug breakpoint set in your app's default page, it should trigger NetBeans to break there. Be sure to tell it to continue/run.
  4. The URL should now have a query string appended: ?XDEBUG_SESSION_START=netbeans-xdebug. Copy that string.
  5. Go to the tab for the services site. Append the query string to the URL (e.g. http://dev.services.example.com/index.php?XDEBUG_SESSION_START=netbeans-xdebug) and press RETURN to reload the page. If you have a break point set in that page, it should trigger for you.
  6. Go back to your main app tab and navigate to a page that makes AJAX calls to the services site. If everything worked right, NetBeans should now stop on breakpoints in either site, regardless of whether they were called directly from their respective tabs, or from an AJAX call from one to the other.

The trick seems to be in setting the Xdebug session variable in the services site, but without explicitly telling NetBeans to debug that site.

I hope this saves someone some time, I know I've spent many frustrating hours cursing at the debugger when it hangs up. I have no doubt that the results may vary for different versions of NetBeans. I'm currently running 7.4.

If this solves your problem, or if you have other experience with this same issue, please leave a comment.

Note: if you like to use Chrome with the NetBeans Connector extension to debug JavaScript, you might run into some problems. I've had limited success with that while debugging two sites at once. So for now, I'm going to stick to using the browser console to debug JavaScript.