Created
February 12, 2014 03:28
-
-
Save chrisphenry/8949607 to your computer and use it in GitHub Desktop.
Safari 7 - Customise Web Inspector font
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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. |
@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
Thanks, but no one should ever have to do this. I can't believe it's this terrible to simply increase font size.