Debugowanie za pomocą introspektora HTML w środowisku AIR

Pakiet SDK Adobe® AIR® zawiera plik JavaScript o nazwie AIRIntrospector.js, który można dołączyć do aplikacji, aby ułatwić debugowanie aplikacji HTML.

Informacje o introspektorze AIR

Introspektor aplikacji HTML/JavaScript w środowisku Adobe AIR (nazywany introspektorem HTML AIR) udostępnia użyteczne funkcje przeznaczone do wdrażania i debugowania aplikacji opartych na kodzie HTML:

  • Do tych funkcji należy introspektor, który umożliwia wskazywanie na element interfejsu użytkownika w aplikacji w celu sprawdzenia oznaczenia i właściwości DOM tego elementu.

  • Zawiera także konsolę przeznaczoną do wysyłania odwołań do obiektu w celu sprawdzenia, a także umożliwia dostosowywanie wartości właściwości i wykonywanie kodu JavaScript. Możliwa jest także serializacja obiektów do konsoli, co ogranicza możliwości edytowania danych. Można także kopiować i zapisywać tekst z konsoli.

  • Introspektor zawiera widok drzewa dla właściwości i funkcji DOM.

  • Umożliwia edytowanie atrybutów i węzłów tekstu dla elementów DOM.

  • Zawiera listy odsyłaczy, stylów CSS, obrazów oraz plików JavaScript załadowanych do aplikacji.

  • Umożliwia sprawdzanie pierwotnego źródła HTML oraz źródła bieżących oznaczeń dla interfejsu użytkownika.

  • Umożliwia uzyskiwanie dostępu do plików w katalogu aplikacji. (Jest to możliwe tylko w przypadku konsoli introspektora HTML AIR otwartej dla obszaru izolowanego aplikacji. Nie jest możliwe w przypadku konsoli otwartych dla nieaplikacyjnych obszarów izolowanych).

  • Zawiera przeglądarkę obiektów XMLHttpRequest oraz ich właściwości, łącznie z właściwościami responseText i responseXML (jeśli są dostępne).

  • Zgodny tekst można wyszukiwać w kodzie źródłowym i plikach źródłowych.

Ładowanie kodu introspektora AIR

Kod introspektora AIR jest zawarty w pliku JavaScript AIRIntrospector.js, który znajduje się w katalogu infrastruktury pakietu AIR SDK. W celu korzystania z introspektora AIR w aplikacji należy skopiować plik AIRIntrospector.js do katalogu projektu aplikacji i załadować go za pośrednictwem znacznika script w głównym pliku HTML aplikacji:

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

Plik należy również dołączyć do każdego pliku HTML, który odpowiada różnym rodzimym oknom aplikacji.

Ważne: Plik AIRIntrospector.js należy dołączyć tylko wówczas, gdy wymagane jest wdrażanie i debugowanie aplikacji. Należy go usunąć z pakietu aplikacji AIR przeznaczonej do dystrybucji.

Plik AIRIntrospector.js definiuje klasę Console, do której dostęp można uzyskać z kodu JavaScript poprzez wywołanie air.Introspector.Console.

Uwaga: Kod korzystający z introspektora AIR musi znajdować się w bezpiecznym obszarze izolowanym aplikacji (w pliku w katalogu aplikacji).

Kontrola obiektu na karcie Konsola

Klasa Console definiuje pięć metod: log(), warn(), info(), error() i dump().

Metody log(), warn(), info() i error() umożliwiają wysłanie obiektu na kartę Konsola. Najprostszą z tych metod jest log(). Poniższy kod wysyła prosty obiekt, reprezentowany przez zmienną test, na kartę Konsola:

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

Jednak bardziej użyteczne jest wysłanie do karty Konsola obiektu złożonego. Na przykład: poniższa strona HTML zawiera przycisk (btn1), który wywołuje funkcję, która wysyła obiekt przycisku na kartę Konsola:

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

Po kliknięciu przycisku na karcie Konsola pojawi się obiekt btn1 i możliwe będzie rozwinięcie widoku drzewa obiektu w celu sprawdzenia jego właściwości:

W celu edytowania właściwości obiektu należy kliknąć listing po prawej stronie nazwy właściwości, a następnie zmodyfikować listing.

Metody info(), error() i warn() działają podobnie, jak metoda log(). Jednak wywołanie tych metod powoduje, że w konsoli wyświetlana jest ikona na początku wiersza:

Metoda

Ikona

info()

error()

warn()

Metody log(), warn(), info() i error() wysyłają odwołanie tylko do rzeczywistego obiektu, dlatego dostępne są tylko właściwości w momencie wyświetlania. Jeśli wymagana jest serializacja obiektu rzeczywistego, należy użyć metody dump(). Metoda zawiera dwa parametry:

Parametr

Opis

dumpObject

Obiekt przeznaczony do serializacji.

levels

Maksymalna liczba poziomów do sprawdzenia w drzewie obiektu (oprócz poziomu głównego). Wartością domyślną jest 1 (co oznacza, że wyświetlany jest jeden poziom drzewa (oprócz poziomu głównego)). Ten parametr jest opcjonalny.

Wywołanie metody dump() powoduje serializację obiektu przed wysłaniem go do karty Konsola, co sprawia, że nie można edytować jego właściwości. Weźmy na przykład pod uwagę następujący kod:

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

Po wykonaniu tego kodu na karcie Konsola pojawia się obiekt testObject oraz jego właściwości, ale wartości właściwości nie można edytować w Konsoli.

Konfigurowanie introspektora AIR

Konsolę można skonfigurować poprzez ustawienie właściwości globalnej zmiennej AIRIntrospectorConfig. Na przykład: poniższy kod JavaScript konfiguruje Introspektora AIR w taki sposób, aby zawijał zawartość kolumn przy 100 znakach:

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

Właściwości zmiennej AIRIntrospectorConfig należy ustawić przed załadowaniem pliku AIRIntrospector.js (za pośrednictwem znacznika script).

Zmienna AIRIntrospectorConfig ma osiem właściwości:

Właściwość

Wartość domyślna

Opis

closeIntrospectorOnExit

true

Ustawia okno Introspektor w taki sposób, że zostaje ono zamknięte, gdy wszystkie pozostałe okna aplikacji są zamknięte.

debuggerKey

123 (klawisz F12)

Kod skrótu klawiaturowego, który umożliwia wyświetlanie i ukrywanie okna Introspektor AIR.

debugRuntimeObjects

true

Ustawia introspektor w taki sposób, aby rozszerzał obiekty środowiska wykonawczego, a także obiekty zdefiniowane w JavaScript.

flashTabLabels

true

Powoduje, że karty Konsola i XMLHttpRequest migają przy każdej zmianie (na przykład, gdy dojdzie do zarejestrowania tekstu na kartach).

introspectorKey

122 (klawisz F11)

Kod skrótu klawiszowego przeznaczonego do otwierania panelu Sprawdź.

showTimestamp

true

Ustawia kartę Konsola w taki sposób, aby wyświetlała znaczniki czasu na początku każdego wiersza.

showSender

true

Ustawia kartę Konsola w taki sposób, aby na początku każdego wiersza wyświetlane były informacje o obiekcie wysyłającym komunikat.

wrapColumns

2000

Liczba kolumn, przy której pliki źródłowe są zawijane.

Interfejs introspektora AIR

W celu otwarcia okna introspektora AIR podczas debugowania aplikacji należy nacisnąć klawisz F12 lub wywołać jedną z metod klasy Console (patrz Kontrola obiektu na karcie Konsola). Istnieje możliwość skonfigurowania innego klawisza aktywnego niż F12; informacje zawiera sekcja Konfigurowanie introspektora AIR.

Okno Introspektor AIR zawiera sześć kart — Konsola, HTML, DOM, Zasoby, Źródło i XHR — co przedstawiono na poniższej ilustracji:

Karta Konsola

Na karcie Konsola widoczne są wartości właściwości przekazanych jako parametry do jednej z metod klasy air.Introspector.Console. Szczegółowe informacje zawiera sekcja Kontrola obiektu na karcie Konsola.

  • Aby wyczyścić zawartość konsoli, należy kliknąć prawym przyciskiem myszy tekst i wybrać opcję Wyczyść konsolę.

  • Aby zapisać tekst z karty Konsola w pliku, należy kliknąć prawym przyciskiem myszy kartę Konsola i wybrać opcję Zapisz konsolę w pliku.

  • Aby zapisać tekst z karty Konsola w schowku, należy kliknąć prawym przyciskiem myszy kartę Konsola i wybrać opcję Zapisz konsolę w schowku. Aby skopiować tylko zaznaczony tekst do konsoli, należy kliknąć tekst prawym przyciskiem myszy i wybrać opcję Kopiuj.

  • Aby zapisać tekst z klasy Console w pliku, należy kliknąć prawym przyciskiem myszy kartę Konsola i wybrać opcję Zapisz konsolę w pliku.

  • W celu wyszukiwania zgodnego tekstu wyświetlanego na karcie należy nacisnąć klawisze CTRL+F w systemie Windows i Command+F w systemie Mac OS. (Niewidoczne węzły drzewa nie będą przeszukiwane).

Karta HTML

Na karcie HTML można wyświetlać całą strukturę DOM HTML w postaci drzewa. Kliknięcie elementu powoduje wyświetlenie jego właściwości po prawej stronie karty. Klikanie ikon + i - obok węzłów umożliwia rozwijanie i zwijanie węzłów w drzewie.

Na karcie HTML można edytować dowolne atrybuty i elementy tekstu, a zmiana wartości zostanie uwzględniona w aplikacji.

Kliknij przycisk Sprawdź (po lewej stronie listy kart w oknie Introspektor AIR). Można kliknąć dowolny element na stronie HTML głównego okna, a powiązany obiekt DOM zostanie wyświetlony na karcie HTML. Jeśli aktywne jest główne okno, można również nacisnąć skrót klawiaturowy, który powoduje aktywację i dezaktywację przycisku Sprawdź. Domyślnie jest to klawisz F11. Istnieje możliwość skonfigurowania innego klawisza aktywnego niż F11; informacje zawiera sekcja Konfigurowanie introspektora AIR.

Kliknięcie przycisku Odśwież aktywne okno (u góry okna Introspektor AIR) powoduje odświeżenie danych widocznych na karcie HTML.

W celu wyszukiwania tekstu na karcie należy nacisnąć klawisze CTRL+F (w systemie Windows) lub Command+F (w systemie Mac OS). (Niewidoczne węzły drzewa nie będą przeszukiwane).

Karta DOM

Karta DOM przedstawia obiekt okna w strukturze drzewa. Na tej karcie można edytować dowolne właściwości ciągów znaków i liczb, a zmiana wartości zostanie uwzględniona w aplikacji.

Kliknięcie przycisku Odśwież aktywne okno (u góry okna Introspektor AIR) powoduje odświeżenie danych widocznych na karcie DOM.

W celu wyszukiwania tekstu na karcie należy nacisnąć klawisze CTRL+F (w systemie Windows) lub Command+F (w systemie Mac OS). (Niewidoczne węzły drzewa nie będą przeszukiwane).

Karta Zasoby

Na karcie Zasoby można sprawdzać odsyłacze, obrazy, style CSS oraz pliki JavaScript załadowane w rodzimym oknie. Rozwinięcie jednego z tych węzłów powoduje wyświetlenie zawartości pliku lub wyświetlenie rzeczywistego używanego obrazu.

Kliknięcie przycisku Odśwież aktywne okno (u góry okna Introspektor AIR) powoduje odświeżenie danych widocznych na karcie Zasoby.

W celu wyszukiwania tekstu na karcie należy nacisnąć klawisze CTRL+F (w systemie Windows) lub Command+F (w systemie Mac OS). (Niewidoczne węzły drzewa nie będą przeszukiwane).

Karta Źródło

Karta Źródło zawiera trzy sekcje:

  • Rzeczywiste źródło — przedstawia źródło HTML strony ładowanej jako główna treść podczas uruchamiania aplikacji.

  • Źródło analizowane — przedstawia bieżące oznaczenie, które tworzy interfejs użytkownika aplikacji, co może się różnić od źródła rzeczywistego, ponieważ aplikacja generuje kod oznaczeń na bieżąco, korzystając z technologii Ajax.

  • Pliki aplikacji — wyświetla pliki w katalogu aplikacji. Ten listing jest dostępny dla introspektora AIR, pod warunkiem że został uruchomiony z treści znajdującej w bezpiecznym obszarze izolowanym aplikacji. W tej sekcji można wyświetlać treść plików tekstowych, a także wyświetlać obrazy.

Kliknięcie przycisku Odśwież aktywne okno (u góry okna Introspektor AIR) powoduje odświeżenie danych widocznych na karcie Źródło.

W celu wyszukiwania tekstu na karcie należy nacisnąć klawisze CTRL+F (w systemie Windows) lub Command+F (w systemie Mac OS). (Niewidoczne węzły drzewa nie będą przeszukiwane).

Karta XHR

Karta XHR przechwytuje całą komunikację XMLHttpRequest w aplikacji oraz rejestruje informacje. Na tej karcie można wyświetlać właściwości XMLHttpRequest łącznie z responseText i responseXML (jeśli są dostępne) w strukturze drzewa.

W celu wyszukiwania tekstu na karcie należy nacisnąć klawisze CTRL+F (w systemie Windows) lub Command+F (w systemie Mac OS). (Niewidoczne węzły drzewa nie będą przeszukiwane).

Korzystanie z introspektora AIR z treścią w nieaplikacyjnym obszarze izolowanym

Treść z katalogu aplikacji można załadować do ramki i-frame lub ramki odwzorowanej na nieaplikacyjny obszar izolowany. Informacje zawiera sekcja Zabezpieczenia HTML w środowisku Adobe AIR (dla programistów ActionScript) oraz sekcja Zabezpieczenia HTML w środowisku Adobe AIR (dla programistów HTML). Introspektor AIR może być używany z taką treścią, ale należy przestrzegać następujących zasad:

  • Plik AIRIntrospector.js należy umieścić w treści należącej do aplikacyjnego i niaplikacyjnego obszaru izolowanego (i-frame)

  • Nie należy nadpisywać właściwości parentSandboxBridge; kod introspektora AIR korzysta z tej właściwości. W razie potrzeby należy dodać właściwości. Dlatego zamiast kodu:

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

    Należy użyć następującej składni:

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • Z treści zawartej w nieaplikacyjnym obszarze izolowanym nie można otworzyć introspektora AIR poprzez naciśnięcie klawisza F12 ani poprzez wywołanie jednej z metod w klasie air.Introspector.Console. Okno Introspektor można otworzyć tylko poprzez kliknięcie przycisku Otwórz introspektora. Domyślnie przycisk ten znajduje się w prawym górnym roku ramki lub ramki i-frame. (Z powodu zabezpieczeń dotyczących treści nieaplikacyjnego obszaru izolowanego nowe okno może zostać otwarte tylko w wyniku gestu użytkownika, takiego jak kliknięcie przycisku).

  • Dla aplikacyjnego i nieaplikacyjnego obszaru izolowanego można otworzyć osobne okna Introspektor AIR. Okna można rozróżnić na podstawie tytułów widocznych w oknach Introspektor AIR.

  • Jeśli introspektor AIR został uruchomiony z nieaplikacyjnego obszaru izolowanego, wówczas na karcie Źródło nie będą widoczne pliki aplikacji.

  • Introspektor AIR może sprawdzać tylko kod zawarty w obszarze izolowanym, z którego został otwarty,