Debug Joomla PHP With Eclipse and XAMPP on Windows

The purpose of this Instructable is to setup a freeware XAMPP webserver on Windows, install a Joomla! Content Management System and finally debug PHP scripts with Eclipse.

A Linux Ubuntu Instructable with LAMP is located here.

You'll get a quick installation guide in 9 detailed steps. At the end of this Instructable, you're ready to debug your own website. Only freeware software will be used.

Question: Do you need a PHP debugger?
Answer: When you're developing websites in PHP, then the answer is YES.

A debugger can save you a lot of time to find bugs in your PHP scripts, such as Joomla! components, modules or plugins. It allows you to step through the code, set breakpoints, watch variables and many more.

Prerequisites:

• A clean Windows 7 installation or higher.
• At least 1GB free disk space.
• Internet connection

Steps:

1. Download and install XAMPP
2. Test the webserver
3. Install XDebug
4. Download and install Joomla
5. Test Joomla installation
6. Download and install Java
7. Download and configure Eclipse
8. Create a new PHP project with Eclipse
9. Basic Eclipse debugging

I could not find good tutorials on the web, so I decided to share my experiences with you, step by step. The first step is to setup a free XAMPP web server which stands for: X=Cross-Platform, Apache, MariaDB, PHP and Perl.

Let's continue and have fun! :-)

1. Download XAMPP for Windows with PHP 7 from: https://www.apachefriends.org/download.htm
2. Double click on xampp-win32-7.0.8-0-VC14-installer.exe to start the installation.
3. Click Next.
4. Select components: Apache, MySQL and optionally phpmyadmin.
5. Keep the default installation directory: C:\xampp
6. Click Next.
7. Click Finish.
8. Choose your language (in my case English).

The web server will be tested in the next step.

• You can start the XAMPP control panel from the Start menu, or double click C:\xampp\xampp-control.exe.

• Click the Apache and MySQL Start buttons in the XAMPP control panel. The Apache and MySQL modules should be marked green when successfully started.

• Open a web browser at: http://localhost.
  The web pages hould display: "XAMPP Apache + MariaDB + PHP + Perl".

Next step is to install XDebug which is used by Eclipse. This is a PHP extension which provides debugging and profiling capabilities.

The right XDebug version should be downloaded which is created for only one PHP version. A wizard helps you to generate a download link:

• Click the Shell button to open a command prompt and type:

# php -i > phpversion.txt

• Open C:\xampp\phpversion.txt in a text editor.
• Select all text and copy it (CTRL+C).

• Open https://xdebug.org/wizard.php to find out which xdebug version.
• Paste the contents and click the Analyze my phpinfo() output button.
  A download link is generated with the right XDebug version for XAMPP.

• Download php_xdebug-2.4.1-7.0-vc14.dll
• Move the downloaded file to C:\xampp\php\ext
• Edit C:\xampp\php\php.ini and add the lines:

[Xdebug]
zend_extension = C:\xampp\php\ext\php_xdebug-2.4.1-7.0-vc14.dll
xdebug.remote_enable=1
xdebug.remote_port=9000

Restart Apache:

• Click the Apache Stop button.
• Click the Apache Start button.

Create a new text file in C:\xampp\htdocs\info.php and add the following lines:

<? php phpinfo(); ?>

Now open a web browser at http://localhost/info.php.
A new xdebug configuration should be displayed. (See screenshot)

Now you're ready to install Joomla!.

• Download Joomla! from https://www.joomla.org/download.html.
  In my case, it is saved to Downloads/Joomla_3.6.2-Stable-Full_Package.zip.

• Extract the zip file in the C:\xampp\htdocs directory and overwrite existing files.

Open http://localhost in a web browser to start the Joomla installation.

Set Main Configuration:

• Site Name: Joomla
• Description Administrator: A description.
• Email Administrator: your@email.com
• Username Administrator: root
• Password: secret
• Confirm Administrator Password: secret

Click Next

Set Database Configuration:

• Database Type: MySQLi
• Host Name: localhost
• Username: root
• Password: secret
• Database Name: joomla
• Table Prefix: jos_
• Database Process: Remove

Click Next

Finalization:

• Make sure Pre-Installation Check column is green.
• Click Install.

Congratulations! Joomla! is now installed.

Click "Remove installation folder".

Open http://localhost in a web browser.
Login with your user name and password.

Open http://localhost/administrator to login in the back-end for administrative purposes.

Java is required to run Eclipse.

Download Java SE Development Kit 8u101 for Windows 32-bit or 64-bit from:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Start the Java Installation by double clicking jdk-8u101-windows-x64.exe.
Click 3x Next > Close.

Check the Java installation by opening a Shell and type:

# java -version
java version "1.8.0_101"
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.101-b13, mixed mode)

Download Eclipse PDT (PHP Development Tools) from:
https://eclipse.org/pdt/#download > Download 32 bit or 64 bit version.

Extract the eclipse-php-neon-R-win32-x86_64.zip file.

Double click on Downloads\eclipse\eclipse.exe to start Eclipse.

Accept default workspace and click OK.

Allow eclipse.exe to the Windows Firewall when a window pops up.

Close the Welcome tab (by clicking the X).

Click in the toolbar Window > Preferences:

• Click PHP > Interpreter: This should be set to your PHP version.
• Click PHP > PHP Executables > Add:
  • PHP executable tab: Name: PHP
  • Executable path: C:\xampp\php\php.exe
  • PHP ini file (optional): C:\xampp\php\php.ini
  • SAPI type: CLI
  • Click Next:
    • Debugger: XDebug
    • Port: 9000
  • Click Finish.

Click General > Web Browser:

• Select: Use external web browser.
• Check: Default system web browser. (Or choose another one)
• Click OK.

Now we're ready to create and configure a new PHP project and use existing Joomla! sources.

Click in the toolbar: File > New > PHP project:

• Project name: joomla
• Check: Create project at existing location (from existing source)
• Directory: C:\xampp\htdocs

Click Finish.

Click in the toolbar Window > Preferences > Servers >
Select Default PHP Web Server > click Edit:

• Click Server tab:
  • Server Name: Default PHP Web Server
  • Base URL: http://localhost
  • Document Root: C:\xampp\htdocs
• Click Debugger tab:
  • Debugger: XDebug
  • Port: 9000
• Click PathMapping tab > click Add:
  • Path on Server: http://localhost
  • Path in File System: C:\xampp\htdocs
• Click OK > Finish > OK.

Let's continue to debug your fist Joomla! PHP project!

Now you're ready to start debugging.

1. Expand the joomla project directory.
2. Double click index.php to open it in the editor.
3. Set a breakpoint on line 12 (left of the line number).
4. Click in the toolbar debug button (small down arrow) >
   Debug As > PHP Web Application.
5. Next time you can click the Debug button in the toolbar instead.
6. Set Launch URL to: http://localhost/index.php > click OK.

You'll be asked to switch to Debug perspective. Answer with Yes. You can switch back to PHP project perspective by clicking the small PHP button in the upper right corner.

Your default web browser such as Firefox will be opened at: http://localhost/index.php. You can change this for example to Chrome in the Preferences dialog box > General > Web Browser.

The web browser displays a blank white page, because the breakpoint in Eclipse should be reached on index.php line 12.

Now you should be able to step through the code with shortcuts:

• [F5] Step into
• [F6] Step over
• [F7] Step return (or out)
• [F8] Resume (or continue)

Now press 3x [F6].

The $startTime variable is displayed in the Variables tab. Hover over the variable to see the contents of the variable.

Press [F8] to resume. The entire website is now displayed in your web browser.

Refresh your web page in the web browser to reload the page. The breakpoint in index.php line 12 is reached again.

Notes:

• Use the debug button to start a debug session once.
• Use the terminate button [CTRL]+[F2] to stop the debugger.

Congratulations! Now you're completely up and running when you reached this final step.

Feedback is welcome. Please leave a message when this tutorial was helpful for you.

Thanks!