A selection of author settings for Chrome Developer Tools.
CSS JavaScript HTML
Latest commit 5c4d478 May 26, 2016 @micjamking Merge pull request #141 from dgca/fix-scss-var-not-found-error
Fix @scss unassigned variable error on grunt serve
Failed to load latest commit information.
app Change @if @else scss statement to assign default value and reassign … Apr 29, 2016
test Updated tests Feb 22, 2016
.gitignore Updating base structure for framework Sep 7, 2015
.jshintrc Restructuring of styles and file permissions Sep 6, 2015
Gruntfile.js Adding karma-grunt so testing is part of build process Feb 22, 2016
LICENSE Initial commit Sep 16, 2014
README.md Adding travis build image to README.md Mar 6, 2016
karma.conf.js Cleaning up karma.conf.js for travis Mar 6, 2016
manifest.json Updated manifest.json Mar 30, 2016
package.json 0.6.6 Mar 30, 2016


DevTools Author Build Status

A selection of author settings for Chrome Developer Tools.

Devtools Author Logo


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:


  1. Install the Chrome extension
  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.

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
  1. 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 incognito below if you wish).
  2. 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 + I while 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.

Creating additional themes

  1. 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 of app/styles/themes/, copy templates/_theme-template.scss and rename it to aloha.scss
  2. 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
  3. Add your color palette object (name and colors array) to the themes.json in app/scripts/
  4. In DevTools, select your theme palette in the Author Settings panel.
  5. Preview and adjust your colors as needed. See Development - Step 2.
  6. 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