Hello everyone,
As some of you are aware, there was an existing browser devtools extension for Aurelia and due to changes in manifest for Chrome browser extensions, it fell by the wayside a little. One of the core team members Brandon had a functional devtools extension that some of you were using GitHub - brandonseydel/aurelia-inspector: Aurelia 2 Chrome Inspector but the topic of an officially supported and maintained extension arose a few weeks ago.
After getting permission from Brandon to use the work he had already done, we used it as a springboard for a new Aurelia Devtools extension. The extension is currently in review with the Chrome extensions team and hopefully it sails through without anything needing to be changed. However, in the interim a copy is available on Discord if you don’t want to wait: Discord
The details
The extension itself is an Aurelia 2 application using Vite. For the styling, it uses TailwindCSS version 4 and is an overhaul in many ways from Brandon’s extension you might be familiar with (a fresh coat of paint and different feel).
Instead of being in the elements section, the extension is top-level in its own dedicated tab. This allows for future additions to the extension and support for other things like our state plugin and potentially other useful enhancements (if you have feature suggestions, we’re all ears).
The extension detects components and custom attributes on the page and allows you to see specifics about them, bindable properties and properties.
As you can see, it splits things up into bindables and properties. If there is other contextual information like aliases and stuff, they will also sometimes show up at the top of the details panel too.
Disclaimer
This is the first release and a culmination of a few days work. It is just an early v1 of the extension and as such, there might be issues that need ironing out that haven’t been discovered. One such issue around editing properties in Aurelia 2 apps has been fixed, however, will be in a subsequent release of the extension.
Overall, the extension will make debugging your Aurelia 1 and Aurelia 2 applications a lot easier, especially if you desire visibility into your components around bindables and property values themselves.
Try it and let us know.