Skip to content

Instantly share code, notes, and snippets.

@chrisphenry
Created February 12, 2014 03:28
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save chrisphenry/8949607 to your computer and use it in GitHub Desktop.
Save chrisphenry/8949607 to your computer and use it in GitHub Desktop.
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.
@marcysutton
Copy link

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

@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