Making Xdebug Pretty Not Ugly

Xdebug is an essential development tool for me, but, to be blunt, the default output style is kind of hideous. I looked for a way to customize it through xdebug.ini, but there doesn’t appear to be one.

You can, however, use a browser extension like Stylish Stylus (FireFox) or Stylebot (Chrome) to override the default styles with CSS.

.xdebug-error {
    width: 97%;
    margin: 10px auto;
    border-collapse: collapse;
    border-right: 1px #5b5440 solid;
    border-left: 1px #5b5440 solid;
}

.xdebug-error th,
.xdebug-error td {
    padding: 4px 6px 3px 5px;
    border-top: 1px #5b5440 solid;
    border-bottom: 1px #5b5440 solid;
    border-left: none;
    border-right: none;
}

    .xdebug-error th:first-child {
       padding-top: 0;
    }

.xdebug-error th {
    background-color: #E4DBBF;
    color: #383127;
}

.xdebug-error td {
    background-color: #fff;
}

.xdebug-error span {
    background-color: inherit !important;
    color: #DC5B21 !important;
}

That will come out looking this:

alternate-xdebug-color-scheme

I’m sure a designer could make it much better than that, but it’s good enough for me, for now. If anyone out there comes up with a better color scheme, I’d love to see it; please post it in the comments.

 

Update: Here’s a new style based off the She Is French, Yes? color pallete from Colour Lovers.

.xdebug-error {
    width: 97%;
    margin: 10px auto;
    border-collapse: collapse;
    border-right: 1px #5b5440 solid;
    border-left: 1px #5b5440 solid;
}

.xdebug-error th,
.xdebug-error td {
    padding: 4px 6px 3px 5px;
    border-left: none;
    border-right: none;
}

    .xdebug-error th:first-child {
       padding-top: 0;
    }

.xdebug-error th {
    background-color: #3E4147;
    color: #DFBA69;
}

.xdebug-error td {
    background-color: #FFFEDF;
    border-top: 1px #5b5440 solid;
    border-bottom: #DFBA69;
}

.xdebug-error span {
    background-color: inherit !important;
    color: #ce5c00 !important;
}

…and another based off metro. I think this one is my favorite.

.xdebug-error {
    width: 97%;
    margin: 10px auto;
    border-collapse: collapse;
    border-right: 1px #5b5440 solid;
    border-left: 1px #5b5440 solid;
}

.xdebug-error th,
.xdebug-error td {
    padding: 6px 6px 5px 5px;
    border-left: none;
    border-right: none;
}

.xdebug-error th {
    background-color: #515151;
    color: #EEEEEE;
}

.xdebug-error td {
    background-color: #EEEEEE; 
    border-top: 1px #5b5440 solid;
    border-bottom: #DFBA69;
}

.xdebug-error span {
    background-color: inherit !important;
    color: #ce5c00 !important;
}

3 thoughts on “Making Xdebug Pretty Not Ugly

  1. Nice Idea,
    also a nice feature would be to wrap traced code in a textarea, and use SNTX-Chrome-Plugin to highlight the code which will be output (helpfully if you have an error in a big “eval()”-Function.

    But an inprovement-idea… whats about folding the messages. sometimes if you have a long tracelog, they overlap each other and break the page.
    Would be fine, if only a Icon is visible. If you click on it, a div opens.

    Any Idea, how to do this?

  2. Adding these rules to the .xdebug-error th, .xdebug-error td { } section helps with formatting by using the same style as the tag:

    font: 13px Calibri, Courier, monospace;
    white-space: pre;

Leave a Reply

Your email address will not be published. Required fields are marked *