css Safari 7和9 - 自定义Web Inspector字体

Posted 2021-05-13

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