Monday, March 16, 2009

How to debug Typo3 files - How to set up Typo3 with Xdebug, Xampp and phpDesigner2008

PROBLEM: how can we debug php files of typo3 installations? How can we debug the extensions we are working on to fix bugs?

SOLUTION: We used Xdebug, phpDesigner 2008 as IDE, SVN. Have a look at this tutorial!


In this tutorial we are going to set up debugging of Typo3 with a php editor like phpDesigner 2008 in Windows XP environment.

Pre-requisites:
  • A local copy of the typo3 installation (located into the apache web root; in Xampp we have it under the htdocs folder)
  • Xampp
  • PhpDesigner 2008.
Steps for installing and configuring Apache, Xampp and Xdebug:

  1. Download XAMPP at http://www.apachefriends.org/en/xampp-windows.html
    Click on the saved file and an icon will ask where to extract the files; extract them to c:\Program Files.
  2. The system will save the files into the C:\Program Files\xampp.
    Open the folder and click the setup_xampp.bat; this will configure all files to work correctly in your system like the php.ini needed by apache web server.
  3. Download the Xdebug dll located in http://www.xdebug.org/download.php; the version you have to install is the 5.2 VC6 that will work fine with the latetest release of Xampp (In this guide we refer to Xampp Windows version 1.7.0)
    Save the dll file into the folder C:\Program Files\xampp\php\ext\
  4. Go into the C:\Program Files\xampp\php folder
    We need to modify here the php.ini in this way:
    - In the [Zend] section comment all the lines putting a ; at the line beginning
    - In the [Xdebug] section you must have this lines:
    zend_extension_ts="C:\Program Files\xampp\php\ext\php_xdebug-2.0.4-5.2.8.dll"
    xdebug.remote_enable=true
    xdebug.remote_host=127.0.0.1
    xdebug.remote_port=9000
    xdebug.remote_handler=dbgp
    xdebug.profiler_enable=1
    xdebug.profiler_output_dir="C:\Program Files\xampp\tmp"

  5. Copy and paste the C:\Program Files\xampp\php\php.ini into C:\Program Files\xampp\apache\bin (overwriting the existing php.ini)

  6. Open the C:\Program Files\xampp\xampp-control.exe and a tray icon will appear by which we can control xampp services like mysql and apache. To verify Xampp is working fine open a browser like Firefox and type http://localhost/xampp/; if installation goes fine you should see the xampp welcome page.
  7. Go in C:\Program Files\xampp\htdocs and move all existing files in another folder: you can perform this creating a new temporary folder under htdocs named /temp and cut and paste the files under /htdocs into /htdocs/temp.

  8. Copy online Typo3 installation into C:\Program Files\xampp\htdocs. If you use SVN or a CVS, perform a checkout of the typo3 repository.

Steps for setting up Firefox:
  1. Download Firefox add-on located in https://addons.mozilla.org/en-US/firefox/addon/3960
  2. Once the installation is finished, in Firefox go to the menu Tools -> Add-ons and select the Options button under Xdebug Helper addon to access the setup page.
  3. In the first text box of the add-on be sure these lines are present:
    zend_extension_ts=php_xdebug.dll
    xdebug.remote_enable=1
    xdebug.remote_handler=dbgp
    xdebug.remote_mode=req
    xdebug.idekey=default

  4. In the second text box insert phpDesigner2008. This key represents the Xdebug idekey value that allows firefox understanding which integrated development environment (IDE) we will use to start the debug mode (users can install also Eclipse, Netbeans, etc.)

  5. The extension will insert an icon in the status bar: clicking on it the linkage with Xdebug will be active or disabled.
    If the icon is green firefox will run pages in debug mode.

Steps to configure the IDE phpDesigner2008:

  1. Create the project selecting the folder C:\Program Files\xampp\htdocs; phpDesigner will import all files located under the htdocs folder.

  2. Open the menu Tools -> Preferences

  3. Select Debugger and in the PHP panel insert C:\Program Files\xampp\php\php-cgi.exe, under the Configuration panel insert C:\Program Files\xampp\php\php.ini
  4. Select Run (under debugger) and under the php panel write C:\Program Files\xampp\php\php-cgi.exe and under configuration panel insert C:\Program Files\xampp\php\php.ini

  5. Select localhost (under debugger) and under Server path write http://localhost while in Local Server Path write C:\Program Files\xampp\htdocs; the port must be the 80.

If all settings are written correctly when you open a page from Firefox like http://localhost/index.php with the "debug mode" activated (see Xdebug helper icon), Firefox will interact with your IDE. In the IDE you can insert breakpoints and Firefox will allow your debugginh the php files of your typo3 installation.

2 comments:

Marco Raven said...

Nice overview.
One remark though: it works best with XAMPP version 1.7.1.
The php.ini settings in 1.7.2 are different - and Typo3 version 4.2.8 doesn't work correctly with PHP5.3 (in XAMPP 1.7.2).

Massimo said...

Ok, thank you for your comment.