Debug con AIR HTML IntrospectorAdobe® 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 IntrospectorAdobe 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:
Caricamento del codice di AIR IntrospectorIl 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 ConsoleLa 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:
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:
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 IntrospectorPotete 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à:
Interfaccia di AIR IntrospectorPer 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 ConsoleNella 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.
Scheda HTMLLa 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 DOMNella 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:
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 XHRNella 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'applicazionePotete 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:
|
|
