Debugging websites with Komodo IDE & Xdebug

The following tutorial describes how to set up an environment for debugging web applications with Komodo IDE and Xdebug (under Mac OS X).

Prerequisites:

• Mac OS X
• MAMP 2.0
• Komodo IDE
• Google Chrome

Configuration:

1. Install Xdebug

   • Your MAMP installation will come with an xdebug.so file by default. Search for it within your installation. In my case it was available at /Applications/MAMP/bin/php/php5.4.10/lib/php/extensions/no-debug-non-zts-20100525/xdebug.so
   • Edit your php.ini file (in my case located at /Applications/MAMP/bin/php/php5.4.10/conf/php.ini). Add the following settings to it:
     

     [xdebug]
     zend_extension="/Applications/MAMP/bin/php/php5.4.10/lib/php/extensions/no-debug-non-zts-20100525/xdebug.so"
     xdebug.remote_autostart=off
     xdebug.remote_enable=1
     xdebug.remote_handler=dbgp
     xdebug.remote_mode=req
     xdebug.remote_host=localhost
     xdebug.remote_port=9000
     xdebug.idekey=komodo

   • Restart your Apache webserver
   • Open a phpinfo() page and check if xdebug is mentioned on there.

2. Configure Komodo IDE

   • Start Komodo IDE and open the Preferences dialog
   • Go to the section "Debugger" and set up as shown in the following screenshots:
     Image may be NSFW.
     Clik here to view.
     Image may be NSFW.
     Clik here to view.

3. Install Xdebug helper in Google Chrome

   • Install the following extension in Google Chrome: https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjb...
   • Set the IDE key to komodo in the Xdebug helper settings.
     Image may be NSFW.
     Clik here to view.

4. Start debugging

   When you point your Google Chrome browser to your web application URL, you will see a bug icon in the address bar. Click it to enable debugging for this page.
   Image may be NSFW.
   Clik here to view.