Discussion :

[vermine]

App Inspector, l'application de débogage pour les développeurs de ExtJS et Sencha Touch

Né de la constatation que les développeurs passent beaucoup de temps à déboguer et tester leur code, App Inspector est un outil propre aux développeurs d'ExtJS 4.x et de Sencha Touch 2.x. C'est une extension des outils pour développeurs de Chrome et c'est un projet open source.

L'aspect le plus difficile pour déboguer des applications de Sencha est que les outils de développement intégrés aux navigateurs ne comprennent pas ou pas bien les abstractions de niveau supérieur comme les Components, les mises en page, les données et les événements Observable. C'est pourquoi App Inspector pour Sencha vous aide à analyser et comprendre n'importe quelle application de ExtJS et Touch avec des outils faciles à utiliser.

N'oublions pas que Sencha propose également d'autres outils comme Illuminations, Page Analyzer et Sencha Fiddle.

Dans App Inspector, vous trouvez :

• Component Inspector : pour naviguer rapidement et facilement dans l'arborescence des composants, les mettre en évidence dans le DOM en affichant leurs propriétés ;
• Store Inspector : afin d'afficher les ensembles de données dans votre application et d'examiner des enregistrements individuels ;
• Layout Profiles : pour disséquer intelligemment les mises en pages de l'application pour identifier la performance potentielle et les problèmes d'affichage ;
• Event Monitor : afin d'enregistrer des événements Observable.

L'outil détecte également les versions des frameworks et packages utilisées dans votre application, rendant plus facile l'identification des spécifications pour des applications individuelles.

De plus, il est construit en Sencha par Sencha. Certains verront une preuve d'efficacité. Il faut savoir que l'architecture d'une extension Chrome Developer Tools comporte deux parties : la page Background et la page DevTools. Ces deux éléments interagissent entre eux, mais ils interagissent également avec la fenêtre inspectée de différentes manières.

La page Background contient le code persistant qui initialise l'extension et surveille la fenêtre inspectée (rafraîchissement de la page par exemple). Elle communique ensuite les informations sur la fenêtre inspectée à la page DevTools via l'API postMessage.

La page DevTools contient le code nécessaire pour les instances individuelles d'outils de développement de Chrome (les onglets du navigateur). Toute l'interface d'App Inspector a été construit à l'aide de Sencha Architect et de ExtJS, y compris les nombreuses modifications de thème. Quelques classes d'utilitaires ont également été écrites pour que la page DevTools communique avec l'application inspectée via l'API inspectedWindow.

Enfin et surtout, il y a l'utilisation de Sencha Cmd en combinaison avec Node.js et Grunt pour automatiser le processus de la génération. Le code doit d'abord passer la validation JSHint, puis l'application exécute une génération dîte de production, et enfin toutes les ressources supplémentaires sont regroupées pour le package de déploiement de Chrome Web Store. Certains documents internes sont construits à l'aide de JSDuck.

L'extention App Inspector pour Chrome.
L'article sur le site officiel.
Le code qui n'attend que vos contributions.

[abraxis]

Bonjour,

Merci pour cet article

Une petite faute à la première ligne :

Né de la constatation que les développeurs...

La dernière image n'est pas visible, cela est normal ?

[vermine]

Merci.

En fait, il y a une sorte de logo au début, une image au milieu pour expliquer le Background et le DevTools, puis une vidéo à la fin en guise de démonstration. La vidéo ne s'affiche peut-être pas bien selon où l'on se trouve lorsqu'on lit l'actualité.
Quant à la pièce jointe, c'est l'image du milieu, redimensionnée.