The Sublime Text editor has a plugin that can be used to debug PHP code with Xdebug. First, let's install the xdebug package for Sublime Text.

First, go to Tools | Command Pallet. A popup similar to the following will be displayed:

Select Package Control: Install Package, and a popup similar to the following screenshot will be displayed:

Type in xdebug, and the Xdebug Client package will be displayed. Click on it and wait for a while until it is installed.

Now, create a project in Sublime Text and save it. Open the Sublime Text project file and insert the following code in it:

{
  "folders":
  [
    {
    "follow_symlinks": true,
    "path": "."
  }
],

"settings": {
  "xdebug": {
    "path_mapping": {
    "full_path_on_remote_host" : "full_path_on_local_host"
    },
    "url" : http://url-of-application.com/,
    "super_globals" : true,
    "close_on_stop" : true,
    }
  }
}

The highlighted code is important, and it has to be entered for Xdebug. Path mapping is the most important part. It should have a full path to the root of the application on the remote host and a full path to the root of the application on the localhost.

Now, let's start debugging. Create a file at the project's root, name it index.php, and place the following code in it:

$a = [1,2,3,4,5];
$b = [4,5,6,7,8];

$c = array_merge($a, $b);

Now, right-click on a line in the editor and select Xdebug. Then, click on Add/Remove Breakpoint. Let's add a few breakpoints as shown in the following screenshot:

When a breakpoint is added to a line, a filled circle will be displayed on the left-hand side near the line number, as can be seen in the preceding screenshot.

Now we are ready to debug our PHP code. Navigate to Tools | Xdebug | Start Debugging (Launch in Browser). A browser window will open the application along with a Sublime Text debug session parameter. The browser windows will be in the loading state because as soon as the first breakpoint is reached, the execution stops. The browser window will be similar to the following:

Some new small windows will also open in the Sublime Text editor that will display debugging information along with all the variables available, as in the following screenshot:

In the preceding screenshot, our $a, $b, and $c arrays are uninitialized because the execution cursor is at Line 22, and it has stopped there. Also, all server variables, cookies, environment variables, request data, and POST and GET data can be seen here. This way, we can debug all kind of variables, arrays, and objects and check what data each variable, object, or array holds at a certain point. This gives us the possibility to find out the errors that are very hard to detect without debugging.

Now, let's move the execution cursor ahead. Right-click in the editor code section and go to Xdebug | Step Into. The cursor will move ahead, and the variables data may change according to the next line. This can be noted in the following screenshot:

Debugging can be stopped by clicking on Tools | Xdebug | Stop Debugging.

Eclipse is the most free and powerful IDE widely used. It supports almost all major programming languages, including PHP. We will discuss how to configure Eclipse to use Xdebug to debug.

First, open the project in Eclipse. Then, click on the down arrow to the right of the small bug icon in the tool bar, as shown in the following screenshot:

After this, click on the Debug Configuration menu, and the following windows will open:

Select PHP Web Application on left panel and then click on the Add New icon in the top-left corner. This will add a new configuration, as shown in the preceding screenshot. Give the configuration a name. Now, we need to add a PHP server to our configuration. Click on the New button on the right-hand side panel, and the following window will open:

We will enter the server name as PHP Server. The server name can be anything as long as it is user-friendly and can be recognized for later use. In the Base URL field, enter the complete URL of the application. Document Root should be the local path of the root of the application. After entering all the valid data, click on the Next button, and we will see the following window:

Select XDebug in the Debugger drop-down list and leave rest of the fields as they are. Click on the Next button, and we will have the path mapping window. It is very important to map the correct local path to the correct remote path. Click on the Add button, and we will have the following window:

Enter the full path to the document root of the application on the remote server. Then, select Path in File System and enter the local path of the application's document root. Click on OK and then click on the Finish button in the path mapping window. Then, click on Finish in the next window to complete adding a PHP server.

Now, our configuration is ready. First, we will add some breakpoints to our PHP file by clicking on the line number bar and a small blue dot will appear there, as shown in the following screenshot. Now, click on the small bug icon on the tool bar, select Debug As, and then click on PHP Web Application. The debug process will start, and a window will be opened in the browser. It will be in the loading state, same as we saw in Sublime Text debugging. Also, the Debug perspective will be opened in Eclipse, as shown here:

When we click on the small (X)= icon in the right-hand side bar, we will see all the variables there. Also, it is possible to edit any variable data, even the element values of any array, object properties, and cookie data. The modified data will be retained for the current debug session.

To step into the next line, we will just press F5, and the execution cursor will be moved to the next line. To step out to the next breakpoint, we will press F6.