Felsökning med AIR HTML Introspector

I Adobe® AIR® SDK finns JavaScript-filen AIRIntrospector.js som du kan ta med i ditt program för att få hjälp med att felsöka HTML-baserade program.

Om AIR Introspector

Med Adobe AIR HTML/JavaScript Application Introspector (även kallad AIR HTML Introspector) får du tillgång till kraftfulla funktioner för att utveckla och felsöka HTML-baserade program:

  • Den innehåller ett undersökningsverktyg som gör att du kan peka på ett användargränssnittselement i programmet och se dess kod och DOM-egenskaper.

  • Den innehåller en konsol för att skicka objektreferenser för undersökning och du kan ändra egenskapsvärden och köra JavaScript-kod. Du kan dessutom serialisera objekt till konsolen, vilket hindrar dig från att redigera data. Du kan även kopiera och spara text från konsolen.

  • Den innehåller ett trädvy med DOM-egenskaper och -funktioner.

  • Den gör det möjligt för dig att redigera attribut och textnoder för DOM-element.

  • Här listas länkar, CSS-format, bilder och JavaScript-filer inlästa i programmet.

  • Den gör att du kan se den ursprungliga HTML-källan och den aktuella kodkällan för användargränssnittet.

  • Den ger dig tillgång till filer i programkatalogen. (Den här funktionen är endast tillgänglig för AIR HTML Introspector-konsolen som är öppen för programsandlådan. Den är inte tillgänglig för konsolerna som är öppna för innehåll som inte tillhör programsandlådan.)

  • Den innehåller ett visningsprogram för XMLHttpRequest-objekt och deras egenskaper, inklusive egenskaperna responseText och responseXML (när de är tillgängliga).

  • Du kan söka efter matchande text i källkoden och filerna.

Läsa in kod för AIR Introspector

Koden för AIR Introspector finns i JavaScript-filen, AIRIntrospector.js, som ingår i ramverkskatalogen för AIR SDK. Om du vill använda AIR Introspector i ditt program ska du kopiera AIRIntrospector.js till programmets projektkatalog och läsa in filen via en script-tagg i HTML-huvudfilen i programmet:

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

Du ska även inkludera filen i alla HTML-filer som motsvarar olika inbyggda fönster i ditt program.

Viktigt! Inkludera AIRIntrospector.js-filen endast medan du utvecklar eller felsöker programmet. Ta bort den från det paketerade AIR-programmet som du tänker distribuera.

I AIRIntrospector.js-filen definieras en klass, Console, som du kommer åt från JavaScript-koden genom att anropa air.Introspector.Console .

Obs! Kod där AIR Introspector används måste finnas i programmets säkerhetssandlåda (i en fil i programkatalogen).

Inspektera ett objekt på fliken Konsol

I Console-klassen definieras fem metoder: log() , warn() , info() , error() och dump() .

Med metoderna log() , warn() , info() och error() kan du skicka ett objekt till fliken Konsol. Den mest enkla av dessa metoder är log() -metoden. I följande kod skickas ett enkelt objekt, presenterat av variabeln test , till fliken Konsol:

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

Det är emellertid mer användbart att skicka sammansatta objekt till fliken Konsol. På exempelvis följande HTML-sida finns en knapp ( btn1 ) som anropar en funktion som skickar själva knappobjektet till fliken Konsol:

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

När du klickar på knappen visas btn1-objektet på fliken Konsol. Du kan expandera trädvyn för objektet om du vill kontrollera dess egenskaper:

Du kan redigera en objektsegenskap genom att i listan till höger klicka på egenskapsnamnet och ändra textlistan.

Metoderna info() , error() och warn() fungerar som log() -metoden. Däremot när du anropar dessa metoder visas på konsolen en ikon i början av raden:

Metod

Ikon

info()

error()

warn()

Med metoderna log() , warn() , info() och error() skickas en referens endast till det faktiska objektet, vilket innebär att de egenskaper som är tillgängliga är de som du för närvarande ser. Om du vill serialisera det faktiska objektet ska du använda metoden dump() . Den här metoden har två parametrar:

Parameter

Beskrivning

dumpObject

Objektet som ska serialiseras.

levels

Det högsta antalet nivåer som ska undersökas i objektträdet (förutom rotninvån). Standardvärdet är 1, vilket innebär att en nivå ovanför rotnivån på trädet visas. Den här parametern är valfri.

När metoden dump() anropas serialiseras ett objekt innan det skickas till fliken Konsol, vilket medför att du inte kan redigera objektsegenskaperna. Titta på följande kod:

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

När du kör den här koden visas testObject -objektet och dess egenskaper på konsolen, men du kan inte redigera egenskapsvärdena på konsolen.

Konfigurera AIR Introspector

Du konfigurerar konsolen genom att ställa in egenskaper för den globala variabeln AIRIntrospectorConfig . I exempelvis följande JavaScript-kod konfigureras AIR Introspector så att kolumner bryts vid 100 tecken:

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

Se till att du ställer in egenskaperna för variabeln AIRIntrospectorConfig innan du läser in AIRIntrospector.js-filen (med en script -tagg).

Det finns åtta egenskaper för variabeln AIRIntrospectorConfig :

Egenskap

Standardvärde

Beskrivning

closeIntrospectorOnExit

true

Ställer in Inspector-fönstret så att det stängs när alla andra fönster i applikationen är stängda.

debuggerKey

123 (F12-tangenten)

Nyckelkoden för kortkommandot för att visa och dölja fönstret AIR Introspector.

debugRuntimeObjects

true

Ställer in Introspector för att expandera körningsobjekt, förutom objekt definierade i JavaScript.

flashTabLabels

true

Ställer in konsolen och XMLHttpRequest-flikarna så att de börjar blinka, vilket visar att en förändring inträffat i dem (till exempel när text loggas på dessa flikar).

introspectorKey

122 (F11-tangenten)

Nyckelkoden för kortkommandon som används för att öppna panelen Inspektera.

showTimestamp

true

Ställer in fliken Konsol så att tidsstämplar visas i början av varje rad.

showSender

true

Ställer in fliken Konsol så att information visas i början av varje rad för objektet som skickar meddelandet.

wrapColumns

2000

Antalet kolumner där källfiler kommer att brytas.

Gränssnittet för AIR Introspector

Tryck på tangenten F12 eller anropa en av metoderna i Console-klassen när du vill öppna fönstret AIR Introspector för att felsöka programmet (se Inspektera ett objekt på fliken Konsol ). Du kan konfigurera snabbtangenten så att du kan använda en annan tangent än F12-tangenten; se Konfigurera AIR Introspector .

Fönstret AIR Introspector innehåller sex flikar – Konsol, HTML, DOM, Resurser, Källa och XHR – vilket framgår av bilden nedan:

Fliken Konsol

På fliken Konsol visas värden för egenskaperna som skickas som parametrar till en av metoderna i air.Introspector.Console-klassen. Mer information finns i Inspektera ett objekt på fliken Konsol .

  • Högerklicka på texten och välj Rensa konsol när du vill ta bort information i konsolen.

  • Högerklicka på fliken Konsol och välj Spara konsol i fil när du vill spara texten på konsolfliken.

  • Högerklicka på fliken Konsol och välj Spara konsol i urklipp när du vill spara texten på konsolfliken i urklippshanteraren. Högerklicka på texten och välj Kopiera när du vill kopiera den markerade texten.

  • Högerklicka på fliken Konsol och välj Spara konsol i fil när du vill spara texten i Console-klassen.

  • Tryck på CTRL+F i Windows eller Command+F i Mac OS när du vill söka efter text som finns på fliken. (Det går endast att söka i trädnoder som visas.)

Fliken HTML

På fliken HTML kan du visa hela HTML DOM i en trädstruktur. Klicka på ett element för att visa dess egenskaper till höger på fliken. Klicka på tecken + och - för att expandera respektive minimera en nod i trädet.

Du kan redigera alla attribut och textelement på HTML-fliken, och de redigerade värdena påverkar sedan programmet.

Klicka på knappen Inspektera (till vänster om fliklistan i AIR Introspector-fönstret). Du kan klicka på alla element på HTML-sidan i huvudfönstret och de associerade DOM-objekten kommer då att visas på fliken HTML. När huvudfönstret är aktivt kan du trycka på kortkommandot för att aktivera eller inaktivera knappen Inspektera. Kortkommandot är som standard F11. Du kan konfigurera kortkommando så att du kan använda en annan tangent än F11-tangenten; se Konfigurera AIR Introspector .

Klicka på knappen Uppdatera aktivt fönster (högst upp i fönstret AIR Introspector) för att uppdatera de data som visas på fliken HTML.

Tryck på CTRL+F i Windows eller på Command+F i Mac OS för att söka efter text som visas på fliken. (Det går endast att söka i trädnoder som visas.)

Fliken DOM

På fliken DOM visas fönsterobjekten i en trädstruktur. Du kan redigera strängarna och de numeriska egenskaperna. De redigerade värdena visas i programmet.

Klicka på knappen Uppdatera aktivt fönster (högst upp i fönstret AIR Introspector) för att uppdatera de data som visas på fliken DOM.

Tryck på CTRL+F i Windows eller på Command+F i Mac OS för att söka efter text som visas på fliken. (Det går endast att söka i trädnoder som visas.)

Fliken Resurser

På fliken Resurser kan du kontrollera länkarna, bilderna samt CSS- och JavaScript-filerna som lästs in i det inbyggda fönstret. När du expanderar en av dessa noder visas filens innehåll eller den bild som används.

Klicka på knappen Uppdatera aktivt fönster (högst upp i fönstret AIR Introspector) för att uppdatera de data som visas på fliken Resurser.

Tryck på CTRL+F i Windows eller på Command+F i Mac OS för att söka efter text som visas på fliken. (Det går endast att söka i trädnoder som visas.)

Fliken Källa

Fliken Källa innehåller tre avsnitt:

  • Faktisk källa – Här visas sidans HTML-källa som lästes in i rotinnehållet när programmet startades.

  • Tolkad källa – Här visas den aktuella koden som används för att skapa programmets gränssnitt, vilken kan skilja sig från den faktiska källan eftersom programmet automatiskt genererar kod med Ajax-tekniker.

  • Programfiler – Här listas filerna i programkatalogen. Den här listan är bara tillgänglig för AIR Introspector när programmet startas från innehåll i programmets säkerhetssandlåda. I detta avsnitt kan du visa innehållet i textfiler och visa bilder.

Klicka på knappen Uppdatera aktivt fönster (högst upp i fönstret AIR Introspector) för att uppdatera de data som visas på fliken Källa.

Tryck på CTRL+F i Windows eller på Command+F i Mac OS för att söka efter text som visas på fliken. (Det går endast att söka i trädnoder som visas.)

Fliken XHR

På fliken XHR fångas all XMLHttpRequest-kommunikation i programmet och informationen loggas. Detta medför att du kan se XMLHttpRequest-egenskaperna inklusive responseText och responseXML (när de är tillgängliga) i en trädvy.

Tryck på CTRL+F i Windows eller på Command+F i Mac OS för att söka efter text som visas på fliken. (Det går endast att söka i trädnoder som visas.)

Använda AIR Introspector med innehåll i en icke-programsandlåda

Du kan läsa in innehållet från programkatalogen i en iframe eller frame som är mappad till en icke-programsandlåda. (Läs HTML-säkerhet i Adobe AIR för ActionScript-utvecklare eller HTML security in Adobe AIR för HTML-utvecklare). Du kan använda AIR Introspector med sådant innehåll, men tänk på följande regler:

  • Filen AIRIntrospector.js måste finnas med i innehållet både i programsandlådan och i icke-programsandlådan (iframe).

  • Skriv inte över egenskapen parentSandboxBridge eftersom den används i AIR Introspector-koden. Lägg till egenskaper efter behov. Så i stället för att skriva följande:

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

    ska du använda följande syntax:

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • Från innehållet i icke-programsandlådan kan du inte öppna AIR Introspector genom att trycka på tangenten F12 eller genom att anropa en av metoderna i air.Introspector.Console-klassen. Du kan endast öppna Introspector-fönstret genom att klicka på knappen Introspector. Knappen läggs automatiskt till i det övre högra hörnet i iframe eller frame. (På grund av de säkerhetsrestriktioner som gäller för innehåll i icke-programsandlådan, kan ett nytt fönster endast öppnas som ett resultat från en åtgärd från användaren, till exempel när någon klickar på en knapp.)

  • Du kan öppna olika AIR Introspector-fönster för programsandlådan och för icke-programsandlådan. Du kan skilja de båda åt genom att använda rubriken som visas i AIR Introspector-fönstret.

  • På fliken Källa visas inte programfiler när AIR Introspector körs från en icke-programsandlåda.

  • I AIR Introspector går det endast att se kod i sandlådan varifrån den öppnades.