Skip to content

Instantly share code, notes, and snippets.

@JMichaelTX
Forked from chrisphenry/Main.css
Last active August 29, 2017 08:25
Show Gist options
  • Save JMichaelTX/9d8791f136c792450301e4d85e29b671 to your computer and use it in GitHub Desktop.
Save JMichaelTX/9d8791f136c792450301e4d85e29b671 to your computer and use it in GitHub Desktop.
Safari 7 & 9 - Customise Web Inspector font
/*Customise Safari Web Inspector font*/
/*(tested on Safari 7.0.1 on OS X Mavericks)*/
/* Tested on Safari 9.1 (11601.5.17.1) on OSX 10.11.4 as of 2016-05-08 */
/*
JMichaelTX NOTE:
- This process was written for Safari 7 (Mavericks)
- I found it worked fine with Safari 9.1 (11601.5.17.1) on OSX 10.11.4, with just a few simple changes (noted below)
*/
/*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 [somewhere]:
WebInspectorUI.framework
- I copied to /My DropBox Folder/Safari/Web Inspector/WebInspectorUI.framework
4. Rename the original framework to avoid overwriting - I append .orig to the filename - authenticate if necessary
~~~ I DID NOT DO STEPS 5 & 6 ~~~
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)
~~~ I OPENED IN TEXTWRANGLER ~~~
7. Find the .cm-s-default,.syntax-highlighted property - here you can change various values.
For example, I changed to Consolas 14px:
.cm-s-default,.syntax-highlighted{color:#000;font-family:Consolas,Menlo,monospace;font-size:14px;}
~~~ I DID NOT DO STEP 8 ~~~
- The "margin-top" property was not found
- Must have changed with Safari 9.1 (11601.5.17.1) on OSX 10.11.4
- The DOM tree arrows seem to work find without any change.
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 modified framework folder back to the System folder in step 2.
11. Launch Safari and check if your changes have been successful.
~~~ I DID NOT NEED TO DO STEP 12 ~~~
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment