Sometimes it's easier when debugging to just dump some variable out to the browser to see what it's contents are, even if you are using a debugger, especially when the debugger - as it's wont to do - acts flaky and doesn't stop on breakpoints.

Usually, I have XDebug set up to style the output of my var_dump() commands so that I can see values more clearly. That's useful. But often times, the location that I dump the variable is styled with CSS in a way that makes it hard to read, like at the top of a text-align: center column. Ew. This is a handy fix for that problem.

I installed the Stylish Firefox extension, which allows you to supply custom stylesheets for any page you want. You can also do this with user stylesheets in your Firefox profile, but Stylish is both easier and more flexible.

All you need to to is apply styles to the xdebug-var-dump class, which is output as part of XDebug's var_dump() stylized output. I use something like this in my custom stylesheet:

.xdebug-var-dump { background-color: white; text-align: left; color: black; white-space: pre; font-family: Consolas, Courier, monospace; font-size: 12px; }

That moves everything back to the left, colors it normally, sets a nice monospace font of the correct size (for me, guaranteed -- remember the goal is not scalability/flexibility in this case, but giving me what I need to debug), and ensures that the wrapping works as expected.