Developer tools

EffCSS stylesheets and associated makers can be inspected via the special browser extension - EffCSS Developer Tools.

Installation

The installation method depends on the browser:

• Mozilla Firefox can use the extension from the own addons store,
• Chromium based browsers (such as Google Chrome, Yandex Browser, Microsoft Edge etc.) can install the extension manually from zip archive using chrome://extensions.

Interface

The extension allows to inspect stylesheets created via EffCSS. You can use sorting, filter by active state, search for CSS content and inspect concrete config - both maker and stylesheet.

Workspace consists of two parts - list and card areas.

The list area provides the following actions:

1. Select inspected frame (if there are several frames with EffCSS).
2. Display current frame style provider in the browser console.
3. Reload extension.
4. Switch on/off all EffCSS stylesheet for current frame.
5. Search for CSS content or maker key.
6. Select sorting property.
7. Select sorting direction.
8. Filter active/passive stylesheets.
9. Select all stylesheets or reset selection.
10. Display selected stylesheets in the browser console.
11. Save CSS from selected stylesheets.
12. Save JS from selected stylesheets makers.
13. Switch on selected stylesheets.
14. Switch off selected stylesheets.
15. Add stylesheet to selection or delete from.
16. Display stylesheet in the browser console.
17. Open stylesheet card.
18. Switch on/off stylesheet.

The list area also allows to compare stylesheets using several counters such as rules, properties, etc. To see CSS content or related maker you need to open stylesheet card.

The card area provides the following actions:

19. Open maker tab.
20. Open stylesheet tab.
21. Close card.