Changing Developer Tools Font Face (family)

Question

After hours of research, I give up.

Is there any straightforward way to hack Dev Tools and change the font family they are using? I'm spending many hours looking at this window so I'd love if I could use a monospaced font of my choice.

Answer 1

I've created a small plugin which provides a collection of editor settings for Chrome Developer Tools, including the ability to set a custom font family enabled on your computer.

1. Install DevTools Author Chrome extension from Chrome Web Store
2. Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Restart Chrome for flags to take effect.
3. Open DevTools (cmd + opt + I); Settings > Experiments > check Allow custom UI themes.

This will add an 'Author Settings' panel to Chrome Developer Tools, where you can edit the font-family being applied to the Chrome Developer Tools.