Depuración con el introspector HTML de AIR

Introspector de AIR
Carga del código del introspector de AIR
Inspección de un objeto en la ficha Console (Consola)
Configuración del introspector de AIR
Interfaz del introspector de AIR
Utilización del introspector de AIR con contenido en un entorno limitado ajeno a la aplicación

EL SDK de Adobe® AIR® incluye un archivo de JavaScript AIRIntrospector.js que se puede incluir en la aplicación para ayudar a depurar aplicaciones basadas en HTML.

Introspector de AIR

El introspector de aplicaciones HTML/JavaScript de Adobe AIR (denominado AIR HTML Introspector) ofrece funciones útiles para ayudar en el desarrollo y depuración de aplicaciones basadas en HTML:

Incluye una herramienta introspectora que permite señalar un elemento de la interfaz de usuario en la aplicación y ver su marcado y propiedades DOM.
Incluye una consola para enviar referencias de objetos para introspección y es posible ajustar valores de propiedad y ejecutar código JavaScript. Asimismo, se pueden serializar objetos en la consola, lo que supone limitaciones para editar los datos. También se puede copiar y guardar texto desde la consola.
Incluye una vista de árbol para las funciones y propiedades DOM.
Permite editar atributos y nodos de texto para elementos DOM.
Realiza listados de vínculos, estilos CSS, imágenes y archivos de JavaScript cargados en la aplicación.
Permite visualizar el código fuente HTML inicial y el código fuente de marcado para la interfaz de usuario.
Permite acceder a archivos en el directorio de la aplicación. (Esta función sólo está disponible en la consola AIR HTML Introspector abierta para el entorno limitado de la aplicación. No está disponible para las consolas abiertas para el contenido del entorno limitado que no pertenece a la aplicación.)
Incluye un visor para objetos XMLHttpRequest y sus propiedades, entre las que se incluyen responseText y responseXML (si están disponibles).
Puede realizar búsquedas por texto coincidente en los archivos y el código fuente.

Carga del código del introspector de AIR

El código del introspector de AIR se incluye en un archivo de JavaScript, AIRIntrospector.js, incluido en el directorio frameworks del SDK de AIR. Para utilizar el introspector de AIR en la aplicación, copie AIRIntrospector.js en el directorio project de la aplicación y cargue el archivo mediante una etiqueta de script en el archivo HTML principal de la aplicación:

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

Asimismo, incluya en archivo en todos los archivos HTML que se correspondan con diferentes ventanas nativas de la aplicación.

Importante: incluya el archivo AIRIntrospector.js únicamente al desarrollar y depurar la aplicación. Elimínelo de la aplicación de AIR empaquetada que se distribuya.

El archivo AIRIntrospector.js define una clase, Console, a la que se puede acceder desde el código JavaScript, llamando a air.Introspector.Console.

Nota: el código que utilice el introspector de AIR debe estar en el entorno limitado de seguridad de la aplicación (en un archivo del directorio de la aplicación).

Inspección de un objeto en la ficha Console (Consola)

La clase Console define cinco métodos: log(), warn(), info(), error() y dump().

Los métodos log(), warn(), info(), and error() permiten enviar un objeto a la ficha Console (Consola). El método más básico es log(). El siguiente código envía un objeto simple, representado mediante la variable test, a la ficha Console (Consola):

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

No obstante, resulta más útil enviar un objeto complejo a la ficha. Por ejemplo, la siguiente página HTML incluye un botón (btn1) que llama a una función que, a su vez, envía el propio objeto del botón a la ficha Console (Consola):

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

Cuando se hace clic en el botón, la ficha Console (Consola) muestra el objeto btn1 y se puede expandir la vista de árbol del objeto para inspeccionar sus propiedades:

Ver gráfico a tamaño completo

Se puede editar una propiedad del objeto haciendo clic en la lista situada a la derecha del nombre de la propiedad y modificando el listado de texto.

Los métodos info(), error() y warn() son similares al método log(). Sin embargo, cuando se llama a estos métodos, la consola muestra un icono al principio de la línea:

Método

Icono

info()

error()

warn()

Los métodos log(), warn(), info() y error() envían una referencia sólo a un objeto real, por lo que las propiedades disponibles son las que se muestran en el momento de la visualización. Si desea serializar el objeto real, utilice el método dump(). El método cuenta con dos parámetros:

Parámetro	Descripción
`dumpObject`	Objeto que se va a serializar.
`levels`	Número máximo de niveles que se examinarán en el árbol del objeto (además del nivel de raíz). El valor predeterminado es 1 (lo que significa que se muestra un nivel superior al nivel de raíz del árbol). Este parámetro es opcional.

Al llamar al método dump() se serializa un objeto antes de enviarlo a la ficha Console (Consola), por lo que no se pueden editar las propiedades de los objetos. Por ejemplo, considérese el fragmento de código siguiente:

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

Cuando se ejecuta este código, la consola muestra el objeto testObject y sus propiedades, pero no se pueden editar los valores de las propiedades en la consola.

Configuración del introspector de AIR

La consola se puede configurar definiendo las propiedades de la variable global AIRIntrospectorConfig. Por ejemplo, el siguiente código JavaScript configura el introspector de AIR para que se ajusten las columnas a 100 caracteres:

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

Asegúrese de establecer las propiedades de la variable AIRIntrospectorConfig antes de cargar el archivo AIRIntrospector.js (mediante una etiqueta script).

Existe ocho propiedades de la variable AIRIntrospectorConfig:

Propiedad	Valor predeterminado	Descripción
`closeIntrospectorOnExit`	`true`	Establece la ventana del inspector para que se cierre cuando se cierren todas las demás ventanas de la aplicación.
`debuggerKey`	123 (tecla F12)	Código de tecla del método abreviado de teclado para mostrar y ocultar la ventana del introspector de AIR.
`debugRuntimeObjects`	`true`	Establece el introspector para que amplíe los objetos del motor de ejecución definidos en JavaScript.
`flashTabLabels`	`true`	Establece las fichas Console (Consola) y XMLHttpRequest en flash, indicando el momento en que se producen cambios (por ejemplo, cuando el texto se registre en estas fichas).
`introspectorKey`	122 (tecla F11)	Código de tecla del método abreviado de teclado para abrir el panel Inspect (Inspeccionar).
`showTimestamp`	`true`	Establece la ficha Console (Consola) para que las marcas de hora aparezcan al principio de todas las líneas.
`showSender`	`true`	Establece la ficha Console (Consola) para que muestre información sobre el objeto que envía el mensaje al principio de todas las líneas.
`wrapColumns`	2000	Número de columnas al que se ajustan los archivos de origen.

Interfaz del introspector de AIR

Para abrir la ventana del introspector de AIR al depurar la aplicación, presione la tecla F12 o llame a uno de los métodos de la clase Console [consulte Inspección de un objeto en la ficha Console (Consola)]. Puede configurar la tecla directa para que sea una tecla distinta a F12; consulte Configuración del introspector de AIR.

La ventana del introspector de AIR dispone de séis fichas: Console (Consola), HTML, DOM, Assets (Componentes), Source (Código fuente) y XHR, tal y como se muestra en la siguiente ilustración:

Ver gráfico a tamaño completo

Ficha Console (Consola)

La ficha Console (Consola) muestra los valores de las propiedades transmitidas como parámetros a uno de los métodos de la clase air.Introspector.Console. Para obtener más información, consulte Inspección de un objeto en la ficha Console (Consola).

Ver gráfico a tamaño completo

Para borrar la consola, haga clic con el botón derecho del ratón en el texto y seleccione Clear Console (Borrar consola).
Para guardar texto en la ficha Console (Consola) en un archivo, haga clic con el botón derecho del ratón en la ficha de consola y seleccione Save Console To File (Guardar consola en archivo).
Para guardar texto en la ficha Console (Consola) en el portapapeles, haga clic con el botón derecho del ratón en la ficha de consola y seleccione Save Console To Clipboard (Guardar consola en portapapeles). Para copiar sólo texto seleccionado en el portapapeles, haga clic con el botón derecho del ratón en el texto y seleccione Copy (Copiar).
Para guardar texto de la clase Console en un archivo, haga clic con el botón derecho del ratón en la ficha de consola y seleccione Save Console To File (Guardar consola en archivo).
Para buscar texto coincidente mostrado en la ficha, presione Ctrl+F en Windows o Comando+F en Mac OS. (Las búsquedas no se realizan en los nodos de árbol que no estén visibles.)

Ficha HTML

La ficha HTML permite ver todo el DOM de HTML en una estructura de árbol. Haga clic en un elemento para ver sus propiedades en la parte derecha de la ficha. Haga clic en los iconos + y - para expandir y contraer un nodo en el árbol.

Ver gráfico a tamaño completo

Se puede editar cualquier atributo o elemento de texto en la ficha HTML y el valor editado se refleja en la aplicación.

Haga clic en el botón Inspect (Inspeccionar) (situado a la izquierda de la lista de fichas de la ventana del introspector de AIR). Se puede hacer clic en cualquier elemento de la página HTML de la ventana principal y el objeto DOM asociado se muestra en la ficha HTML. Si la ventana principal está seleccionada, también se puede pulsar el método abreviado de teclado para activar y desactivar el botón Inspect (Inspeccionar). El método abreviado de teclado es F11 de forma predeterminada. Es posible configurar el método abrevado de teclado para sea una tecla distinta a F11; consulte Configuración del introspector de AIR.

Haga clic en el botón Refresh Active Window (Actualizar ventana activa) (situado en la parte superior de la ventana del introspector de AIR) para actualizar los datos que se muestran en la ficha HTML.