Fouten opsporen met de AIR HTML Introspector

De SDK van Adobe® AIR® bevat een JavaScript-bestand met de naam AIRIntrospector.js dat u kunt opnemen in een toepassing voor het opsporen van fouten in HTML-toepassingen.

Informatie over de AIR Introspector

De AIR HTML/JavaScript Introspector biedt handige functies voor het ontwikkelen van HTML-toepassingen en het opsporen van fouten daarin:

  • Een introspectorgereedschap waarmee u een element in de gebruikersinterface van de toepassing kunt aanwijzen zodat de opmaakcode en DOM-eigenschappen van dat element worden weergegeven.

  • Een console voor het verzenden van objectverwijzingen voor introspectie en waarin u eigenschapwaarden kunt aanpassen en JavaScript-code kunt uitvoeren. Daarnaast kunt u objecten naar de console serialiseren, zodat de gegevens niet bewerkt kunnen worden. U kunt in de console ook tekst kopiëren en opslaan.

  • Een boomstructuurweergave voor DOM-eigenschappen en -functies.

  • Functies voor het bewerken van kenmerken en tekstknooppunten voor DOM-elementen.

  • Lijsten met koppelingen, CSS-stijlen, afbeeldingen en JavaScript-bestanden die in de toepassing zijn geladen.

  • Functies voor het weergeven van de eerste HTML-code en de huidige opmaakcode voor de gebruikersinterface.

  • Toegang tot bestanden in de toepassingsmap. (Deze functie is alleen beschikbaar voor de AIR HTML Introspector-console die voor de toepassingssandbox is geopend. De functie is dus niet beschikbaar voor consoles die zijn geopend voor sandboxinhoud die niet gerelateerd is aan de toepassing.)

  • Een viewer voor XMLHttpRequest-objecten en de bijbehorende eigenschappen, inclusief de eigenschappen responseText en responseXML (indien beschikbaar).

  • Een zoekfunctie voor tekst in de broncode en bestanden.

De AIR Introspector-code laden

De code voor de AIR Introspector staat in een JavaScript-bestand met de naam AIRIntrospector.js. Dit bestand staat in de map frameworks van de SDK van AIR. Als u de AIR Introspector in een toepassing wilt gebruiken, kopieert u het bestand AIRIntrospector.js naar de projectmap van de toepassing en laadt u het bestand via een scripttag in het hoofd-HTML-bestand in de toepassing:

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

U moet het bestand ook opnemen in alle HTML-bestanden die overeenkomen met de verschillende vensters in de toepassing

Belangrijk: neem het bestand AIRIntrospector.js alleen op wanneer u de toepassing ontwikkelt en bij het opsporen van fouten in de toepassing. Verwijder het bestand uit het pakket met de AIR-toepassing dat u gaat distribueren.

Het bestand AIRIntrospector.js definieert een klasse met de naam Console. Om vanuit JavaScript-code toegang te krijgen tot deze klasse, roept u air.Introspector.Console aan.

Opmerking: code die gebruik maakt van de AIR Introspector moet in de beveiligingssandbox van de toepassing staan (dit is een bestand in de toepassingsmap).

Een object op het tabblad Console inspecteren

De klasse Console definieert vijf methoden: log() , warn() , info() , error() en dump() .

Met de methoden log() , warn() , info() en error() kunt u een object naar het tabblad Console verzenden. De eenvoudigste van deze methode is de methode log() . Met de volgende code wordt een eenvoudig object, aangegeven met de variabele test , naar het tabblad Console verzonden:

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

Het is echter handiger om een complex object naar het tabblad Console te verzenden. Op bijvoorbeeld de volgende HTML-pagina staat een knop ( btn1 ) waarmee een functie wordt aangeroepen die het knopobject zelf naar het tabblad Console verzendt:

<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>

Wanneer op de knop wordt geklikt, wordt het object btn1 op het tabblad Console weergegeven en kunt u de boomstructuurweergave van het object uitvouwen om de eigenschappen te inspecteren:

Als u een eigenschap van het object wilt bewerken, klikt u op het item rechts naast de naam van de eigenschap zodat u de tekst kunt bewerken.

De methoden info() , error() en warn() werken net zoals de methode log() . Maar als u een van deze methoden aanroept, wordt in de Console een pictogram aan het begin van de regel weergegeven:

Methode

Pictogram

info()

error()

warn()

De methoden log() , warn() , info() en error() verzenden alleen een verwijzing naar een werkelijk object. Dit betekent dat alleen de eigenschappen die aanwezig zijn op het moment van weergave beschikbaar zijn. U kunt het werkelijke object serialiseren met de methode dump() . Deze methode heeft twee parameters:

Parameter

Beschrijving

dumpObject

Het object dat moet worden geserialiseerd.

levels

Het maximumaantal niveaus dat (naast het basisniveau) in de objectstructuur moet worden gecontroleerd. De standaardwaarde is 1. Dit houdt in dat één niveau boven het basisniveau van de boomstructuur wordt weergegeven. Deze parameter is optioneel.

Als de methode dump() wordt aangeroepen, wordt een object geserialiseerd voordat het naar het tabblad Console wordt verzonden, zodat de objecteigenschappen niet bewerkt kunnen worden. Neem bijvoorbeeld de volgende code:

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

Wanneer u deze code uitvoert, worden in de Console het object testObject en de bijbehorende eigenschappen weergegeven, maar de eigenschapwaarden kunnen niet worden bewerkt in de Console.

De AIR Introspector configureren

Als u de console wilt configureren, stelt u de eigenschappen van de globale variabele AIRIntrospectorConfig in. Met bijvoorbeeld de volgende JavaScript-code stelt u in de AIR Introspector tekstterugloop in op 100 tekens:

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

U moet de eigenschappen van de variabele AIRIntrospectorConfig instellen voordat het bestand AIRIntrospector.js wordt geladen (door middel van een script tag).

De variabele AIRIntrospectorConfig heeft acht eigenschappen:

Eigenschap

Standaardwaarde

Beschrijving

closeIntrospectorOnExit

true

Hiermee wordt ingesteld dat het Inspector-venster wordt gesloten wanneer alle andere vensters van de toepassing worden gesloten.

debuggerKey

123 (de toets F12)

De toetscode voor de sneltoets om het venster van de AIR Introspector weer te geven en te verbergen.

debugRuntimeObjects

true

Hiermee wordt ingesteld dat de Introspector naast objecten die in JavaScript zijn gedefinieerd ook runtime-objecten uitvouwt.

flashTabLabels

true

Hiermee wordt ingesteld dat op de tabbladen Console en XMLHttpRequest wordt aangegeven wanneer er sprake is van een wijziging (als er bijvoorbeeld tekst op deze tabbladen wordt gelogd).

introspectorKey

122 (de toets F11)

De toetscode voor de snelkoppeling waarmee het controledeelvenster wordt geopend.

showTimestamp

true

Hiermee wordt ingesteld dat op het tabblad Console aan het begin van elke regel een tijdstempel wordt weergegeven.

showSender

true

Hiermee wordt ingesteld dat op het tabblad Console aan het begin van elke regel informatie wordt weergegeven over het object dat het bericht verzendt.

wrapColumns

2000

Het aantal kolommen voor terugloop van bronbestanden.

AIR Introspector-interface

Als u het venster van AIR Introspector wilt openen tijdens het opsporen van fouten in de toepassing, drukt u op F12 of roept u een van de methoden van de klasse Console aan (zie Een object op het tabblad Console inspecteren ). U kunt een andere sneltoets configureren in plaats van F12. Zie hiervoor De AIR Introspector configureren .

Het venster van de AIR Introspector heeft zes tabbladen: Console, HTML, DOM, Middelen, Bron en XHR, zoals wordt weergegeven in de volgende illustratie:

Het tabblad Console

Op het tabblad Console worden de waarden weergegeven van eigenschappen die als parameters worden doorgegeven aan een van de methoden van de klasse air.Introspector.Console. Zie Een object op het tabblad Console inspecteren voor meer informatie.

  • Als u de console wilt leegmaken, klikt u met de rechtermuisknop op de tekst en selecteert u Console wissen.

  • Als u de tekst op het tabblad Console wilt opslaan in een bestand, klikt u met de rechtermuisknop op het tabblad Console en selecteert u Console opslaan in bestand.

  • Als u de tekst op het tabblad Console naar het klembord wilt kopiëren, klikt u met de rechtermuisknop op het tabblad Console en selecteert u Console opslaan op klembord. Als u alleen geselecteerde tekst naar het klembord wilt kopiëren, klikt u met de rechtermuisknop op de tekst en selecteert u Kopiëren.

  • Als u de tekst in de klasse Console wilt opslaan in een bestand, klikt u met de rechtermuisknop op het tabblad Console en selecteert u Console opslaan in bestand.

  • Als u wilt zoeken in de tekst die op het tabblad wordt weergegeven, klikt u op CTRL+F in Windows of Command+F in Mac OS. (Er wordt niet gezocht in knooppunten die niet zichtbaar zijn.)

Het tabblad HTML

Op het tabblad HTML kunt u de gehele HTML DOM in een boomstructuur bekijken. Als u op een element klikt, worden de bijbehorende eigenschappen aan de rechterkant van het tabblad weergegeven. Als u op het plusteken (+) of minteken (-) klikt, wordt een knooppunt in de boomstructuur uitgevouwen of samengevouwen.

U kunt elk kenmerk of tekstelement op het tabblad HTML bewerken. Deze wijzigingen worden meteen in de toepassing weerspiegeld.

Klik op de knop Inspecteren (links naast de lijst met tabbladen in het venster van de AIR Introspector). Als u op een willekeurig element op de HTML-pagina van het hoofdvenster klikt, wordt het bijbehorende DOM-object op het tabblad HTML weergegeven. Wanneer het hoofdvenster de focus heeft, kunt u de knop Inspecteren ook met de snelkoppeling in- en uitschakelen. De snelkoppeling is standaard F11. U kunt een andere sneltoets configureren in plaats van F11. Zie hiervoor De AIR Introspector configureren .

Klik op de knop Actieve venster vernieuwen (boven aan het venster van de AIR Introspector) om de gegevens die op het tabblad HTML worden weergegeven te vernieuwen.

Klik op CTRL+F in Windows of Command+F in Mac OS om te zoeken in de tekst die op het tabblad wordt weergegeven. (Er wordt niet gezocht in knooppunten die niet zichtbaar zijn.)

Het tabblad DOM

Op het tabblad DOM wordt het vensterobject in een boomstructuur weergegeven. U kunt elke tekenreeks en alle numerieke eigenschappen bewerken. Deze wijzigingen worden meteen in de toepassing weerspiegeld.

Klik op de knop Actieve venster vernieuwen (boven aan het venster van de AIR Introspector) om de gegevens die op het tabblad DOM worden weergegeven te vernieuwen.

Klik op CTRL+F in Windows of Command+F in Mac OS om te zoeken in de tekst die op het tabblad wordt weergegeven. (Er wordt niet gezocht in knooppunten die niet zichtbaar zijn.)

Het tabblad Middelen

Op het tabblad Middelen kunt u de koppelingen, afbeeldingen en CSS- en JavaScript-bestanden controleren die in het native venster zijn geladen. Als u een van deze knooppunten uitvouwt, wordt de inhoud van het bestand of de gebruikte afbeelding weergegeven.

Klik op de knop Actieve venster vernieuwen (boven aan het venster van de AIR Introspector) om de gegevens die op het tabblad Middelen worden weergegeven te vernieuwen.

Klik op CTRL+F in Windows of Command+F in Mac OS om te zoeken in de tekst die op het tabblad wordt weergegeven. (Er wordt niet gezocht in knooppunten die niet zichtbaar zijn.)

Het tabblad Bron

Het tabblad Bron bevat drie onderdelen:

  • Werkelijke bron: hier wordt de HTML-broncode weergegeven van de pagina die bij het starten van de toepassing wordt geladen als basisinhoud.

  • Geparseerde bron: hier wordt de huidige opmaakcode weergegeven die de interface van de toepassing vormt. Deze kan verschillen van de werkelijke bron, omdat de toepassingscode met behulp van Ajax de opmaakcode ter plekke genereert.

  • Toepassingsbestanden: een lijst van de bestanden in de toepassingsmap. Deze lijst is alleen beschikbaar voor de AIR Introspector wanneer deze wordt gestart vanuit inhoud in de beveiligingssandbox van de toepassing. In dit onderdeel kunt u de inhoud van tekst of afbeeldingen bekijken.

Klik op de knop Actieve venster vernieuwen (boven aan het venster van de AIR Introspector) om de gegevens die op het tabblad Bron worden weergegeven te vernieuwen.

Klik op CTRL+F in Windows of Command+F in Mac OS om te zoeken in de tekst die op het tabblad wordt weergegeven. (Er wordt niet gezocht in knooppunten die niet zichtbaar zijn.)

Het tabblad XHR

Het tabblad XHR onderschept alle XMLHttpRequest-communicatie in de toepassing en slaat deze gegevens op in een logboek. Hierdoor kunt u de XMLHttpRequest-eigenschappen, zoals responseText en responseXML (indien beschikbaar) in een boomstructuurweergave bekijken.

Klik op CTRL+F in Windows of Command+F in Mac OS om te zoeken in de tekst die op het tabblad wordt weergegeven. (Er wordt niet gezocht in knooppunten die niet zichtbaar zijn.)

De AIR Introspector gebruiken met inhoud in een niet-toepassingssandbox

U kunt inhoud vanuit de toepassingsmap laden naar een iframe of frame dat is toegewezen aan een niet-toepassingssandbox. (Zie HTML-beveiliging in Adobe AIR voor ActionScript-ontwikkelaars of HTML security in Adobe AIR voor ActionScript-ontwikkelaars). U kunt de AIR Introspector met dergelijke inhoud gebruiken, maar houd u daarbij aan de volgende regels:

  • Het bestand AIRIntrospector.js moet worden opgenomen in de inhoud van de toepassingssandbox en in de inhoud van de niet-toepassingssandbox (het iframe).

  • De eigenschap parentSandboxBridge mag niet worden overschreven omdat de AIR Introspector-code gebruik maakt van deze eigenschap. Voeg naar wens eigenschappen toe. Dus u schrijft niet het volgende:

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

    In plaats daarvan gebruikt u de volgende syntaxis:

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • Vanuit de niet-toepassingssandbox kunt u de AIR Introspector niet openen met F12 of door een van de methoden in de klasse air.Introspector.Console aan te roepen. U kunt het Introspector-venster alleen openen door te klikken op de knop Introspector openen. De knop staat standaard in de rechterbovenhoek van het iframe of frame. (Vanwege beveiligingsbeperkingen met betrekking tot inhoud in een niet-toepassingssandbox kan een nieuw venster alleen als gevolg van een actie van de gebruiker worden geopend.)

  • U kunt verschillende AIR Introspector-vensters openen voor de toepassingssandbox en de niet-toepassingssandbox. Met de titels van de AIR Introspector-vensters kunt u het verschil tussen de twee vensters aangeven.

  • Op het tabblad Bron worden geen toepassingsbestanden weergegeven wanneer de AIR Introspector wordt uitgevoerd vanuit een niet-toepassingssandbox.

  • De AIR Introspector kan alleen kijken naar code in de sandbox van waaruit deze is geopend.