Debug con AIR HTML Introspector

Adobe® AIR® SDK include il file JavaScript AIRIntrospector.js che è possibile includere nell'applicazione per agevolare il debug di applicazioni basate su HTML.

Informazioni su AIR Introspector

Adobe AIR HTML Introspector/Introspector per applicazioni JavaScript (detto AIR HTML Introspector) offre utili funzionalità per lo sviluppo e il debug di applicazioni basate su HTML:

  • Include uno strumento di introspezione che consente di puntare a un elemento dell'interfaccia utente nell'applicazione e visualizzarne i tag e le proprietà DOM e

  • una console per l'invio dei riferimenti degli oggetti per l'introspezione. Potete modificare i valori delle proprietà ed eseguire codice JavaScript, nonché serializzare oggetti nella console, riducendo così le operazioni di modifica dei dati. Potete inoltre copiare e salvare testo dalla console.

  • Include una visualizzazione struttura per le proprietà e le funzioni DOM.

  • Consente di modificare gli attributi e i nodi di testo per gli elementi DOM.

  • Elenca collegamenti, stili CSS e file JavaScript caricati nell'applicazione.

  • Consente di visualizzare il codice sorgente HTML iniziale e i tag correnti per l'interfaccia utente.

  • Consente di accedere ai file nella directory dell'applicazione. Questa funzionalità è disponibile solo per la console di AIR HTML Introspector aperta per la sandbox dell'applicazione. Non disponibile per le console aperte per contenuto non di sandbox dell'applicazione.

  • Include un visualizzatore per gli oggetti XMLHttpRequest e le relative proprietà, tra cui le proprietà responseText e responseXML (se disponibili).

  • Potete cercare testo corrispondente nel codice sorgente e nei file di origine.

Caricamento del codice di AIR Introspector

Il codice di AIR Introspector è incluso in un file JavaScript, AIRIntrospector.js, nella directory frameworks di AIR SDK. Per utilizzare AIR Introspector nell'applicazione, copiate AIRIntrospector.js nella directory di progetto dell'applicazione e caricate il file tramite un tag script nel file HTML principale dell'applicazione:

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

Includete il file anche in ogni file HTML che corrisponde alle diverse finestre native dell'applicazione.

Importante: includete il file AIRIntrospector.js solo per lo sviluppo e il debug dell'applicazione. Rimuovetelo dal pacchetto dell'applicazione AIR che distribuite.

Nel file AIRIntrospector.js viene definita una classe, Console, a cui potete accedere da codice JavaScript chiamando air.Introspector.Console.

Nota: il codice per cui viene utilizzato AIR Introspector deve trovarsi nella sandbox di sicurezza dell'applicazione (in un file nella directory dell'applicazione).

Analisi di un oggetto nella scheda Console

La classe Console definisce cinque metodi: log(), warn(), info(), error() e dump().

I metodi log(), warn(), info() e error() permettono di inviare un oggetto alla scheda Console. Il metodo più semplice tra questi è log(). Il codice seguente consente di inviare un oggetto semplice, rappresentato dalla variabile test, alla scheda Console:

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

È tuttavia più utile inviare un oggetto complesso alla scheda Console. La pagina HTML seguente ad esempio include un pulsante (btn1) che chiama una funzione per inviare l'oggetto pulsante stesso alla scheda Console:

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

Quando fate clic sul pulsante, nella scheda Console viene visualizzato l'oggetto btn1 e potete espandere la visualizzazione struttura dell'oggetto per ispezionarne le proprietà:

Potete modificare una proprietà dell'oggetto facendo clic sul listato a destra del nome della proprietà e modificando il testo del listato.

I metodi info(), error() e warn() sono analoghi al metodo log(). Quando chiamate questi metodi, tuttavia, all'inizio della riga nella Console viene visualizzata un'icona:

Metodo

Icona

info()

error()

warn()

I metodi log(), warn(), info() ed error() consentono di inviare un riferimento solo a un oggetto effettivo, pertanto le proprietà disponibili sono quelle presenti al momento della visualizzazione. Se desiderate serializzare l'oggetto effettivo, utilizzate il metodo dump(). Il metodo presenta due parametri:

Parametro

Descrizione

dumpObject

L'oggetto da serializzare.

levels

Il numero massimo di livelli da esaminare nella struttura dell'oggetto (in aggiunta al livello principale). Il valore predefinito è 1 (che indica che viene mostrato un livello sotto quello principale). Questo parametro è opzionale.

La chiamata del metodo dump() consente di serializzare un oggetto prima di inviarlo alla scheda Console affinché non sia possibile modificarne le proprietà. Consideriamo l'esempio del codice seguente:

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

Quando eseguite questo codice, nella Console viene visualizzato l'oggetto testObject con le relative proprietà, ma non potete modificare i valori delle proprietà nella Console.

Configurazione di AIR Introspector

Potete configurare la console impostando le proprietà della variabile AIRIntrospectorConfig globale. Con il codice JavaScript seguente ad esempio viene configurato AIR Introspector per mandare a capo le colonne al centesimo carattere:

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

Ricordate di impostare le proprietà della variabile AIRIntrospectorConfig prima di caricare il file AIRIntrospector.js (tramite un tag script).

La variabile AIRIntrospectorConfig dispone di otto proprietà:

Proprietà

Valore predefinito

Descrizione

closeIntrospectorOnExit

true

Imposta la finestra di Inspector per la chiusura quando tutte le altre finestre dell'applicazione sono chiuse.

debuggerKey

123 (il tasto F12)

Il codice del tasto della scelta rapida da tastiera per mostrare e nascondere la finestra di AIR Introspector.

debugRuntimeObjects

true

Imposta Introspector per espandere gli oggetti in runtime oltre agli oggetti definiti in JavaScript.

flashTabLabels

true

Imposta le schede Console e XMLHttpRequest affinché lampeggino per indicare eventuali modifiche al loro interno (ad esempio quando nelle schede viene registrato testo).

introspectorKey

122 (il tasto F11)

Il codice del tasto della scelta rapida da tastiera per aprire il panello di analisi.

showTimestamp

true

Imposta la scheda Console affinché visualizzi indicatori di data e ora all'inizio di ogni riga.

showSender

true

Imposta la scheda Console affinché visualizzi informazioni sull'oggetto che invia il messaggio all'inizio di ogni riga.

wrapColumns

2000

Numero di colonne in corrispondenza del quale il testo dei file di origine viene mandato a capo.

Interfaccia di AIR Introspector

Per aprire la finestra di AIR Introspector durante il debug dell'applicazione, premete il tasto F12 o chiamate uno dei metodi della classe Console (vedete Analisi di un oggetto nella scheda Console). Potete configurare un tasto di scelta rapida diverso dal tasto F12. Vedete Configurazione di AIR Introspector.

La finestra di AIR Introspector comprende sei schede: Console, HTML, DOM, Assets (Risorse), Source (Codice sorgente) e XHR come illustrato nella figura seguente:

Scheda Console

Nella scheda Console sono visualizzati i valori delle proprietà passate come parametri a uno dei metodi della classe air.Introspector.Console. Per informazioni dettagliate, vedete Analisi di un oggetto nella scheda Console.

  • Per cancellare la console, fate clic con il pulsante destro del mouse sul testo e selezionate Clear Console (Cancella console).

  • Per salvare testo della scheda Console in un file, fate clic con il pulsante destro del mouse sulla scheda Console e scegliete Save Console To File (Salva console in file).

  • Per salvare testo della scheda Console negli Appunti, fate clic con il pulsante destro del mouse sulla scheda Console e scegliete Save Console To Clipboard (Salva console negli Appunti). Per copiare solo il testo selezionato negli Appunti, fate clic con il pulsante destro del mouse sul testo e scegliete Copia.

  • Per salvare testo della classe Console in un file, fate clic con il pulsante destro del mouse sulla scheda Console e selezionate Save Console To File (Salva console in file).

  • Per cercare nella scheda testo corrispondente, premete CTRL+F in Windows o Comando+F in Mac OS. La ricerca non viene eseguita nei nodi della struttura non visibili.

Scheda HTML

La scheda HTML consente di visualizzare l'intero HTML DOM in una struttura. Fate clic su un elemento per visualizzarne le proprietà nella parte destra della scheda. Fate clic sulle icone + e - per espandere e comprimere un nodo della struttura.

Potete modificare qualsiasi attributo o elemento di testo nella scheda HTML. Il valore modificato verrà riflesso nell'applicazione.

Fate clic sul pulsante Inspect (Analizza) a sinistra dell'elenco di schede nella finestra di AIR Introspector. Potete fare clic su qualsiasi elemento nella pagina HTML della finestra principale. L'oggetto DOM associato verrà visualizzato nella scheda HTML. Quando lo stato attivo si trova nella finestra principale potete inoltre premere la scelta rapida da tastiera per attivare e disattivare il pulsante Inspect (Analizza). La scelta rapida da tastiera per impostazione predefinita è F11. Potete configurare un tasto di scelta rapida diverso dal tasto F11. Vedete Configurazione di AIR Introspector.

Fate clic sul pulsante Refresh Active Window (Aggiorna finestra attiva) nella parte superiore della finestra di AIR Introspector per aggiornare i dati visualizzati nella scheda HTML.

Premete CTRL+F in Windows o Comando+F in Mac OS per cercare il testo corrispondente nella scheda. La ricerca non viene eseguita nei nodi della struttura non visibili.

Scheda DOM

Nella scheda DOM è mostrato l'oggetto window in una struttura. Potete modificare qualsiasi stringa e proprietà numerica e il valore modificato verrà riflesso nell'applicazione.

Fate clic sul pulsante Refresh Active Window (Aggiorna finestra attiva) nella parte superiore della finestra di AIR Introspector per aggiornare i dati visualizzati nella scheda DOM.

Premete CTRL+F in Windows o Comando+F in Mac OS per cercare il testo corrispondente nella scheda. La ricerca non viene eseguita nei nodi della struttura non visibili.

Scheda Assets (Risorse)

Nella scheda Assets (Risorse) potete fare clic sui collegamenti, le immagini, i file CSS e JavaScript caricati nella finestra nativa. Espandendo uno di questi nodi viene mostrato il contenuto del file o l'immagine effettiva in uso.

Fate clic sul pulsante Refresh Active Window (Aggiorna finestra attiva) nella parte superiore della finestra di AIR Introspector per aggiornare i dati visualizzati nella scheda Assets (Risorse).

Premete CTRL+F in Windows o Comando+F in Mac OS per cercare il testo corrispondente nella scheda. La ricerca non viene eseguita nei nodi della struttura non visibili.

Scheda Source (Codice sorgente)

La scheda Source (Codice sorgente) comprende tre sezioni:

  • Actual source (Codice sorgente effettivo): contiene il codice sorgente HTML della pagina caricata come contenuto principale all'avvio dell'applicazione.

  • Parsed source (Codice sorgente analizzato): contiene il codice corrente che definisce l'interfaccia utente dell'applicazione che può essere diverso dal codice sorgente effettivo, perché l'applicazione genera codice in tempo reale mediante tecniche Ajax.

  • Application files (File applicazione): contiene un elenco dei file presenti nella directory dell'applicazione. Questo elenco è disponibile per AIR Introspector solo se questo viene avviato dal contenuto nella sandbox di sicurezza dell'applicazione. In questa sezione potete visualizzare il contenuto dei file di testo o le immagini.

Fate clic sul pulsante Refresh Active Window (Aggiorna finestra attiva) nella parte superiore della finestra di AIR Introspector per aggiornare i dati visualizzati nella scheda Source (Codice sorgente).

Premete CTRL+F in Windows o Comando+F in Mac OS per cercare il testo corrispondente nella scheda. La ricerca non viene eseguita nei nodi della struttura non visibili.

Scheda XHR

Nella scheda XHR viene intercettata la comunicazione XMLHttpRequest dell'applicazione e vengono registrate le informazioni. Potete pertanto visualizzare le proprietà XMLHttpRequest tra cui responseText e responseXML (se disponibili) in una struttura.

Premete CTRL+F in Windows o Comando+F in Mac OS per cercare il testo corrispondente nella scheda. La ricerca non viene eseguita nei nodi della struttura non visibili.

Uso di AIR Introspector con contenuto in una sandbox non dell'applicazione

Potete caricare contenuto dalla directory dell'applicazione in un iframe o frame mappato a una sandbox non dell'applicazione. Vedete Sicurezza HTML in Adobe AIR (sviluppatori ActionScript) o HTML security in Adobe AIR (sviluppatori HTML). Potete utilizzare AIR Introspector con tale contenuto tenendo presenti le regole seguenti:

  • Il file AIRIntrospector.js deve essere incluso nel contenuto sia nella sandbox dell'applicazione che nella sandbox non dell'applicazione (iframe).

  • Non sovrascrivete la proprietà parentSandboxBridge in quanto è utilizzata dal codice di AIR Introspector. Aggiungete tutte le proprietà necessarie. Anziché scrivere quanto segue:

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

    Utilizzate una sintassi analoga alla seguente:

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • Dal contenuto della sandbox non dell'applicazione non potete aprire AIR Introspector premendo il tasto F12 o chiamando uno dei metodi della classe air.Introspector.Console. Potete aprire la finestra di Introspector solo facendo clic sul pulsante Open Introspector (Apri Introspector). Il pulsante viene aggiunto per impostazione predefinita nell'angolo superiore destro dell'iframe o frame. A causa di limitazioni di sicurezza imposte al contenuto di sandbox non di applicazione, una nuova finestra può essere aperta solo come conseguenza di un'azione dell'utente, ad esempio la scelta di un pulsante.

  • Potete aprire finestre di AIR Introspector distinte per la sandbox dell'applicazione e per quella non dell'applicazione. Potete distinguere tra le due utilizzando il titolo visualizzato nelle finestre di AIR Introspector.

  • Nella scheda Source (Codice sorgente) non sono visualizzati i file dell'applicazione se AIR Introspector viene eseguito da una sandbox non dell'applicazione.

  • Con AIR Introspector è possibile analizzare solo codice nella sandbox da cui è il programma è stato aperto.