senchalabs / appinspector Goto Github PK
View Code? Open in Web Editor NEWGoogle Chrome™ Dev Tools extension for debugging Sencha™ applications.
Home Page: http://www.senchalabs.org
License: Other
Google Chrome™ Dev Tools extension for debugging Sencha™ applications.
Home Page: http://www.senchalabs.org
License: Other
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?
Not entirely sure how to do this, but a sub-tab on Data might be used to help visualize how data is chained together.
Obviously, for the official 2.0.0 release
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 guess it's better to remove node_modules, it should not be in the repository.
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)
is the AppInspector still needs the changes to be done inside Sencha Architect?
This currently works in Ext apps using el.frame() - which doesn't exist in Touch.
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?
In progress so far, but not fully implemented or enabled.
This will help us (and others) be aware of what's actually happening.
It would be nice to be able to refresh individual stores, instead of having to refresh the entire list.
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.
We eventually need to add a GitHub page with more info about this thing.
Also, an article on the Sencha blog will help!
It would be awesome to be able to filter the store view based on custom search criteria (maybe just storeID is sufficient).
Probably an error in logic. Even if not supported, should fail gracefully.
So that if they already know the id/itemid or component query for something, they can filter the other crap.
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.
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.
Add loading of Ext.data.TreeStores in Stores tab.
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
Currently it's only Read access. CUD shouldn't be too difficult, given the new InspectedWindow proxy. I think.
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.
User wants to see custom properties and methods for components highlighted.
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.
See forum thread:
Some users are reporting problems running on Sencha doc examples the very first time, but subsequent reloads are working fine.
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.
TypeError: Object # has no method 'getArray'
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.
No real specifics on the bug report, but allegedly the ZIndex may not be high enough.
The extension was marked as dangerous few days ago and is now removed from the Chrome store. Any ideas?
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
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.
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 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.
@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.
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.