How To Remote Debug PHP Web Apps In NetBeans On Windows

By bhagwatchouhan
How To Remote Debug PHP Web Apps In NetBeans On Windows

In the previous tutorials, we have discussed the steps required to install WampServer, PHP 7 or PHP 8, and NetBeans 11 or NetBeans 12. We have also discussed the steps required to debug PHP programs in CLI mode as listed below.

In this tutorial, we will discuss all the steps required to remotely debug existing PHP web applications using Xdebug, NetBeans and WampServer installed on localhost. The steps should be similar to debug a remote server installed on another system or Virtual Machine (VM). Make sure that the debug port i.e. 9000 is open on the remote server.

A web application must be available within the www directory of the WampServer or Apache Web Server. You also need an FTP Server running on port 21 to complete this tutorial with a valid user having access to the web application directory. The FileZilla Server For Windows is used for this tutorial.

 

Create Remote Project

The very first step is to create a Remote Project in order to link NetBeans with an existing Remote Project i.e. the web application within the www directory of the WampServer or Apache Web Server. Click on File -> New Project or press Ctrl + Shift + N to create a project in NetBeans. It will show the New Project wizard as shown in Fig 1.

Create Project Wizard

Fig 1

Also, select PHP under categories and PHP Application from Remote Server as the Project Option as shown in Fig 1. Click on the Next Button to navigate to the Name and Location step. It will show the Name and Location wizard as shown in Fig 2.

Project Name & Location

Fig 2

Provide the Project Name and Sources Folder based on your project needs. Also, select the appropriate PHP version matching with the version enabled in WampServer. Click the Next Button to configure the Remote Connection.

Remote Connection

Fig 3

Specify the Project URL leaving Upload Directory blank as shown in Fig 3. We will be connecting to the root of the web application. Now click on the Manage Button in order to specify a Remote Connection. It will show Create New Connection dialog as shown in Fig 4.

Create New Connection

Fig 4

Before moving ahead, make sure that a web application already exists and the appropriate FTP user has permission to read, write, and delete the files and directories as shown in Fig 5 for the FileZilla Server.

FileZilla User

Fig 5

Specify the Connection Name and also choose Connection Type as shown in Fig 4. Click on the OK Button of Create New Connection Panel to confirm the connection name and type. The next wizard shows options to configure the FTP user details with the initial directory as shown in Fig 6.

Configure FTP User

Fig 6

After configuring the FTP user, click the Test Connection Button to test the FTP connection. It must show the success dialog as shown in Fig 7.

Test Connection

Fig 7

Click the OK Button to close the connection dialog. It must show the FTP location i.e. the root directory of the FTP user as highlighted in Fig 8.

FTP Test

Fig 8

Now click the Next Button to import the remote project files to the project created by NetBeans.

Import Remote Files

Fig 9

I have placed an empty index.php file to the web application directory which is also the root directory of the FTP user. Accordingly, NetBeans is showing the files available within the web application directory as shown in Fig 9. Now keep the files selected and click on the Finish Button to import remote project files to the NetBeans project.

So far, we have connected NetBeans to a remote web project using a valid FTP user having appropriate permissions to the project root directory on the remote server. A successful import should look like the one as shown in Fig 10.

FTP Import

Fig 10

 

Update Remote Project

I have updated the index.php file having the same program as discussed in the previous tutorial to debug PHP in CLI mode. I have also created a breakpoint at line number 6 as shown in Fig 11.

Program To Debug

Fig 11

 

Execute Remote Project

Now, right-click the index.php file and click on the Run Option or press Shift + F6 to execute the program. It will open the browser and shows the output as shown in Fig 12.

Run The Program

Fig 12

 

Debug Remote Project

Now, right-click on the index.php file and click on the Debug Option or press Ctrl + Shift + F5 to start the debug session. It will open the browser and shows the blank screen without executing the program since the debugger will pause at the first line of the program as shown in Fig 13.

Note that the URL of the blank screen in debug mode is set to http://localhost/rdebug/index.php?XDEBUG_SESSION_START=netbeans-xdebug having the debug session associated with it.

Debug The Program

Fig 13

Click the Continue Button and the debugger will pause at line number 6 having the next breakpoint as shown in Fig 14.

Continue Debugging

Fig 14

Now again press the Continue Button and the first iteration of the for loop will execute. The debug pointer will again stop at line number 6 i.e. the next breakpoint as shown in Fig 15. Similarly, we can use the other options including Step Into, Step Over, Step Out, and Run to Cursor to find the issues in the code.

First Iteration

Fig 15

Note that the value of $i is changed on the variables stack. In case we are sure that the issue is identified, we can remove the breakpoint and again press the Continue Button to complete the execution. The browser will halt until the execution completes and shows the output at the end.

This is how we can remotely debug a PHP web application using NetBeans and Xdebug by connecting to the project and downloading the remote code to the local project. We can make changes to the local project which will be synced with the remote project by NetBeans in order to reflect the changes on the remote web application.

 

Summary

This tutorial provided the reference links to install WampServer, PHP 7 or PHP 8, and NetBeans 11 or NetBeans 12. It provided all the steps required to remotely debug a PHP project using the NetBeans IDE.

Share this blog:

Profile picture for user bhagwatchouhan
bhagwatchouhan