miekd

In the short time I have tried to use Safari as my default browser, I have been playing around with the Safari Web Inspector. At first, working with it is a bit icky compared to Firebug – and by all means, Firebug isn’t want it used to be. But something I only noticed after a few days is that the Safari Web Inspector does not have a monospace font in the HTML view by default.

So I took a personal quest into the depths of WebKit to find where this setting was coming from, keeping in mind that it probably originated from a CSS file – since most browser-based plugins are largely built on CSS and Javascript nowadays.

After somewhat of a search I found that the Web Inspector gets styled by: /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.css (you can easily use COMMAND-SHIFT-G or “Go to Folder” to find this folder, you need admin privileges to edit things here, though)

Changing the font-family property within the body selector makes the Safari Web Inspector go a different font. (don’t forget to restart Safari)

You can dive into the CSS file or add this to the bottom of it:

body {
	font-family: "Monaco", monospace;
}

After doing this, I noticed that all of the Web Inspector went to monospace. This meant that sidebars and other elements looked off compared to the rest of the Safari UI. Luckily there is a way to fix this too, by adding font-family: "Lucida Grande", sans-serif"; to the selector .sidebar-selector.

There is one other place which doesn’t look that fancy with a monospace font. And that’s the breadcrumb bar in the bottom. To fix this you should also add the font-family: "Lucida Grande", sans-serif"; to the selector .status-bar

Or – to fix both matters – you can add the following at the end of the stylesheet:

.sidebar,
.status-bar {
	font-family: "Lucida Grande", sans-serif;
}

That should take care of it! On a side note, would you want the properties in the Styles-sidebar in monospace too, add font-family: "Monaco", monospace; to the .section .properties selector, or:

.section .properties {
	font-family: "Monaco", monospace;
}

All together, for your swift copy-pasting needs:

body,
.section .properties {
	font-family: "Monaco", monospace;
}

.sidebar,
.status-bar {
	font-family: "Lucida Grande", sans-serif;
}