Recently in Other Category

Getting this configured is simple enough, once you read 10,000 web pages. MAMP 2.0.5 ships with xdebug installed, but in my experience it does not work - at least, it does not work for me, on my 2.66 Ghz MacBook Pro 17”, running OS X 10.7.3. Internet research seems to indicate that this may be a 32bit vs 64bit problem.

So, here’s what I did to make it work:

First - Don’t use the MAMP built-in xdebug.so file. In your MAMP php.ini file there’s this line:

zend_extension="/Applications/MAMP/bin/php5.3/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so"

Replace it with this line:

zend_extension="/usr/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so"

OS X ships with a working version of xdebug - that’s what we’re using here.

Second - don’t use Chrome. At least for me, Chrome (I’m using the beta channel, so that may be part of the issue), does not work with the PHPStorm debugger - breakpoints are never triggered. Firefox (beta as well) works fine.

With the above two constraints, you can then follow the PHPStorm documentation on creating a zero-configuration debugging environment (basically, create a “PHP Web Application” debugging configuration), and everything will work correctly. In my case, I’m calling PHP code via XHR from an ExtJS front-end - PHP breakpoints work perfectly, I can step through code, examine variables, etc etc.

When installing Ubuntu 11 under VMWare Fusion it’s likely that the new Ubuntu “Unity” interface will not be enabled - you’ll just get some brief message during the install process or boot that the hardware doesn’t support it. I’m not 100% certain that this is a universal fix, but in my case using the “Additional Drivers” option under the “Administration” menu fixed the problem:

In the above image the “VMWare Client Tools” driver has been installed. When the “Additional Drivers” was initially displayed it was not - once it was installed I just restarted the Ubuntu VM and Unity started working.

There’s a customized version of Firebug available called Widerbug that changes the Firebug layout to look like this:

Unfortunately Widerbug is not updated as frequently as Firebug, so if you want to use the most recent versions of Firebug you’re out of luck.

To solve this issue I used FileMerge to compare Widerbug with a stock release of Firebug, and came up with the following list of required changes: (UPDATE: It turns out that in the Widerbug xpi there’s a text file “instructions.txt” that details these steps as well… ha! Note that the steps described in the Widerbug “instructions.txt” are slightly more complex than mine, as they involve changing some Firebug artwork, the update URL, and signing the XPI.)

Anyway, here are my changes for Firebug 1.5.0. We edit the relevant files in-place, after Firebug has been installed. First you need to open the Firefox “Profiles” directory, which on OS X is located at ~/Library/Application Support/Firefox/Profiles - open the appropriate profile, then look for the “extensions” directory, and inside that is the “firebug@software.joehewitt.com” directory. Make the following edits:

1) content/firebug/browserOverlay.xul

Replace this:

    <vbox id="appcontent">
        <splitter id="fbContentSplitter" collapsed="true"/>
        <vbox id="fbContentBox" collapsed="true" persist="height"></vbox>
    </vbox>

With this:

    <hbox id="browser">
        <splitter id="fbContentSplitter"/>
        <vbox id="fbContentBox" flex="1" collapsed="true" persist="width"/>
    </hbox>

2) content/firebug/firebugOverlay.xul

Change line 141 from

    <box id="fbPanelPane" flex="1" persist="orient">

to

    <vbox id="fbPanelPane" flex="1" persist="orient">

and change line 276, the corresponding closing tag, from

    </box>

to

    </vbox>

3) content/firebug/firebug.css

Insert this:

    #fbToolbox {
        border-top-width: 0px;
        border-top-style: none;
    }

Before this:

    /************************************************************************************************/
    panelTabMenu {
        -moz-binding: url("chrome://firebug/content/bindings.xml#panelTabMenu");
    }

4) skin/classic/mac/firebug.css

Replace this:

    #fbContentSplitter {
        border-top: 1px solid #BBB9BA;
        border-bottom: none;
        background: #f3f3f3 !important;
        min-height: 3px;
        max-height: 3px;
    }

With this:

    #fbContentSplitter {
        border-left: 1px solid #BBB9BA;
        border-right: 1px solid #BBB9BA;
        background: #f3f3f3 !important;
        min-width: 5px;
        max-width: 5px;
    }

4) skin/classic/win/firebug.css

Replace this:

    #fbContentSplitter {
        border-top: 1px solid !important;
        -moz-border-top-colors: threedShadow !important;
        border-bottom: 1px solid !important;
        -moz-border-bottom-colors: #EEEEEE !important;
        min-height: 3px;
        max-height: 3px;
        background-color: #FFFFFF;
    }

With this:

    #fbContentSplitter {
        border-left: 1px solid !important;
        -moz-border-left-colors: threedShadow !important;
        border-right: 1px solid !important;
        -moz-border-right-colors: threedShadow !important;
        min-width: 3px;
        max-width: 3px;
        background-color: #d4d0c8;
    }

NOTE: The next time you update Firebug these changes will - of course - be overridden by the new version. So it’s pretty ugly, but it works.