Google Chrome™ Dev Tools extension for debugging Sencha™ applications.
JavaScript CSS
Latest commit 5a8d62e Jun 1, 2014 @arthurakay arthurakay Merge pull request #90 from stoe/feature/components-detail-value-copy
feat(components): cell editor added to component details
Permalink
Failed to load latest commit information.
app feat(components): cell editor added to component details May 30, 2014
free-all-purpose-icons-gcons Committing icon set per issue #63 Apr 8, 2014
grunt
node_modules
settings
tpl enable mocks.js for development dist/ Mar 28, 2014
.editorconfig
.gitattributes project refactored Jan 21, 2014
.gitignore
.gitmessage feat(repo): add git commit template May 28, 2014
.jshintrc
CHANGELOG.md feature(grunttasks): changelog grunt task May 27, 2014
CONTRIBUTING.md
CONTRIBUTORS.md
GruntJS.md Add the grunt task to run the tests on Siesta Lite. (senchalabs/AppIn… Apr 4, 2014
Gruntfile.js applied settings/jetbrains.jar code styles Mar 28, 2014
LICENSE Move LICENSE file back to project root and updated copy task instead. Mar 12, 2014
README.md Adding link to blog Apr 4, 2014
RELEASE_CHECKLIST.md
package.json feature(grunttasks): changelog grunt task May 27, 2014

README.md

App Inspector for Sencha

Google Chrome™ Dev Tools extension for debugging Sencha™ applications.

Available on Chrome Store

Read more on the Sencha blog:

Features

  • Creates a new section on Dev Tools elements panel displaying properties of a given component if they match the selected DOM node.
  • Creates a new Sencha panel with a variety of debugging utilities for the Sencha Touch and Ext JS frameworks

Architecture

This Chrome extension has 3 pieces:

  • background: a page that works on the background and coordinates communication between tabs and the inspector
  • devtools: bootstrap the dev tools extension, adding panels on the element tab and the new Sencha tab
  • inspector: the App Inspector itself. It's rendered in an iframe inside dev tools

Read more on:

Known Issues

There are some APIs from Dev Tools that are not fully exposed, so the App Inspector uses some work arounds:

  • Component highlighting is executed manually via CSS
  • DOM modifications (add/remove/move components) do not reflect automatically on the App Inspector, which is why we have "reload" buttons.

Contributing

This is a community project, so feel free to fork it. Pull requests with bug fixes and new features are welcomed!

Please read the CONTRIBUTING guidelines.

The UI for the Sencha panel is built using:

  • Sencha Architect 3.x
  • Sencha Ext JS 4.2.x
  • Sencha Cmd 4.x

View the documentation for the Chrome-wrapped utilities under /docs/ in your browser.

Install & Build

This project relies on npm and Grunt to build locally.

  • Run npm install to install all Node.js dependencies from package.json
  • If you are building the project for the first time, be sure to open the Architect project and hit "save" to generate the necessary Sencha Cmd bits