In the list make sure the port the "Xdebug" option is set to the value "9000"

Save changes

Note: You can set a different port number if you need to.

When you debug a PHP project Xdebug stops the code execution of the current page and Eclipse IDE by default pops out a perspective with 2 views containing the internal Eclipse IDE web browser and the a view with the current HTML output, if you don't like the internal web browser you can use any other external web browser you got installed in your computer, such as gogle chrome, chromium, firefox, etc... don't even try IE, just kidding :p .

To set up a different web browser follow these steps if you are OK with the Eclipse internal browser skip this part:

On Eclipse go to: "Toolbar,Window,Preferences,General,Web Browser"

Make sure the option "Use external browser" is selected

If your preferred browser is on the list, select it and save changes and skip the rest of this part

If your preferred browser is not on the list press the button "New"

Set a name for your new browser i.e. "chrome"

Set the location of your new browser i.e. "/usr/bin/google-chrome"

If you don't know the location of the browser open a terminal and use the command "whereis browsername" to display the browser location. Note: Replace browsername with the name of your preferred browser i.e. "whereis google-chrome" copy one of the locations if there is more than one

Save all changes

Testing Xdebug and Eclipse IDE

To test our brand new debugging tool we need to create an Eclipse PHP project, set the debug configuration for our project and write some few lines of PHP code. This example assumes 3 things:

Press "OK" and wait until Eclipse IDE restarts and load the new workspace

Configuring the test project

On Eclipse go to: "Toolbar→File→New→Other→PHP→PHP Project"

Set the project name to "xdebug-test" or anything you like

Press "Ok" to continue

After this Eclipse IDE will automatically create a project folder like this "/home/youruser/lamp/public_html/xdebug-test/", also you should be able to visualize the new project at the Eclipse IDE Project Explorer view or Navigation view

On Eclipse go to: "Toolbar→File→New→Other→PHP→PHP File"

Set the file name to "index.php"

Press "Ok" to continue

After this Eclipse IDE will automatically create a PHP file like this "/home/youruser/lamp/public_html/xdebug-test/index.php", also you should be able to visualize the new file at the Eclipse IDE Project Explorer view or Navigation view

Find the new "index.php" file at the Eclipse IDE project explorer and open it doing double click on it

Debugging the test project

As you can see our "index.php" file have several lines of code, with the debugger we can study how those lines of code that are being executed one by one, but to stop the execution we need to set something called "Breakpoint", a Breakpoint is a "mark" in our lines of code that indicate to the debugger to stop the execution and poll the var values. To set a Breakpoint on our code and test the debugger follow this simple steps.

Open the "index.php" of our test project

Locate the line of code "$X = 8;" and do a click on it to place the blinking cursor there

On Eclipse go to: "Toolbar→Run→Toggle Breakpoint", you can also used the hotkey "shift+ctrl+B" or simply do a double click on the line number of the line of code at the very left side of your editor to toggle a Breakpoint

When a Breakpoint is set you should see it represented as a little circle next to the line number at the very left side of your editor

Now is time to execute our project to see how the debugger help us to debug the code.

On Eclipse go to: "Toolbar→Run→Debug", you can also used the hotkey "F11" or simply do a click in the "little bug icon" located at the second toolbar from the top

Automatically Eclipse will open the configured web browser, and also change to the "Debug perspective", the debug perspective contains a set of pre-configured views useful to do debugging tasks, among them we got:

Debug view: It display buttons to control the current running debug session and also this view contains the current call stack

Breakpoint view: display all the your set breakpoints on any project file

Variables view: Is is basically a "var dump" of all the PHP variables of your actual session, it view let you easily navigate throw any variable and child members of those variables.

Expressions view: there you can set custom expressions i.e. "$X+$Y+$Z" and see the outcome of each expression without changing the code at all.

Internal browser view and output view: optional if you not configured an external browser Eclipse IDE will display this view with the current page and the current page HTML output

At this point our web page should look stopped and most likely the browser will show a blank page "waiting" to load the rest of it

Note that the current breakpoint have a "little arrow" over the circle and the line of code if highlighted, this indicated what is the next line of code to be executed, also know as the "current step"

If you take a look at the "variables view" the current value of "$X" should be "5"

Go to the "Debug view" and press the button "step over" or use the hotkey "F6" to go one step forward in the code execution

Take another look at the "variables view" the current value of "$X" should be now "8"

This way you can neatly study how your code and values changes step by step, you can also hover your mouse pointer over the variables names in the editor Eclipse IDE will pop up the current value of them.

Keep going froward until the end of the lines of code, at that point the web browser should display the final web page output