senchalabs / appinspector Goto Github PK

is the AppInspector still needs the changes to be done inside Sencha Architect?

Currently it's only Read access. CUD shouldn't be too difficult, given the new InspectedWindow proxy. I think.

This currently works in Ext apps using el.frame() - which doesn't exist in Touch.

@stoe I noticed you aren't using the original icons I had committed to the project. I'm totally cool with that... except when I need new icons, I don't have any that match the ones you've modified.

Also I don't think the icons we're using fit into the available iconCls space for tabs (and possibly buttons). Let's figure out how to move forward.

Probably an error in logic. Even if not supported, should fail gracefully.

User wants to see custom properties and methods for components highlighted.

The extension was marked as dangerous few days ago and is now removed from the Chrome store. Any ideas?

We will likely drop Sencha Architect as a development dependency in the process. This would allow more people to contribute, as well as speed our development as we wouldn't have to wait on the next Architect release.

Trying your extension on chrome canary with a large (old, yet alive and kickin) 3.4.0 webapp.
It directly throws: isException: true value: TypeError: undefined is not a function

The extension's background page's console gives:
Error in event handler for tabs.onUpdated: Error: Attempting to use a disconnected port object at chrome-extension://pbeapidedgdpniokbedbfbaacglkceae/background/background.js:60:30
Which doesn't really help to resolve this, as it's an unrelated.

Any tip on how to trace such issues with your extension?
Thanks.

It would be nice to be able to refresh individual stores, instead of having to refresh the entire list.

http://www.sencha.com/forum/showthread.php?281974-App-Inspector-for-Sencha-v2.0&p=1064100&viewfull=1#post1064100

The "About" tab is not scrollable on small screens.

Hi,

would be cool if the MVC tab gathers not only the model, view, store configs from the app.js but also from all controllers to get a full overview.

keep on rocking
Nils

At my company, we're using Siesta to automate our Extjs app.

Using their live demo, I cannot detect the components but if I take the code and launch it in its own window instead of in the Siesta UI, I can easily detect the component.

For example, try running their UI Tests > Forms > basic_form.t.js and try to identify the sencha components using the Chrome extension.

http://www.bryntum.com/examples/siesta-latest/examples/browse-all-desktop.html

Edit: This is a duplicate of #33

Stores section has something weird going on behind the scenes. Open 4.2.2 kitchen sink and navigate to Array grid example. On Files store, it throws an exception about missing ‘each’ method. Then once you click on BigData store - inspector freezes.

http://www.sencha.com/forum/showthread.php?281974-App-Inspector-for-Sencha-v2.0&p=1034918&viewfull=1#post1034918

Component tree inspector view has a bug, instead of regions being configured with split:true, looks like the left one is fixed size and the one on the right side has resizable:true. Once I resize the bar, left one does not change, creating an apparent gap.

No real specifics on the bug report, but allegedly the ZIndex may not be high enough.

This will help us (and others) be aware of what's actually happening.

Not entirely sure how to do this, but a sub-tab on Data might be used to help visualize how data is chained together.

I create the "hello world" app with ExtJS 6, which has a very simple store called MyApp.store.Personnel, an in memory store.

The store does not appear on the App Inspector. Instead, it shows an 'ext-empty-store' with 0 records.

Is ExtJs 6 supported?

TypeError: Object # has no method 'getArray'

Not sure if you know about this or if there's even anything that can be done, but it looks like the extension won't work if a component is loaded into an iframe. (Both Elements inspector "Sencha Component" and the top-level Sencha tab with the full components list, even after hitting refresh, it only shows the top-level page components, but nothing from within any iframes).

Is there a workaround for this, or is this something you might be able to accommodate?

Thanks,

Brian

I have some ideas to improve this extension and wanted to hack on it in my own fork.

When I run grunt, it complains like this:

Fatal error: ./app/AppInspector/.sencha/ folder not found!

To fix this, please open the project in Sencha Architect first and save once.
You can find the Sencha Architect project under ./path/to/project/app/AppInspector/AppInspector.xds

Execution Time (2014-08-21 22:51:04 UTC)
loading tasks 244ms ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 100%
Total 245ms

I don't have a Sencha Architect license.
Is there any way I can build this extension without having Sencha Architect?

Obviously, for the official 2.0.0 release

http://dev.sencha.com/ext/5.0.0/examples/bindinspector/inspector.html

Add loading of Ext.data.TreeStores in Stores tab.

When sorting events, previously recorded events get cleared and the only remaining events are the last events fired between moving from the active application to the AppInspector (typically mouseout, blur, etc. events)

I really like this extension!

Run this example page locally from extjs-4.2.1.883

/examples/grid/locking-cell-editing-grid.html

Turn on event recording.
Edit a cell and tab away.

CellEditing plug in fires events
edit
validateedit

But these are not shown on the events console.

Data stores with large numbers of records (e.g. 5000) throw errors when you try to inspect them. We should page the records grid, say at 50 or 100.

Noticing that on every tab. onUpdated event is triggering reload so I am not able to use layout recorder when switching from one hash. Using latest chrome - Version 45.0.2454.101 (64-bit)

The plugin stopped working on the newest Chrome v. 92.0.4515.131. Specifically inspecting an element doesn't fill the "Sencha Component" tab, where extjs component configuration was placed.

Right now Layouts and Components tabs just show some items.

It would be really nice if those elements could be available as global variables, either using some context menu or by simply double clicking.

It would be awesome to be able to filter the store view based on custom search criteria (maybe just storeID is sufficient).

See forum thread:

• http://www.sencha.com/forum/showthread.php?281974-App-Inspector-for-Sencha-v2.0&p=1034011#post1034011

Some users are reporting problems running on Sencha doc examples the very first time, but subsequent reloads are working fine.

In progress so far, but not fully implemented or enabled.

Hi! This is proposal.

It's a wonderful idea that we run unit test when change the source code. Also, we integrate Travis CI to the repository and, always check the code is significantly better.

If we develop unit testing, which framework would be best?

• Jasmine
• Siesta
• Mocha
• Others(QUnit, JsTestDriver..)

Siesta seems good because it understands Sencha's abstraction and easy to use with Sencha Apps. Siesta Lite is free, but I don't understand it allows to use on open source projects. Plus, Siesta Lite doesn't work on command line interface so we cannot integrate it to Travis CI.

Jasmine is better than others? Please tell me what you think.

i guess it's better to remove node_modules, it should not be in the repository.

So that if they already know the id/itemid or component query for something, they can filter the other crap.

We eventually need to add a GitHub page with more info about this thing.

Also, an article on the Sencha blog will help!

http://www.sencha.com/forum/showthread.php?281974-App-Inspector-for-Sencha-v2.0&p=1056717&viewfull=1#post1056717

When recording events, there are a billion that get fired and it makes it a little difficult to find particular events. I think it would be awesome to be able to provide some kind of custom filter to include/exclude particular events.