Active CSS DevTools

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. It was originally released for version 1.0, but broke soon after version 2 started due to the immense upgrade related to components and the introduction of variables. So the decision was made to wrap up all the issues to do with version 2 of the core first and then get back onto it for an epic release for version 3.

It was working perfectly when released, and you can see some old screen captures below of what it used to do.

It's a really useful tool for working with Active CSS, so stay tuned for the new release!

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.