In this tutorial, I will show you how to setup PHPStorm so that you can use the debugging tool so that you can step through your code and easily diagnose bugs and understand what’s going on in the code a lot better when you encounter various challenges through your coding journey.

Before we begin, you must have XDebug installed.  If you don’t have this installed, you can read my XDebug installation which is part of my CacheGrind tutorial.  Once you have XDebug installed, we can proceed.

First thing you’ll need to do is turn add the following line to your PHP.ini if you don’t have it in there already.  Check out the XDebug installation tutorial to learn how to modify a PHP.ini file.

[xdebug]
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20100525/xdebug.so
xdebug.remote_enable=1
xdebug.remote_connect_back=1
xdebug.remote_port=9000
xdebug.show_local_vars=0
xdebug.var_display_max_data=10000
xdebug.var_display_max_depth=20
xdebug.show_exception_trace=0

Reboot your local server and we’ll be ready to move on to the next step.  You will want to go to JetBrain’s bookmarklet generator website.  This website will create bookmarklets that you would “install” into your bookmark panel in your web browser.  When you generate the links, click on the link, hold down the mouse button drag it to the bookmark menu.  Your finished product would look like this when you are done.  Note that I am using Chrome.  Other browsers may vary.

Now that you have the bookmarks in place, fire up your PHPStorm.  In the top right corner of your IDE, there should be a debugging panel.  It would look like this.

Make sure to activate the PHPStorm debug listener.

Go ahead and now put a breakpoint somewhere in your code.

Refresh your browser, and since this is your first time associating this debugging association to the current project, you should receive a popup in PHPStorm similar to the one below.

Click accept and you’re all set!  Now you can step through each line of your code and debug to your heart’s content!