/*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.