A selection of author settings for Chrome Developer Tools.
If you develop in the browser and/or use Chrome Developer Tools as your web authoring environment, this extension provides a small set of settings to enhance DevTools editing environment:
- Choose from +25 editor themes (applies to
Elements,SourcesandConsolepanels only) - Supports system enabled fonts (must be installed prior on your computer).
- Change font size from 10px - 22px
- Install the Chrome extension
- Enable Developer Tools experiments in
chrome://flags/#enable-devtools-experiments. Restart Chrome for flags to take effect. - Open DevTools (
cmd + opt + I); Settings > Experiments > check Allow custom UI themes.
After restarting DevTools, you should see the default theme 3024 take affect within the Sources and Console panels.
Fork the repository and then follow the steps below to contribute new themes or bug fixes. Devtools Author is built using NodeJS and GruntJS.
$ git clone git@github.com:<username>/devtools-author.git
...
$ cd devtools-author
$ npm install
$ grunt serve
- Once grunt is running, to install development extension in Chrome, open Settings > More Tools > Extensions and click on the Load unpacked extension... button. (also enable
Allow incognitobelow if you wish).
- (Disable DevTools Author if you have the extension installed from the Chrome Web Store.)
- Make sure Developer Tools experiments are enabled and custom UI themes are allowed.
- Restart DevTools. I find the fastest way to see changes take affect is to undock DevTools in a separate window and then open a subsequent DevTools window (
cmd + opt + Iwhile the current DevTools window is focused) after changes have been saved and grunt reloads the assets. You'll then need to reload (close and reopen) the subsequent DevTools window after you make changes.
- Make a copy of one of the templates from
app/styles/themes/templates/and rename the file to your theme name without the underscore, ie. if your theme is called aloha, inside ofapp/styles/themes/, copytemplates/_theme-template.scssand rename it toaloha.scss - Add color values for the palette based on the code syntax highlighter variables in your scss file.
- If you desire more specific targeting for your theme than what is being supported out of the box, you can add those styles to the end of your theme file, after the
@include styles(). See #109
- Add your color palette object (name and colors array) to the
themes.jsoninapp/scripts/ - In DevTools, select your theme palette in the Author Settings panel.
- Preview and adjust your colors as needed. See Development - Step 2.
- Commit and push your changes to your repo, then create a pull request for your new theme once it is ready!
MIT © Mike King yo@mikeking.io