Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Safari 7 - Customise Web Inspector font
/*Customise Safari Web Inspector font*/
/*(tested on Safari 7.0.1 on OS X Mavericks)*/
/*NO WARRANTY IMPLIED - Will work until Safari is updated requiring a re-patch*/
/*INSTRUCTIONS*/
1. Quit Safari
2. In Finder go to the following folder: /System/Library/PrivateFrameworks
3. Copy the following framework to your Desktop: WebInspectorUI.framework
4. Rename the original framework to avoid overwriting - I append .orig to the filename - authenticate if necessary
5. Open Terminal and enter the following command: chmod 777 ~/Desktop/WebInspectorUI.framework/Versions/A/Resources/Main.css
6. Enter the following command to open Main.css inside the framework in your default text editor:
sudo open -t ~/Desktop/WebInspectorUI.framework/Versions/A/Resources/Main.css
(authenticate)
7. Find the .cm-s-default,.syntax-highlighted property - here you can change various values: e.g.
.cm-s-default,.syntax-highlighted{color:#000;font-family:'Espresso Mono',Menlo,monospace;font-size:12px;}
here we can see the font-family and font-size have been changed
8. If you change the font-size you will want to keep the DOM tree arrows which toggle source nodes inline:
Find the .dom-tree-outline li.parent::before property - change the margin-top value: e.g.
.dom-tree-outline li.parent::before{float:left;content:"";
background-image:-webkit-canvas(disclosure-triangle-tiny-closed-normal);
background-size:8px 8px;background-repeat:no-repeat;width:8px;height:8px;margin-top:4px;padding-right:2px;}
9. Save the changes
10. Copy the framework folder from your Desktop back to the System folder in step 2.
11. Launch Safari and check if your changes have been successful.
12. Repeat steps 8-11 until you get the DOM node arrows lining up with the code!
To restore defaults you can simply Quit Safari, delete the modified framework and rename the original.
@vslist
Copy link

vslist commented Feb 28, 2015

Thank you! It worked very well.

@marcysutton
Copy link

marcysutton commented Jul 29, 2015

Thanks, but no one should ever have to do this. I can't believe it's this terrible to simply increase font size.

@JMichaelTX
Copy link

JMichaelTX commented May 8, 2016

@chrisphenry: Thank you for this process. I have searched all over the Internet, and this is the only good solution I found.

Procedure for Safari 9 on El Capitan

However, I needed to update Safari 9.1 (11601.5.17.1) on OSX 10.11.4. So I had to make a couple of minor adjustments to your process.
I have forked these changes to:
https://gist.github.com/JMichaelTX/9d8791f136c792450301e4d85e29b671

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment