Débogage à l’aide de l’outil AIR HTML Introspector

Le kit de développement d’Adobe® AIR® comprend le fichier JavaScript AIRIntrospector.js, que vous pouvez intégrer à l’application HTML pour permettre son débogage.

Présentation de l’outil AIR HTML Introspector

Adobe AIR HTML/JavaScript Application Introspector (appelé AIR HTML Introspector) propose des fonctions qui facilitent le développement et le débogage des applications HTML :

  • Cette application contient un outil d’introspection qui permet de pointer sur un élément de l’interface utilisateur de l’application pour afficher ses propriétés de marquage et DOM.

  • Elle intègre une console à laquelle vous envoyez des références d’objet à des fins d’introspection, ce qui vous permet d’ajuster la valeur des propriétés et d’exécuter le code JavaScript. Vous pouvez également sérialiser les objets vers la console, auquel cas il vous est impossible de modifier les données. Vous avez aussi la possibilité de copier et d’enregistrer du texte de la console.

  • Elle comprend une arborescence des propriétés et fonctions DOM.

  • Elle permet de modifier les attributs et les nœuds de texte des éléments DOM.

  • Elle répertorie les liens, styles CSS, images et fichiers JavaScript chargés dans l’application.

  • Elle permet d’afficher la source HTML initiale et la source de marquage en cours de l’interface utilisateur.

  • Elle permet d’accéder aux fichiers du répertoire de l’application. (Cette fonction est uniquement disponible pour la console AIR HTML Introspector ouverte pour le sandbox de l’application. Elle ne l’est pas dans les consoles ouvertes pour du contenu provenant d’un sandbox hors application.)

  • Elle comprend un visualisateur pour l’affichage des objets XMLHttpRequest et de leurs propriétés, y compris les propriétés responseText et responseXML (le cas échéant).

  • Vous pouvez rechercher du texte dans le code et les fichiers source.

Chargement du code de l’outil AIR HTML Introspector

Le code de l’outil AIR HTML Introspector figure dans un fichier JavaScript, AIRIntrospector.js, qui réside dans le répertoire frameworks du kit SDK AIR. Pour intégrer cet outil à l’application, copiez le fichier AIRIntrospector.js dans le répertoire de projet de l’application et chargez-le par le biais d’une balise script dans le fichier HTML principal de l’application :

<script type="text/javascript" src="AIRIntrospector.js"></script>

Intégrez également le fichier dans les fichiers HTML qui correspondent aux différentes fenêtres natives de l’application.

Important : incluez le fichier AIRIntrospector.js lors du développement et du débogage de l’application seulement. Supprimez-le de l’application AIR mise en package que vous distribuez.

Le fichier AIRIntrospector.js définit la classe Console, à laquelle vous pouvez accéder à partir du code JavaScript en appelant air.Introspector.Console .

Remarque : le code utilisant l’outil AIR HTML Introspector doit se trouver dans le sandbox de sécurité de l’application (dans un fichier résidant dans le répertoire de l’application).

Inspection d’un objet dans l’onglet Console

La classe Console définit cinq méthodes : log() , warn() , info() , error() et dump() .

Les méthodes log() , warn() , info() et error() permettent d’envoyer un objet à l’onglet Console. La méthode log() est la plus élémentaire d’entre elles. Le code suivant envoie un objet simple, représenté par la variable test , à l’onglet Console :

var test = "hello"; 
air.Introspector.Console.log(test);

Il est cependant plus judicieux d’envoyer un objet complexe à l’onglet Console. La page HTML suivante, par exemple, contient un bouton ( btn1 ) qui appelle une fonction qui envoie l’objet lui-même à l’onglet Console :

<html> 
    <head> 
        <title>Source Viewer Sample</title> 
        <script type="text/javascript" src="scripts/AIRIntrospector.js"></script> 
        <script type="text/javascript"> 
            function logBtn() 
            { 
                var button1 = document.getElementById("btn1"); 
                air.Introspector.Console.log(button1); 
            } 
        </script> 
    </head> 
    <body> 
        <p>Click to view the button object in the Console.</p> 
        <input type="button" id="btn1" 
            onclick="logBtn()"  
            value="Log" /> 
    </body> 
</html>

Lorsque vous cliquez sur le bouton, l’onglet Console affiche l’objet btn1 et, et vous pouvez développer l’arborescence de celui-ci pour inspecter ses propriétés :

Vous pouvez modifier une propriété de l’objet en cliquant sur le listing à droite du nom de la propriété et en modifiant le texte correspondant.

Les méthodes info() , error() et warn() sont similaires à la méthode log() . Toutefois, lorsque vous les appelez, une icône s’affiche au début de la ligne sur la console :

Méthode

Icône

info()

error()

warn()

Les méthodes log() , warn() , info() et error() se contentent d’envoyer une référence à un objet ; par conséquent, seules les propriétés présentes au moment de l’affichage sont disponibles. Pour sérialiser l’objet lui-même, utilisez la méthode dump() . Cette méthode gère deux paramètres :

Paramètre

Description

dumpObject

Objet à sérialiser.

levels

Nombre maximal de niveaux à examiner dans l’arborescence de l’objet (outre le niveau racine). La valeur par défaut est 1 (autrement dit, un niveau sous le niveau racine de l’arborescence est affiché). Ce paramètre est facultatif.

L’appel de la méthode dump() sérialise un objet avant de l’envoyer à l’onglet Console ; vous ne pouvez donc pas modifier ses propriétés. Considérons par exemple le code qui suit :

var testObject = new Object(); 
testObject.foo = "foo"; 
testObject.bar = 234; 
air.Introspector.Console.dump(testObject);

Lorsque vous exécutez ce code, l’objet testObject et ses propriétés s’affichent sur la console, mais il vous est impossible de modifier la valeur des propriétés.

Configuration de l’outil AIR HTML Introspector

Vous pouvez configurer la console en définissant les propriétés de la variable globale AIRIntrospectorConfig . Le code JavaScript suivant, par exemple, configure l’outil AIR HTML Introspector de sorte à renvoyer automatiquement à la ligne le texte des colonnes à partir de 100 caractères :

var AIRIntrospectorConfig = new Object(); 
AIRIntrospectorConfig.wrapColumns = 100;

Veillez à définir les propriétés de la variable AIRIntrospectorConfig avant de charger le fichier AIRIntrospector.js (via une balise script ).

Les huit propriétés de la variable AIRIntrospectorConfig sont les suivantes :

Propriété

Valeur par défaut

Description

closeIntrospectorOnExit

true

Configure la fenêtre de l’outil AIR HTML Introspector de sorte qu’elle se ferme à la fermeture de toutes les autres fenêtres de l’application.

debuggerKey

123 (touche F12)

Code de touche du raccourci clavier permettant d’afficher et de masquer la fenêtre de l’outil AIR HTML Introspector.

debugRuntimeObjects

true

Configure l’outil AIR HTML Introspector de sorte à développer les objets d’exécution en plus des outils définis dans JavaScript.

flashTabLabels

true

Configure les onglets Console et XMLHttpRequest de sorte qu’ils clignotent en cas de modification (lorsque du texte y est enregistré par exemple).

introspectorKey

122 (touche F11)

Code de touche du raccourci clavier permettant d’ouvrir le panneau Inspect.

showTimestamp

true

Configure l’onglet Console de sorte à afficher les informations d’horodatage au début de chaque ligne.

showSender

true

Configure l’onglet Console de sorte à afficher des informations sur l’objet qui envoie le message au début de chaque ligne.

wrapColumns

2000

Nombre de colonnes au-delà duquel se produit un retour à la ligne dans les fichiers sources.

Interface de l’outil AIR HTML Introspector

Pour ouvrir la fenêtre de l’outil AIR HTML Introspector lors du débogage de l’application, appuyez sur la touche F12 ou appelez une des méthodes de la classe Console (voir Inspection d’un objet dans l’onglet Console ). Vous pouvez remplacer par une autre touche la touche d’accès rapide F12 (voir Configuration de l’outil AIR HTML Introspector ).

La fenêtre de l’outil AIR HTML Introspector contient six onglets, Console, HTML, DOM, Assets, Source et XHR illustrés ci-dessous :

Onglet Console

L’onglet Console affiche les valeurs des propriétés transmises en tant que paramètres à l’une des méthodes de la classe air.Introspector.Console. Pour plus d’informations, voir Inspection d’un objet dans l’onglet Console .

  • Pour effacer le contenu de la console, cliquez avec le bouton droit de la souris sur le texte et sélectionnez Clear Console.

  • Pour enregistrer le texte de l’onglet Console dans un fichier, cliquez avec le bouton droit de la souris sur l’onglet et sélectionnez Save Console To File.

  • Pour enregistrer le texte de l’onglet Console dans le Presse-papiers, cliquez avec le bouton droit de la souris sur l’onglet et sélectionnez Save Console To Clipboard. Pour copier le texte sélectionné uniquement dans le Presse-papiers, cliquez dessus avec le bouton droit de la souris et sélectionnez Copy.

  • Pour enregistrer le texte de la classe Console dans un fichier, cliquez avec le bouton droit de la souris sur l’onglet et sélectionnez Save Console To File.

  • Pour rechercher du texte dans l’onglet, appuyez sur Ctrl+F (Windows) ou Commande+F (Mac OS). (La recherche ne porte pas sur les nœuds de l’arborescence qui ne sont pas visibles.)

Onglet HTML

L’onglet HTML permet d’afficher l’intégralité du modèle HTML DOM dans une structure arborescente. Cliquez sur un élément pour afficher ses propriétés dans la partie droite de l’onglet. Cliquez sur les icônes + et - pour développer ou réduire un nœud dans l’arborescence.

Vous pouvez modifier tout attribut ou élément de texte dans l’onglet HTML. La valeur modifiée est répercutée dans l’application.

Cliquez sur le bouton Inspect (à gauche de la liste d’onglets de la fenêtre de l’outil AIR HTML Introspector). Vous pouvez cliquer sur tout élément dans la page HTML de la fenêtre principale. L’objet DOM associé est affiché dans l’onglet HTML. Lorsque la fenêtre principale possède le focus, vous pouvez aussi appuyer sur le raccourci clavier pour activer ou désactiver le bouton Inspect. Le raccourci clavier par défaut est F11. Vous pouvez le remplacer par une autre touche (voir Configuration de l’outil AIR HTML Introspector ).

Cliquez sur le bouton Refresh active window (dans la partie supérieure de la fenêtre de l’outil AIR HTML Introspector) pour actualiser les données affichées dans l’onglet HTML.

Appuyez sur Ctrl+F (Windows) ou Commande+F (Mac OS) pour rechercher du texte dans l’onglet. (La recherche ne porte pas sur les nœuds de l’arborescence qui ne sont pas visibles.)

Onglet DOM

L’onglet DOM affiche l’objet Window dans une structure arborescente. Vous pouvez modifier toute propriété de type chaîne ou numérique. La valeur modifiée est répercutée dans l’application.

Cliquez sur le bouton Refresh active window (dans la partie supérieure de la fenêtre de l’outil AIR HTML Introspector) pour actualiser les données affichées dans l’onglet DOM.

Appuyez sur Ctrl+F (Windows) ou Commande+F (Mac OS) pour rechercher du texte dans l’onglet. (La recherche ne porte pas sur les nœuds de l’arborescence qui ne sont pas visibles.)

Onglet Assets

L’onglet Assets permet de vérifier les liens, les images et les fichiers CSS et JavaScript chargés dans la fenêtre native. Lorsque vous développez l’un de ces nœuds, le contenu du fichier ou l’image utilisé s’affiche.

Cliquez sur le bouton Refresh active window (dans la partie supérieure de la fenêtre de l’outil AIR HTML Introspector) pour actualiser les données affichées dans l’onglet Assets.

Appuyez sur Ctrl+F (Windows) ou Commande+F (Mac OS) pour rechercher du texte dans l’onglet. (La recherche ne porte pas sur les nœuds de l’arborescence qui ne sont pas visibles.)

Onglet Source

L’onglet Source comporte trois sections :

  • Actual source : affiche le code source HTML de la page chargée en tant que contenu racine au démarrage de l’application.

  • Parsed source : affiche le code de marquage en cours constituant l’interface utilisateur de l’application, qui peut différer du code source en tant que tel, puisque l’application génère le code de marquage à la volée à l’aide de techniques Ajax.

  • Application files : répertorie les fichiers qui figurent dans le répertoire de l’application. Cette liste est uniquement disponible lorsque l’outil AIR HTML Introspector est lancé à partir du sandbox de sécurité de l’application. Dans cette section, vous pouvez afficher le contenu des fichiers de texte ou des images.

Cliquez sur le bouton Refresh active window (dans la partie supérieure de la fenêtre de l’outil AIR HTML Introspector) pour actualiser les données affichées dans l’onglet Source.

Appuyez sur Ctrl+F (Windows) ou Commande+F (Mac OS) pour rechercher du texte dans l’onglet. (La recherche ne porte pas sur les nœuds de l’arborescence qui ne sont pas visibles.)

Onglet XHR

L’onglet XHR intercepte toutes les requêtes XMLHttpRequest au sein de l’application et enregistre ces informations. Vous pouvez ainsi afficher les propriétés XMLHttpRequest, y compris responseText et responseXML (le cas échéant) dans une structure arborescente.

Appuyez sur Ctrl+F (Windows) ou Commande+F (Mac OS) pour rechercher du texte dans l’onglet. (La recherche ne porte pas sur les nœuds de l’arborescence qui ne sont pas visibles.)

Utilisation de l’outil AIR HTML Introspector avec du contenu d’un sandbox hors application

Vous pouvez charger du contenu à partir du répertoire de l’application dans un iframe ou une image mappé sur un sandbox hors application (Voir Sécurité HTML dans Adobe AIR (développeurs ActionScript) ou Sécurité HTML dans Adobe AIR (développeurs HTML)). Vous pouvez utiliser l’outil AIR HTML Introspector avec un tel contenu, à condition de respecter les règles suivantes :

  • Le fichier AIRIntrospector.js file doit être inclus dans le contenu du sandbox de l’application et du sandbox hors application (iframe).

  • Ne remplacez pas la propriété parentSandboxBridge . Elle est utilisée par le code de l’outil AIR HTML Introspector. Ajoutez les propriétés lorsqu’elles sont nécessaires. N’utilisez pas la syntaxe suivante, par exemple :

    parentSandboxBridge = mytrace: function(str) {runtime.trace(str)}} ;

    Utilisez plutôt la syntaxe ci-dessous :

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • Il est impossible d’ouvrir la fenêtre de l’outil AIR HTML Introspector à partir du contenu d’un sandbox hors application, en appuyant sur la touche F12 ou en appelant une des méthodes de la classe air.Introspector.Console. La seule façon d’ouvrir cette fenêtre consiste à cliquer sur le bouton Open Introspector, qui est ajouté par défaut dans l’angle supérieur droit de l’iframe ou de l’image. (En raison des restrictions de sécurité appliquées au contenu du sandbox hors application, seule une action de l’utilisateur, telle que cliquer sur un bouton, permet d’ouvrir une nouvelle fenêtre).

  • Vous pouvez ouvrir une fenêtre de l’outil AIR HTML Introspector pour le sandbox de l’application et une autre pour le sandbox hors application. Le titre de ces fenêtres permet de les différencier.

  • L’onglet Source n’affiche pas les fichiers d’application lorsque l’outil AIR HTML Introspector s’exécute à partir d’un sandbox hors application.

  • L’outil AIR HTML Introspector peut uniquement vérifier le code du sandbox à partir duquel il a été ouvert.