IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Ext JS / Sencha Discussion :

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


Sujet :

Ext JS / Sencha

  1. #1
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut App Inspector, l'application de débogage pour les développeurs de ExtJS et Sencha Touch
    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.
    Images attachées Images attachées  

  2. #2
    Membre éclairé
    Avatar de abraxis
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    439
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2007
    Messages : 439
    Points : 658
    Points
    658
    Par défaut
    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 ?
    # apt-get install freedom

  3. #3
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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.

Discussions similaires

  1. Intel annonce l'arrivée d'un Atom App Store pour les développeurs
    Par Katleen Erna dans le forum Actualités
    Réponses: 0
    Dernier message: 08/12/2009, 05h07
  2. Réponses: 35
    Dernier message: 15/10/2009, 17h18
  3. Réponses: 0
    Dernier message: 21/09/2009, 21h53
  4. Réponses: 0
    Dernier message: 21/09/2009, 21h53
  5. Y a t il un exemple d'application a suivre pour les débutants ?
    Par jlassiramzy dans le forum Services Web
    Réponses: 1
    Dernier message: 24/11/2006, 21h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo