How to use monospace fonts in Safari console

#safari #javascript

The default font on error console of Safari 9 is not monospace.

I really don't like this.

I would like to change it, but it seems that error console does not have any preference, so to change it, I had to edit css settings manually.

The path of the file to edit is /System/Library/StagedFrameworks/Safari/WebInspectorUI.framework/Versions/Current/Resources/Main.css.

Looking into the file, we can find these lines at somewhere.

.console-messages {
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    font-family: -webkit-system-font, sans-serif;
    font-size: 12px;
    min-height: 100%;
    outline: none
}

Change a little bit on font attributes like below.

.console-messages {
    ...

    font-family: Menlo, monospace;
    font-size: 10px;
}

Now we got a monospace font!

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more