Debugowanie za pomocą introspektora HTML w środowisku AIRPakiet 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 AIRIntrospektor 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:
Ładowanie kodu introspektora AIRKod 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 KonsolaKlasa 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:
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:
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 AIRKonsolę 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:
Interfejs introspektora AIRW 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 KonsolaNa 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.
Karta HTMLNa 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 DOMKarta 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 ZasobyNa 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łoKarta Źródło zawiera trzy sekcje:
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 XHRKarta 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 izolowanymTreść 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:
|
|
