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