|
Das Adobe® AIR®-SDK enthält die JavaScript-Datei „AIRIntrospector.js“, die Sie in Ihre Anwendung einschließen können, um das Debugging von HTML-basierten Anwendungen zu vereinfachen.
Der AIR Introspector
Der Adobe AIR HTML/JavaScript Application Introspector (kurz „AIR HTML Introspector“) bietet nützliche Funktionen für die Entwicklung und das Debugging von HTML-basierten Anwendungen:
-
Er enthält ein Introspector-Werkzeug, mit dem Sie auf ein Benutzeroberflächenelement in der Anwendung zeigen und dessen Markup- und DOM-Eigenschaften anzeigen können.
-
Mit der darin enthaltenen Konsole können Sie Objektverweise zur Introspektion senden und Sie können Eigenschaftenwerte ändern sowie JavaScript-Code ausführen. Sie können auch Objekte für die Konsole serialisieren, wobei Sie die Daten nicht bearbeiten können. Sie können Text aus der Konsole kopieren und speichern.
-
Er enthält eine Baumstrukturansicht für DOM-Eigenschaften und Funktionen.
-
Er ermöglicht das Bearbeiten der Attribute und Textknoten für DOM-Elemente.
-
Er listet Hyperlinks, CSS-Stile, Bilder und JavaScript-Dateien auf, die in Ihre Anwendung geladen werden.
-
Er ermöglicht die Anzeige der anfänglichen HTML-Quelle und der aktuellen Markup-Quelle für die Benutzeroberfläche.
-
Er ermöglicht den Zugriff auf Dateien im Anwendungsverzeichnis. (Diese Funktion ist nur für die AIR HTML Introspector-Konsole verfügbar, die für eine Anwendungs-Sandbox geöffnet wurde. Sie ist nicht verfügbar für Konsolen, die für anwendungsfremde Sandbox-Inhalte geöffnet wurden.)
-
Er enthält einen Viewer für XMLHttpRequest-Objekte und ihre Eigenschaften, darunter die
responseText
- und
responseXML
-Eigenschaften (falls verfügbar).
-
Sie können im Quellcode und in den Dateien nach übereinstimmendem Text suchen.
Laden des AIR Introspector-Codes
Der AIR Introspector-Code ist in der JavaScript-Datei „AIRIntrospector.js“ enthalten, die sich im Frameworks-Verzeichnis des AIR-SDK befindet. Um den AIR Introspector in Ihrer Anwendung zu verwenden, kopieren Sie die Datei „AIRIntrospector.js“ in das Projektverzeichnis Ihrer Anwendung und laden Sie die Datei über ein script-Tag in die Haupt-HTML-Datei der Anwendung:
<script type="text/javascript" src="AIRIntrospector.js"></script>
Schließen Sie die Datei auch in jede HTML-Datei ein, die anderen nativen Fenstern in Ihrer Anwendung entspricht.
Wichtig:
Schließen Sie die Datei „AIRIntrospector.js“ nur beim Entwickeln und Debuggen der Anwendung ein. Entfernen Sie sie aus der komprimierten AIR-Anwendung, die Sie verbreiten.
Die Datei „AIRIntrospector.js“ definiert eine Klasse, Console, auf die Sie aus dem JavaScript-Code zugreifen können, indem Sie
air.Introspector.Console
aufrufen.
Hinweis:
Code, der den AIR Introspector verwendet, muss sich in der Sicherheits-Sandbox der Anwendung befinden (in einer Datei im Anwendungsverzeichnis).
Untersuchen eines Objekts auf der Registerkarte „Console“
Die Console-Klasse definiert fünf Methoden:
log()
,
warn()
,
info()
,
error()
und
dump()
.
Mit den Methoden
log()
,
warn()
,
info()
und
error()
können Sie ein Objekt an die Registerkarte „Console“ senden. Die grundlegendste dieser Methoden ist die
log()
-Methode. Mit dem folgenden Code wird ein einfaches Objekt, das durch die
test
-Variable repräsentiert wird, an den Registerkarte „Console“ gesendet:
var test = "hello";
air.Introspector.Console.log(test);
Es ist jedoch hilfreicher, ein komplexeres Objekt an die Registerkarte „Console“ zu senden. Die folgende HTML-Seite enthält zum Beispiel eine Schaltfläche (
btn1
), mit der eine Funktion aufgerufen wird, die das Schaltflächenobjekt selbst an die Registerkarte „Console“ sendet:
<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>
Wenn Sie auf die Schaltfläche klicken, wird das btn1-Objekt auf der Registerkarte „Console“ angezeigt und Sie können die Baumansicht des Objekts erweitern, um seine Eigenschaften zu untersuchen:
Sie können eine Eigenschaft des Objekts bearbeiten, indem Sie auf die Auflistung rechts neben dem Namen der Eigenschaft klicken und den aufgeführten Text ändern.
Die Methoden
info()
,
error()
und
warn()
ähneln der
log()
-Methode. Wenn Sie diese Methoden aufrufen, zeigt die Konsole jedoch ein Symbol am Anfang der Zeile an:
|
Methode
|
Symbol
|
|
info()
|
|
|
error()
|
|
|
warn()
|
|
Die Methoden
log()
,
warn()
,
info()
und
error()
senden nur einen Verweis auf ein Objekt, sodass die verfügbaren Eigenschaften diejenigen zum Zeitpunkt der Anzeige sind. Wenn Sie das eigentliche Objekt serialisieren möchten, verwenden Sie die
dump()
-Methode. Die Methode hat zwei Parameter:
|
Parameter
|
Beschreibung
|
|
dumpObject
|
Das zu serialisierende Objekt
|
|
levels
|
Die maximale Anzahl der Ebenen, die in der Objektstruktur untersucht werden sollen (zusätzlich zur Stammebene). Der Standardwert ist 1 (es wird eine weitere Ebene unter der Stammebene angezeigt). Dieser Parameter ist optional.
|
Mit dem Aufruf der
dump()
-Methode wird ein Objekt serialisiert, bevor es an die Registerkarte „Console“ gesendet wird, sodass Sie die Objekteigenschaften nicht bearbeiten können. Betrachten Sie den folgenden Beispielcode:
var testObject = new Object();
testObject.foo = "foo";
testObject.bar = 234;
air.Introspector.Console.dump(testObject);
Wenn Sie diesen Code ausführen, zeigt die Konsole das
testObject
-Objekt und seine Eigenschaften an, Sie können die Eigenschaftenwerte jedoch nicht in der Konsole ändern.
Konfigurieren des AIR Introspectors
Sie können die Konsole konfigurieren, indem Sie die Eigenschaften der globalen
AIRIntrospectorConfig
-Variable einstellen. Der folgende JavaScript-Code konfiguriert den AIR Introspector zum Beispiel so, dass in den Spalten beim 100. Zeichen ein Zeilenumbruch erfolgt:
var AIRIntrospectorConfig = new Object();
AIRIntrospectorConfig.wrapColumns = 100;
Stellen Sie die Eigenschaften der
AIRIntrospectorConfig
-Variablen ein, bevor Sie die Datei „AIRIntrospector.js“ (über ein
script
-Tag) laden.
Die
AIRIntrospectorConfig
-Variable verfügt über acht Eigenschaften:
|
Eigenschaft
|
Standardwert
|
Beschreibung
|
|
closeIntrospectorOnExit
|
true
|
Stellt das Introspector-Fenster so ein, dass es geschlossen wird, wenn alle anderen Fenster der Anwendung geschlossen werden.
|
|
debuggerKey
|
123 (die Taste F12)
|
Der Tastencode für den Tastaturbefehl für das Ein- und Ausblenden des AIR-Introspector-Fensters.
|
|
debugRuntimeObjects
|
true
|
Stellt den Introspector so ein, dass zusätzlich zu den im JavaScript definierten Objekten Laufzeitobjekte erweitert werden.
|
|
flashTabLabels
|
true
|
Stellt die Registerkarten „Console“ und „XMLHttpRequest“ so ein, dass sie blinken, wenn hier eine Änderung auftritt (zum Beispiel, wenn Text auf diesen Registerkarten protokolliert wird).
|
|
introspectorKey
|
122 (die Taste F11)
|
Der Tastencode für den Tastaturbefehl zum Öffnen des „Inspect“-Bereichs.
|
|
showTimestamp
|
true
|
Stellt die Registerkarte „Console“ so ein, dass am Anfang jeder Zeile ein Zeitstempel angezeigt wird.
|
|
showSender
|
true
|
Stellt die Registerkarte „Console“ so ein, dass am Anfang jeder Zeile Informationen zum Objekt, das die Meldung sendet, angezeigt werden.
|
|
wrapColumns
|
2000
|
Die Anzahl der Zeichen in einer Spalte, bei der in den Quelldateien ein Zeilenumbruch erfolgt.
|
Benutzeroberfläche des AIR Introspectors
Um beim Debuggen der Anwendung das AIR-Introspector-Fenster zu öffnen, drücken Sie die Taste F12 oder rufen Sie eine der Methoden der Console-Klasse auf (siehe
Untersuchen eines Objekts auf der Registerkarte „Console“
). Sie können auch einen anderen Tastaturbefehl für diese Funktion festlegen; siehe
Konfigurieren des AIR Introspectors
.
Das AIR-Introspector-Fenster enthält sechs Registerkarten, „Console“, „HTML“, „DOM“, „Assets“, „Source“ und „XHR“, die in der folgenden Abbildung zu sehen sind:
Die Registerkarte „Console“
Auf der Registerkarte „Console“ werden Werte von Eigenschaften angezeigt, die als Parameter an eine der Methoden der air.Introspector.Console-Klasse übergeben werden. Weitere Informationen finden Sie unter
Untersuchen eines Objekts auf der Registerkarte „Console“
.
-
Um den Inhalt der Konsole zu löschen, klicken Sie mit der rechten Maustaste auf den Text und wählen Sie „Clear Console“.
-
Um den Text von der Registerkarte „Console“ in einer Datei zu speichern, klicken Sie mit der rechten Maustaste auf die Registerkarte „Console“ und wählen Sie „Save Console To File“.
-
Um den Text von der Registerkarte „Console“ in der Zwischenablage zu speichern, klicken Sie mit der rechten Maustaste auf die Registerkarte „Console“ und wählen Sie „Save Console To Clipboard“. Um nur den ausgewählten Text in die Zwischenablage zu kopieren, klicken Sie mit der rechten Maustaste auf den Text und wählen Sie „Copy“.
-
Um Text aus der Console-Klasse in einer Datei zu speichern, klicken Sie mit der rechten Maustaste auf die Registerkarte „Console“ und wählen Sie „Save Console To File“.
-
Um nach Text zu suchen, der auf der Registerkarte angezeigt wird, drücken Sie Strg+F (Windows) oder Befehl+F (Mac OS). (Nicht angezeigte Knoten der Baumstruktur werden nicht durchsucht.)
Die Registerkarte „HTML“
Auf der Registerkarte „HTML“ können Sie das gesamte HTML-DOM in einer Baumstruktur anzeigen. Klicken Sie auf ein Element, um seine Eigenschaften auf der rechten Seite der Registerkarte anzuzeigen. Klicken Sie auf die Symbole + und -, um einen Knoten in der Struktur ein- oder auszublenden.
Sie können jedes Attribut oder Textelement auf der Registerkarte „HTML“ bearbeiten; der geänderte Wert wird in der Anwendung verwendet.
Klicken Sie auf die Schaltfläche „Inspect“ (links neben der Reihe der Register im AIR-Introspector-Fenster). Sie können auf jedes beliebige Element der HTML-Seite des Hauptfensters klicken; das dazugehörige DOM-Objekt wird auf der Registerkarte „HTML“ angezeigt. Wenn der Fokus auf dem Hauptfenster liegt, können Sie auch den Tastaturbefehl verwenden, um die Schaltfläche „Inspect“ zu aktivieren und deaktivieren. Der Tastaturbefehl ist standardmäßig F11. Sie können auch einen anderen Tastaturbefehl für diese Funktion festlegen; siehe
Konfigurieren des AIR Introspectors
.
Klicken Sie auf die Schaltfläche „Refresh Active Window“ (oben im AIR-Introspector-Fenster), um die auf der Registerkarte „HTML“ angezeigten Daten zu aktualisieren.
Drücken Sie Strg+F unter Windows oder Befehl+F unter Mac OS, um nach Text zu suchen, der auf der Registerkarte angezeigt wird. (Nicht angezeigte Knoten der Baumstruktur werden nicht durchsucht.)
Die Registerkarte „DOM“
Auf der Registerkarte „DOM“ wird das Fensterobjekt in einer Baumstruktur angezeigt. Sie können beliebige String-Eigenschaften und numerischen Eigenschaften bearbeiten; der geänderte Wert wird in der Anwendung verwendet.
Klicken Sie auf die Schaltfläche „Refresh Active Window“ (oben im AIR-Introspector-Fenster), um die auf der Registerkarte „DOM“ angezeigten Daten zu aktualisieren.
Drücken Sie Strg+F unter Windows oder Befehl+F unter Mac OS, um nach Text zu suchen, der auf der Registerkarte angezeigt wird. (Nicht angezeigte Knoten der Baumstruktur werden nicht durchsucht.)
Die Registerkarte „Assets“
Auf der Registerkarte „Assets“ können Sie die Hyperlinks, Bilder, CSS und JavaScript-Dateien überprüfen, die in das native Fenster geladen werden. Wenn Sie einen dieser Knoten erweitern, wird der Inhalt der Datei oder das tatsächlich verwendete Bild angezeigt.
Klicken Sie auf die Schaltfläche „Refresh Active Window“ (oben im AIR-Introspector-Fenster), um die auf der Registerkarte „Assets“ angezeigten Daten zu aktualisieren.
Drücken Sie Strg+F unter Windows oder Befehl+F unter Mac OS, um nach Text zu suchen, der auf der Registerkarte angezeigt wird. (Nicht angezeigte Knoten der Baumstruktur werden nicht durchsucht.)
Die Registerkarte „Source“
Die Registerkarte „Source“ enthält drei Abschnitte:
-
Actual source – Zeigt den HTML-Quellcode der Seite, die beim Starten der Anwendung als Stamminhalt geladen wird.
-
Parsed source – Zeigt das aktuelle Markup, aus dem die Benutzeroberfläche der Anwendung besteht. Dies kann sich von der eigentlichen Quelle unterscheiden, da die Anwendung während der Ausführung Markup-Code mithilfe von Ajax-Techniken generiert.
-
Application files – Listet die Dateien im Anwendungsverzeichnis auf. Diese Auflistung ist nur für den AIR Introspector verfügbar, wenn der Aufruf über Inhalt in der Anwendungs-Sicherheitssandbox erfolgt. In diesem Abschnitt können Sie den Inhalt von Textdateien oder Bilder anzeigen.
Klicken Sie auf die Schaltfläche „Refresh Active Window“ (oben im AIR-Introspector-Fenster), um die auf der Registerkarte „Source“ angezeigten Daten zu aktualisieren.
Drücken Sie Strg+F unter Windows oder Befehl+F unter Mac OS, um nach Text zu suchen, der auf der Registerkarte angezeigt wird. (Nicht angezeigte Knoten der Baumstruktur werden nicht durchsucht.)
Die Registerkarte „XHR“
Die Registerkarte „XHR“ verfolgt die gesamte XMLHttpRequest-Kommunikation in der Anwendung und protokolliert die Informationen. Dies ermöglicht Ihnen, die XMLHttpRequest-Eigenschaften in einer Baumstruktur anzuzeigen, darunter
responseText
und
responseXML
(falls verfügbar).
Drücken Sie Strg+F unter Windows oder Befehl+F unter Mac OS, um nach Text zu suchen, der auf der Registerkarte angezeigt wird. (Nicht angezeigte Knoten der Baumstruktur werden nicht durchsucht.)
Verwenden des AIR Introspectors mit Inhalt in einer anwendungsfremden Sandbox
Sie können Inhalt aus dem Anwendungsverzeichnis in einen Inlineframe oder Frame laden, der einer anwendungsfremden Sandbox zugeordnet ist. (Siehe
HTML-Sicherheit in Adobe AIR
für ActionScript-Entwickler oder
HTML security in Adobe AIR
für HTML-Entwickler). Sie können den AIR Introspector mit derartigem Inhalt verwenden, beachten Sie dabei jedoch die folgenden Regeln:
-
Die Datei „AIRIntrospector.js“ muss im Inhalt sowohl der Anwendungs-Sandbox als auch der anwendungsfremden Sandbox (Inlineframe) enthalten sein.
-
Überschreiben Sie nicht die
parentSandboxBridge
-Eigenschaft; der AIR-Introspector-Code verwendet diese Eigenschaft. Fügen Sie ggf. Eigenschaften hinzu. Anstatt also Folgendes zu schreiben:
parentSandboxBridge = mytrace: function(str) {runtime.trace(str)}} ;
Verwenden Sie eine Syntax wie die folgende:
parentSandboxBridge.mytrace = function(str) {runtime.trace(str)};
-
Vom Inhalt der anwendungsfremden Sandbox können Sie den AIR Introspector nicht mit der Taste F12 oder durch den Aufruf einer der Methoden in der air.Introspector.Console-Klasse öffnen. Sie können das Introspector-Fenster nur mit der Schaltfläche „Open Introspector“ öffnen. Die Schaltfläche wird standardmäßig in der oberen rechten Ecke des Inlineframes oder Frames hinzugefügt. (Aufgrund von Sicherheitsbeschränkungen, die für Inhalt in anwendungsfremden Sandboxen gelten, kann ein neues Fenster nur als Ergebnis einer Benutzeraktion, zum Beispiel Klicken auf eine Schaltfläche, geöffnet werden.)
-
Sie können separate AIR-Introspector-Fenster für die Anwendungs-Sandbox und die anwendungsfremde Sandbox öffnen. Sie können die beiden Fenster anhand des Titels, der in AIR-Introspector-Fenstern angezeigt wird, auseinanderhalten.
-
Auf der Registerkarte „Source“ werden keine Anwendungsdateien angezeigt, wenn der AIR Introspector aus einer anwendungsfremden Sandbox ausgeführt wird.
-
Der AIR Introspector kann nur Code aus der Sandbox, von der aus er geöffnet wurde, untersuchen.
|
|
|
