There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
Processing...
This may take a few seconds.

Active CSS DevTools

It will be free and the plan is to roll-out the Firefox one too.

Coming soon-ish! (At some point...)

This is an extension built by the developers of Active CSS. It supports the cores from the official repository only. It will be supporting all versions of the core from 3.0 upwards.

Features:

The Active CSS DevTools extension is comprised of two sections: 1) the element event view and editor, and 2) the real-time monitor and config viewer.


Element event view and editor

In this panel you can edit Active CSS events and actions live in real-time, like you can with CSS, directly in Chrome DevTools.
Use the usual DevTools inspector to view the events and actions related to a specific element.
Use the dropdown to change available events for an element. It displays all bubbling events per element.
Now supports nested shadow DOM components, so it will show bubbling up to the top of the document, as well as allowing you to edit isolated events in components.
Elements is useful for debugging, checking event bubbling for adding new commands and seeing what is going on, and is also great for demonstrations.

Real-time monitor and config

Isolate events and actions, see what is happening as you interact with your web page, and drill into results via the real-time monitor.
View your config and see if and how Active CSS has concatenated it internally, with quick-link from events to the config.
New freeze button added for version 2, for freezing event monitoring when you have a lot going on.

Additional points

Downloads of this product from the Chrome Webstore will automatically update after each new release.

Not all version 2 core features support live editing in the extension yet. Upgrades to the extension will occur incrementally over time.

We do not monitor your use of the extension in any way. There are no negotiations with any scripts on our back-end of any kind. But you will need to approve Chrome permissions to allow editing on all websites — the maximum approval setting — as your actions via the extension can directly change any content on any website that has the developer version of the core installed.

This product will be a work in progress, like the regular browser DevTools.

Legal jargon can be found here: Terms and conditions

* Release date is subject to change due to essential core improvements delaying the reassumption of work on this. It's likely to get re-released for version 3. This is an advert for the version 1.0 devtools, which was awesome. There's even more awesome stuff lined-up for the version 3 devtools that has not been mentioned yet.