ng-inspector, a browser extension for AngularJS (ng-inspector.org)
almost 9 years ago from Bruno Daniel, Co-founder, Flying Dog
almost 9 years ago from Bruno Daniel, Co-founder, Flying Dog
By the way, that's my project, feel free to ask questions and suggest improvements. I should have included Show DN in the title, but it slipped.
Why not for Firefox?
Firefox release coming soon-ish :)
Why did you go for Chrome and Safari first, though? Is it particularly difficult to make FFox plugins?
The first version supported Safari only, as it had the biggest deficit in AngularJS tooling, and it's a browser I otherwise enjoy. Chrome was next as it's the most popular and I kept getting a lot of requests for it - kind of a surprise because of Batarang. It seems a lot of people favoured ng-inspector over Batarang for the design, which was uplifting :)
Turns out starting with Safari was perfect, as it has the most limited extension API of the three. After Safari, the other browsers were much easier to target with the existing code base.
It looks nicer than the competing extensions, but it doesn't seem to do much in terms of expanding/collapsing the scope or showing me the actual variables I want. Often they appear hidden in a level of the hierarchy I can't access. It shows there are a number of things in there, but clicking on it does nothing.
In fact everything you mouseover has a hover style, but nothing is actually clickable! Is mine buggy?
When you click on a Scope, the extension console.log()
s the DOM Node it's attached to. Clicking on a model console.log()
s the model value.
I understand this isn't obvious from the UI, and it's a usability issue that I'll address in an upcoming update.
Ahhh, I see! Yeah that isn't obvious, and would be cool if that information was shown in the UI itself.
Have you used Angular Batarang? It's really ugly and annoying to use, but allows you to expand and collapse the scope visually so you can narrow in on what you want. It also adds an Angular Properties panel to the specific element you inspect.
The ideal I think would be a mix of yours and Batarang's functionality.
I'm familiar with Batarang, it was the original inspiration. I wanted that functionality in browsers other than Chrome, while also addressing my own insatisfaction with its UI/UX.
If anyone is interested, I'm moving the Sketch 3 files for the extension artwork, logo and webpage from the GitHub repo to a LayerVault public project.
Contributions are most welcome!
What's the reason for the move? Did GitHub screw with the Sketch files, or is it more of a separation-of-concerns thing?
Separation-of-concerns and the fact that git isn't very suited (without plugins) for large binary files. Over time, cloning the repo slows down to a crawl and the repository size gets too big.
Plus, I think LayerVault and similars are much better suited for open-source design.
I've been looking for something like this! Checking it out as soon as I get back from vacation.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now