In this article, we will learn how to configure the free to use Atom IDE to fluently debug PHP code.

Firstly, if you’ve never used PHP Xdebug with your current PHP build, then you will need to install and configure it. Following the first section steps to achieve this first.

Configuring PHP to use XDebug

Step 1

Create an index.php file in the root directory of your web server, and add the following code.

echo phpinfo();

Run the index.php file in a browser, preferably, Google Chrome. This will render the following information as shown in the image below –

Once this is loaded up, follow these sub-steps.

1. Highlight all of the information on the page and copy it.
2. Go to the XDebug Wizard tool.
3. Paste the information into the Text Box input on the wizard tool page.
4. Locate and click the ‘Analyse my phpinfo() output’ button.
5. Download the provided module under Instructions, number 1. (See image below)

Follow the remaining instructions in the image above but remember, in this example, the directory path may be different to your own. Do not forget to restart the web server after adding the module to the ext directory.

Step 2

Let’s go ahead and configure the php.ini file to use the new xDebug module and set-up the extra settings to work with VSCode.

• Locate and open the php.ini configuration file, this will be inside the PHP root directory, for example, ‘C:\xampp\php\’.
• Add the settings below to the very bottom of the php.ini file.
• Important: Make sure that the zend_extension matches the one you have downloaded and residing in your php/ext folder.
• Also Important: Enabling remote_enable & remote_autostart must not be missed, otherwise, xDebug will not execute if either the browser or as singular script launch.
• Save it
• Restart the web server again.

[xDebug]

zend_extension="php_xdebug-2.6.0-7.0-vc14.dll"

xdebug.remote_enable = 1

xdebug.remote_autostart=on

Configuring Atom to use PHP XDebug

If you haven’t already installed the following packages, then go ahead and install them, if not, jump to Step 2.

Step 1

Install all of the following packages into your Atom IDE.

• https://atom.io/packages/atom-debug-ui
• https://atom.io/packages/atom-ide-ui
• https://atom.io/packages/ide-php
• https://atom.io/packages/php-debug

Step 2

Once all the packages from Step 1 are installed then we can do the following –

1. Open your project in Atom and open the index.php file of your project.
2. Add a few lines of code to the file, something like, $myVar = 1;, etc..
3. Right-click the line of code and find the Debug menu and click Toggle Breakpoint, alternatively, use ALT + F9.
4. Right-click anywhere and go to Debug and click Toggle Debugging.
5. Your editor should now look similar to the screenshot below

Step 3

Now all is left to do, is run your index.php file in the browser

• Open a browser
• Navigate to your project root folder/index.php for example, localhost/index.php
• You will notice Atom start to flash in the taskbar, open it up and you will see the debugger is active and has stopped at the first breakpoint. Similar to below –

And that is it, you can now walk through your code, debugging as and when necessary.

If you start to step through the lines of code, you will see the ‘locals’ appear in the PHP Debug pane. See the screenshot below –

Hope this helps, Happy Debugging!