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. 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!
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.
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.