DevTools for frontend optimization

The Style.Tools project started as a free browser-widget that provides a sort of DevTools (developer tools) for frontend optimization (FEO).

Style.Tools is available with 1 click on any page on the internet, including pages behind a login.

Start Style.Tools🔬 FEO (drag the link to the favorites bar to install the widget)

Style.Tools provides access to advanced CSS optimization tools including:

  1. CSS editor with themes
  2. Critical CSS generator
  3. Unused CSS extractor and remover
  4. Duplicate CSS remover (unique innovation)
  5. CSS beautify
  6. CSS code optimization (clean-css)
  7. CSS code repair (fix malformed CSS)
  8. CSS lint (quality checks)
  9. CSS statistics (analysis)
  10. PostCSS plugins: autoprefixer and many more
  11. Above-the-fold optimizer

The widget provides localhost and offline support via a Service Worker on domain style.tools. You can use many of the features locally without an internet connection. The cache for preferences is preserved across domains.

Installation

The widget is a small piece of Javascript code that can be added to the browser bookmarks or favorites bar via the URL prefix javascript: