Débogage à l’aide de l’outil AIR HTML IntrospectorLe 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 IntrospectorAdobe AIR HTML/JavaScript Application Introspector (appelé AIR HTML Introspector) propose des fonctions qui facilitent le développement et le débogage des applications HTML :
Chargement du code de l’outil AIR HTML IntrospectorLe 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 ConsoleLa 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 :
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 :
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 IntrospectorVous pouvez configurer la console en définissant les propriétés de la variable globaleAIRIntrospectorConfig. 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 :
Interface de l’outil AIR HTML IntrospectorPour 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 ConsoleL’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.
Onglet HTMLL’onglet HTML permet d’afficher l’intégralité du modèle HTML DOM dans une structure arborescente. Cliquez sur un élément pout 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 DOML’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 AssetsL’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 SourceL’onglet Source comporte trois sections :
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 XHRL’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 applicationVous 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 :
|
|
