How to change the colors of xdebug output?

Question

The red and yellow standard colors of xdebug can hurt your eyes after a few hours.

http://www.designified.com/blog/article/76/restyling-xdebug-output describes how to replace the style with javascript requiring jquery.

I was looking for a more straight forward way and finally found one.

Answer 1

If you configure your error_prepend_string and error_append_string values at the beginning of your php script or main index file like so...you can embed your own stylesheet in the error message and access the xdebug classes this way.

ini_set('error_prepend_string','<div><style>.xdebug- 
error tr th span { background-color: #e67a17 
!important; }
.xdebug-error tr th, .xdebug-error tr td { color: 
black !important; }</style>');
ini_set('error_append_string','</div>');

You can override anything with the !important css modifier...just make sure you are using the exact css selector for the element you target.

In my case, the user agent stylesheet in Google, Edge, and others were overriding the xdebug settings. I set the style to have a black font color because I had an issue with white fonts appearing over white backgrounds. Now, I can see errors again....

Answer 2

Have a nice xdebug!

Yes you can. Try this css below.

table.xdebug-error {
  width: auto;
  background: white;
  border: none;
  border-spacing: none;
  border-collapse: collapse;
  box-shadow: 0px 3px 10px 0px black;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 8888;
  font: 14px verdana;
  transform-origin: top right;
  transform: scaleX(0.4);
  opacity: 0.3;
  transition: all 200ms ease;
}
table.xdebug-error caption,
table.xdebug-error th,
table.xdebug-error td {
  text-align: left;
  vertical-align: middle;
}
table.xdebug-error a img {
  border: 0;
}
table.xdebug-error :focus {
  outline: 0;
}
table.xdebug-error pre {
  margin: 0;
}
table.xdebug-error tbody tr td,
table.xdebug-error tbody tr th {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  font-weight: normal;
}
table.xdebug-error tbody tr td {
  padding: 3px !important;
  vertical-align: top;
}
table.xdebug-error tbody tr th {
  padding: 13px !important;
}
table.xdebug-error tbody tr td:nth-of-type(1) {
  width: 5% !important;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] {
  font-weight: normal;
  background: steelblue;
  color: white;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] span {
  display: none;
}
table.xdebug-error tbody tr font[color='#00bb00'] {
  color: #005e00;
}
table.xdebug-error tbody tr td small {
  display: none;
}
table.xdebug-error tbody tr td i {
  padding-left: 12px;
}
table.xdebug-error:hover {
  transform: none;
  opacity: 1;
}

CONS:

• Depending on your other css defs, you may have to fiddle a bit until it looks as promised.
• It's not as beautiful as a Laravel/Symfony error

PROS:

• You can see the actual page, despite the error. (Message will be dimmed and pushed on the right side, appearing on mouse hover.)

• It's nothing more than CSS

• You can even add it to your page via CSS Live Editor Plugin or something similar; therefore, no need to add to your own code

• It won't break your styling, won't stuff a whole lot of text into a tiny container where the error happened, etc. - because it's position:fixed.

• Pleasant to the eye - you'll end up throwing errors just to see it again :)

Answer 3

// notice the line height, the padding(cellspacing), monospace font, font size, making readability better at least for me.
//
// A FILENAME : xdebug_stack_trace.css
// 
// This is how the xdebug_stack_trace.css is called from the index.php page
// 
// <style><?php require_once("./resources/css/xdebug_stack_trace.css");?></ style>
// 
// notice that on the line above there is a space between the slash
// and the 'style', on the ending 'style' tag, otherwise the display
// get all messed up when this page gets loaded.
// 
// make sure that when you copy the 'style' line from here to the
// index page, that you remove the extra space at the ending 'style'
// tag of the index page.
// +---------+---------+---------+---------+---------+---------+---------+
// orange/black td header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error th
{
    font-family:monospace;
    font-weight:normal;
    font-size:15px;
    padding: 6px 6px 6px 6px;
    border:1px solid black;
    background: #FFCC99;    // orange
    color:#000000;          // black 
}
// +---------+---------+---------+---------+---------+---------+---------+
// black/white th header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
    line-height:1.6em;
    padding: 10px 10px 10px 10px;
    border:1px solid #000000;
    background: #000000;          // black
    color:#FFFFFF;
}
// +---------+---------+---------+---------+---------+---------+---------+
// green/black td content one or more lines
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error td
{
    font-size:14px;
    padding: 6px 6px 6px 6px;
    border:1px solid green;
    background: #D1FFE8;          // light green
}
// +---------+---------+---------+---------+---------+---------+---------+

Answer 4

Another option is to disable xdebug from overloading var_dump. In the php.ini [XDebug] section add xdebug.overload_var_dump=0

Formatting the output is then up to you; one such way could be wrapping var_dump in your own debug function that prints <pre> tags.

Answer 5

The solution is the !important tag, it overrides the existing style values. Use the following css code to avoid eye cancer when using xdebug:

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

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

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

.xdebug-error span {
    display: none !important;
}

.xdebug-error_description th {
    font-size: 1.2em !important;
    padding: 20px 4px 20px 100px !important;
    background: #ccc no-repeat left top !important;
}

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