Actions

Difference between revisions of "Configuring Xdebug for PHP development"

From Joomla! Documentation

m
m (update to all one article)
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
Chose an OS to continue reading.
+
Xdebug is an extension which provides debugging and profiling capabilities, it runs in the server side and send the debugging information to any client capable of receive and read it, for this article we will install Xdebug in our local server and use Eclipse IDE as the client who will receive and interpret the debugging information. With Xdebug you will be able to study the behavior of your code step by step and also inspect the value of the all the variable at every execution step.
  
* [[How to configure Xdebug for PHP development/Linux | Linux]]
+
=Linux OS=
* [[How to configure Xdebug for PHP development/Windows | Windows]]
+
{{:Configuring Xdebug for PHP development/Linux}}
* [[How to configure Xdebug for PHP development/Mac | Mac]]
+
=Windows OS=
 +
{{:Configuring Xdebug for PHP development/Windows}}
 +
=Mac OS=
 +
{{:Configuring Xdebug for PHP development/Mac}}
  
 
[[Category:Development]]
 
[[Category:Development]]

Latest revision as of 08:26, 7 May 2014

Xdebug is an extension which provides debugging and profiling capabilities, it runs in the server side and send the debugging information to any client capable of receive and read it, for this article we will install Xdebug in our local server and use Eclipse IDE as the client who will receive and interpret the debugging information. With Xdebug you will be able to study the behavior of your code step by step and also inspect the value of the all the variable at every execution step.

Contents

Linux OS

Theses instructions should work fine on any Debian based distribution such as Debian, Ubuntu, LinuxMint, Xubuntu, Kbuntu and others.

Installation

There are several ways to download and install Xdebug to your Linux box, you can do it from your software center, terminal or manual download.

Method 1: From a Linux repository

Tip-icon.png
A Tip!

This is the recommended method because you will get updates and security patches automatically.

Option 1: Terminal

  • Open your terminal and type
 sudo apt-get install php5-xdebug 
  • Wait until the installation process finish

Option 2: Software center

  • Open the software center that comes with your distribution
  • Type in the search box "Eclipse IDE"
  • Select "Eclipse IDE" in the search result list
  • Click on the "install" button
  • Wait until installation processes finish

Method 2: From a downloaded copy

  • Visit this page here and download the most recent version available
  • Do a double click on the downloaded file, your package manager should do the rest of the work automatically

http://packages.debian.org/sid/php5-xdebug

Configuring Xdebug

  • Open your terminal and type
 sudo gedit /etc/php5/mods-available/xdebug.ini 
  • if the file is empty try this location
 sudo gedit /etc/php5/conf.d/xdebug.ini 
  • That command should open the text editor with the Xdebug configuration file
  • At the end of the file content append the following text
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost
xdebug.remote_port=9000

  • Save changes and close the editor
  • In you terminal type
sudo service apache2 restart

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

Configuring Eclipse IDE

  • Open Eclipse IDE
  • On Eclipse go to: "Toolbar  Window  Preferences  PHP  Debug"
  • Find the option: "PHP Debugger" and set it to "Xdebug"
  • On Eclipse go to: "Toolbar  Window  Preferences  PHP  Debug  Installed Debugger"
  • 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:

  1. You understand the Eclipse IDE concepts of "workspace" and "projects", if not, pleas read this article Configuring Eclipse IDE for PHP development/Linux#Understanding the folder structure
  2. You already have a working web server if not, pleas read this article. Configuring a LAMPP server for PHP development/Linux desktop
  3. Your Eclipse workspace is located at the server's web root folder.

Configuring the workspace

  • If your current workspace is located at your server's web root skip this part
  • Open Eclipse IDE
  • On Eclipse go to: "Toolbar  File  Switch workspace  Other"
  • Press the button "browse" and browse the location of your server's web root folder, i.e. "/home/youruser/lamp/public_html/"
  • 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
  • Place the following content to that file:
<?php
    $X = 5;
    $X = 8;
    $Y = 2;
    $Z = $X + $Y;
    $Z = $Z + 1;
    echo "Z value is: " . $Z;
?>
Z value is: 11

Configuring the test project debug information

  • On Eclipse go to: "Toolbar  Run  Debug configuration..."
  • On the left list find "PHP Web Application" and do a double click on it to create a new configuration element
  • Select the new configuration element to display it content
  • Set the name to "xdebug-test" or anything you like
  • Make sure the option "Server debugger" is set to "Xdebug"
  • Make sure the option "Break at first Line" is not checked
  • In the option "File" press the button "Browse", find your project "xdebug-test" and expand it content, then find and select the file "index.php"
  • Make sure that option URL looks something like this "http://localhost/xdebug-test/index.php"
  • Press "Apply" and "Close" to save changes and continue

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

Windows OS

Quill icon.png
Content is Incomplete

This article or section is incomplete, which means it may be lacking information. You are welcome to assist in its completion by editing it as well. If this article or section has not been edited in several days, please consider helping complete the content.
This article was last edited by Tom Hutchison (talk| contribs) 6 months ago. (Purge)

Configuring Xdebug is split into two parts:

Serverside (extension in PHP)

Installation

First check if this extension is already installed. Create a new file with the content <?php phpinfo(); ?>, save it in your webfolder (f.e. C:\xampp\htdocs\phpinfo.php) and call it using your browser (f.e. http://localhost/phpinfo.php). The command PHPINFO will show you all information about installed plugins, their configuration and so on. If you see a headline called Xdebug, it is already downloaded and enabled.

To get the extension for a Windows-System, you have to download the DLL-file from http://xdebug.org/download.php that fit's to your PHP version, move it into the ext folder of your PHP-installation. If the file php_xdebug.dll exists, leave it there. It's most likely the right version, just that it's not enabled. This was f.e. the case for the last XAMPP package I used.

Enable Xdebug

On windows-systems you most likely just have one php.ini file for all configuration whereas on several Linux distributions you have a directory called conf.d in addition. If you have installed Xdebug on a Linux based system, you'll probably find a file xdebug.ini in there. Use this file instead if you have it (just not to mess-up the main config-file).

You enable the plugin by adding (or uncommenting) the following line to your config-file:

; Example for XAMPP
zend_extension = "\xampp\php\ext\php_xdebug.dll"
 
; Example on Mac OS X for XAMPP
zend_extension="/Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so"

Please make sure you use zend_extension instead of extension which (not as extension) requires the full path to the extension-file.

Configuration

Please also read this introduction for configuration-details: http://xdebug.org/docs/remote

Here is an example of the configuration I use and some comments around that:

; location of my configuration-file
zend_extension=/usr/lib/php5/20090626/xdebug.so
 
; Enables colors if you use xdebug on the console
xdebug.cli_color=1
 
; Enable profiler by a trigger (f.e. cookie or GET-param)
xdebug.profiler_enable_trigger=1
xdebug.profiler_output_dir=/var/www/log/
 
; Debugger will try to connect back to the machine sending the HTTP-Request
xdebug.remote_connect_back=1
 
; Enables the debugger
xdebug.remote_enable=1

Clientside (configure your IDE)

If your IDE is not listed on http://xdebug.org/docs/remote#clients, you'll probably find a tutorial in the manual of your IDE. Feel free to add helpful tutorials here.

Mac OS

Configuring Xdebug with MAMP

Prerequisites

These instructions are for Mac OS X (actually tested on version 10.9.2 Mavericks) with installed MAMP Application (actually tested on MAMP version 3.0.4).

Configuration instructions

  • Open finder and navigate to
 /Applications/MAMP/conf/<selected php version>/ 

(NOTE: <selected php version> is the php version that you have selected in the MAMP configuration)

  • Open the file php.ini with a text editor like e.g. TextWrangler
  • Find the section [xdebug]
  • Uncomment the line
[xdebug]
;zend_extension="/Applications/MAMP/bin/php/<selected php version>/lib/php/extensions/no-debug-non-zts-20121212/xdebug.so"

by removing the ; character at the beginning of the line

  • Add after the line the following text, if not already existing
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost
xdebug.remote_port=9000

  • Save changes and close the editor
  • Restart your MAMP Server

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