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: Komodo debugger preferences
      Komodo debugger preferences

     

  3. Install Xdebug helper in Google Chrome

     

     

  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.
    Xdebug helper icon