How to use monospace fonts in Safari console

izumisy

Seiya Izumi

Posted on April 8, 2020

How to use monospace fonts in Safari console

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

I really don't like this.

safari error console

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!

monospace font safari

Related: http://stackoverflow.com/questions/27912919/how-do-i-change-the-web-inspector-font-for-safari-8

đź’– đź’Ş đź™… đźš©
izumisy
Seiya Izumi

Posted on April 8, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

JS Runtime / Execution context
english JS Runtime / Execution context

June 30, 2024

JS Runtime / Execution context
runtime JS Runtime / Execution context

June 20, 2024

What is JavaScript?
webdev What is JavaScript?

February 3, 2024

What is a Javascript Engine?
webdev What is a Javascript Engine?

January 17, 2024

JavaScript Timers & Intervals
webdev JavaScript Timers & Intervals

December 4, 2023