Debugging mit dem AIR HTML IntrospectorDas 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 IntrospectorDer 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:
Laden des AIR Introspector-CodesDer 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:
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:
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 IntrospectorsSie 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:
Benutzeroberfläche des AIR IntrospectorsUm 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“.
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:
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 SandboxSie 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:
|
|
