A couple observations

[zfarrell]

Hey @rev087 - first off, great work. I just added the chrome extension, and i'm really impressed with what you've done so far.

A couple immediate observations after using it for 5 minutes:

1. The 'side panel' is positioned directly on top of my right-most content. I would expect that it acts similar to the developer tools, where it sits past the content rather than on top. Is there a reason you don't add it to the developer tools? That would be ideal for me because depending on what i'm debugging, being able to place the sidebar/devtools in different places (or a separate window) is invaluable.
2. I really want to be able to see the full value of scope variables. It feels natural to be able to click the collapsed value and have it see the full value.
3. What do the number/message indicator represent?
4. I'd love to be able to "scroll into view" like the dev tools does for elements.

Anyways, nice work. I look forward to seeing where this goes!

[rev087]

Hi @zfarrell, thanks for the kind words. Regarding your points:

1. The project began as a Safari only extension, simply because I missed Batarang when using Safari, but Safari doesn't allow extending the dev tools. Also, during mockups I noticed the TreeView concept fits poorly with the way most people use the dev tools - horizontally, docked to the bottom. So I went with the pane overlaying the page instead. As I moved along, I realized there's a really good advantage for this approach: it's reasonably easy to port the extension to any browser that allows HTML/JavaScript based extensions, (Firefox is next) and maybe even a bookmarklet (with fewer features).

Still, I share your annoyance with the position of the pane, and I've been brewing some ideas to handle that. In an upcoming release I plan to add a button to the pane UI to switch the docking to left and right positions, but something better might come later.

1. It's not obvious by using the extension, but If you click on the models the value is console.log()'ed. A lot of people had the same question, so this is obviously a usability issue. One of the planned features is to add expand/collapse functionality for apps, scopes and objects/arrays in the models, so I'm hoping this particular confusion will be alleviated.
2. They represent the number of elements in an array or properties in an object.
3. That's a great idea, you mean clicking on a scope would scroll the browser window to the DOM element its attached to right?

[zfarrell]

1. I'm definitely not married to the idea of moving ng-inspector to the dev tools, but it does offer a couple advantages: all development type tools are contained within one area, and the developer can control where the window is docked (bottom, right, external) effectively giving you the current experience plus more. The current right-side approach is nice for initial glance at all of my scopes, but for me to use it as it is now i would have to constantly turn it on and off. This particular problem could also be solved by having it not overlap content.
2. Good to know. This definitely helps, but i agree it's not currently communicated adequately to the user.
3. This seems useful, but there's a lot of noise right now since every object and array outputs it's size. For example, any services i have attached to the scope show a size - which is irrelevant to me. I wonder if limiting which variables show size would help? Maybe even only show size on hover? Not sure here, maybe a non-issue.
4. Yea, although just clicking the scope variable might be too much (i would do that expecting it to expand and reveal it's value). In chrome, you right click on an element in the element explorer and there's an option in the context menu 'scroll into view'.

[ocombe]

I agree that the position is not optimal, I have menus on the right and I can't see them with the module "on". It would be nice to have a toggle to move from right position to bottom, or to a new window (not sure if you can do that). I would also like a collapse button on the left of each scope and a collapse/expand all button at the top. My webapp is huge and I have to scroll to the bottom to find what's interesting, it's tedious. A search/filter input could be really useful too.

[felipesabino]

Why not highlighting it on the pane when you select the element in the elements tab, may be that could be the first step (and IMHO more useful) to the scroll into view option

[wedgybo]

Just to add to what's been said already here. Awesome job. It's not usable when you emulate a mobile screen under chrome however :( Making it part of the dev tools would be awesome or making the view appear outside of the emulated window would be a workaround.