Mon

16

Mar '09

Restyling Xdebug output

The default output from Xdebug is a bit gaudy and not very nice from a design point of view (but as the output should never be seen on a production server it’s hardly a criticism of Xdebug, I’m just a bit picky…), so I whipped up a quick bit of Jquery+CSS to restyle it on a per-page basis.

Standard output:

How to change the output

Add this Jquery snippet to of each page you want to affect the style of the output:

$(document).ready(function() {

	//-------------------------------
	// add styling hooks to any XDEBUG output
	$('font>table').addClass('xdebug-error');
	$('font>table *').removeAttr('style').removeAttr('bgcolor');
	$('font>table tr:first-child').addClass('xdebug-error_description');
	$('font>table tr:nth-child(2)').addClass('xdebug-error_callStack');
}

Add this CSS to your stylesheet:

/* !XDEBUG beautifying */

.xdebug-error {
	font-size: 12px;
	width: 95%;
	margin: 0 auto 10px auto;
	border-color: #666;
	background: #ddd;
}

.xdebug-error th, .xdebug-error td {
	padding: 2px;
}

.xdebug-error th {
	background: #ccc;
}

.xdebug-error td {
	/* background: #fee; */
}

.xdebug-error span {
	display: none;
}

.xdebug-error_description th {
	font-size: 1.2em;
	padding: 20px 4px 20px 100px;
	background: url(../images/xdebug-logo.gif) #ccc no-repeat left top;
}

.xdebug-error_callStack th {
	background: #666;
	color: #ddd;
}

all this will give you the new output, styled according to the CSS above (which of course you can change to your hearts content):

Notes

I’ve used a Xdebug logo for my re-styling, I’ve not included it as a download as it isn’t mine to redistribute – you could make one of your own or use some other graphic (or just take out the ‘background: ‘ style on the ‘.xdebug-error_description th’ selector in the CSS.

The restyling will only work on warnings and errors which render output and add an Xdebug block to them – fatal errors only display the Xdebug output and not the page so the Jquery is never loaded to change the style. The only way to re-style every Xdebug error, including fatal errors, would be to change the markup Xdebug generates (change the code in the file xdebug.c and re-compile the extension).

The Xdebug output generated by the extension doesn’t have any classes or id’s, uses some deprecated tags (<font>) and inline-styles, the restyling works by adding the class ‘xdebug-error’ the the table generated by Xdebug (by searching for a <table> which is child of a <font> – as we shouldn’t be using the deprecated <font> tag it should be pretty safe), removing the inline-styles and background colours and adding a couple of classes to allow more specific styling of the output.

Output generated by Xdebug by default:

<font size='1'><table dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f;
font-size: x-large;'>( ! )</span>
Warning: include(test) [<a href='function.include'>function.include</a>]: failed to open stream: Connection refused in ... on line <i>2</i>
</th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th>
<th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th>
<th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0012</td>
<td bgcolor='#eeeeec' align='right'>161344</td><td bgcolor='#eeeeec'>{main}(  )</td>
<td title='/Users/jameswelford/Sites/hydra/index.php' bgcolor='#eeeeec'>../index.php<b>:</b>0</td></tr>
</table></font>

Output after Jquery has done it’s work:

<font size="1"><table class="xdebug-error" dir="ltr" border="1" cellpadding="1" cellspacing="0">
<tbody><tr class="xdebug-error_description"><th colspan="5" align="left"><span>( ! )</span> Warning: include(test)
[<a href="function.include">function.include</a>]: failed to open stream: Connection refused in ... on line <i>2</i></th></tr>
<tr class="xdebug-error_callStack"><th colspan="5" align="left">Call Stack</th></tr>
<tr><th align="center">#</th><th align="left">Time</th><th align="left">Memory</th><th align="left">
Function</th><th align="left">Location</th></tr>
<tr><td align="center">1</td><td align="center">0.0011</td><td align="right">161696</td><td>{main}(  )</td>
<td title="/Users/jameswelford/Sites/hydra/index.php">../index.php<b>:</b>0</td></tr>
</tbody></table></font>

0 Comments

Leave your comment

Please keep all comments and opinions polite and on topic. Consider signing up for a Gravatar (Globally Recognized Avatar) to make the web a more personable place. Your email address is required to post, but it won't be displayed to anyone else.

your comment