Depuración con el introspector HTML de AIR

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

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

Establezca 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, pulse 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 seis fichas: Console (Consola), HTML, DOM, Assets (Componentes), Source (Código fuente) y XHR, tal y como se muestra en la siguiente ilustración:

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

  • 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 solo 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, pulse 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.

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.

Presione Ctrl+F en Windows o Comando+F en Mac OS para buscar texto coincidente que se muestre en la ficha. (Las búsquedas no se realizan en los nodos de árbol que no estén visibles.)

Ficha DOM

La ficha DOM muestra los objetos de ventana en una estructura de árbol. Se puede editar cualquier propiedad string y numeric y el valor editado se refleja en la aplicación.

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

Presione Ctrl+F en Windows o Comando+F en Mac OS para buscar texto coincidente que se muestre en la ficha. (Las búsquedas no se realizan en los nodos de árbol que no estén visibles.)

Ficha Assets (Componentes)

La ficha Assets (Componentes) permite comprobar vínculos, imágenes, CSS y archivos de JavaScript cargados en la ventana nativa. Al expandir uno de estos nodos se muestra el contenido del archivo o la imagen real utilizada.

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 Assets (Componentes).

Presione Ctrl+F en Windows o Comando+F en Mac OS para buscar texto coincidente que se muestre en la ficha. (Las búsquedas no se realizan en los nodos de árbol que no estén visibles.)

Ficha Source (Código fuente)

La ficha Source (Código fuente) incluye tres secciones:

  • Código fuente real: muestra el código fuente HTML de la página cargado como contenido raíz cuando se inició la aplicación.

  • Código fuente analizado: muestra el marcado actual que conforma la IU de la aplicación, que puede ser distinto al código fuente real, ya que la aplicación genera código de marcado sobre la marcha utilizando técnicas de Ajax.

  • Archivos de la aplicación: incluye los archivos en el directorio de la aplicación. Esta lista solo está disponible para el introspector de AIR cuando se inicia desde el contenido del entorno limitado de seguridad de la aplicación. En esta sección se puede ver el contenido de archivos de texto o ver imágenes.

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 Source (Código fuente).

Presione Ctrl+F en Windows o Comando+F en Mac OS para buscar texto coincidente que se muestre en la ficha. (Las búsquedas no se realizan en los nodos de árbol que no estén visibles.)

Ficha XHR

La ficha XHR intercepta toda la comunicación XMLHttpRequest en la aplicación y registra la información. Esto permite ver las propiedades XMLHttpRequest, entre las que se incluyen responseText y responseXML (cuando están disponibles) en una vista de árbol.

Presione Ctrl+F en Windows o Comando+F en Mac OS para buscar texto coincidente que se muestre en la ficha. (Las búsquedas no se realizan en los nodos de árbol que no estén visibles.)

Utilización del introspector de AIR con contenido en un entorno limitado ajeno a la aplicación

Se puede cargar contenido de un directorio de la aplicación en un iframe o frame que se asigne a un entorno limitado ajeno a la aplicación. (Consulte Seguridad HTML en Adobe AIR para desarrolladores de ActionScript o Seguridad HTML en Adobe AIR para desarrolladores de HTML). El introspector de AIR se puede utilizar con este contenido, pero se deben tener en cuenta las siguientes reglas:

  • El archivo AIRIntrospector.js se debe incluir en el contenido del entorno limitado de la aplicación y del entorno limitado ajeno a la aplicación (iframe).

  • No sobrescriba la propiedad parentSandboxBridge ; el código del introspector de AIR usa esta propiedad. Añada propiedades según sea necesario. Por lo tanto, en lugar de escribir lo siguiente:

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

    Utilice la siguiente sintaxis:

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • Desde el contenido del entorno limitado ajeno a la aplicación no es posible abrir el introspector de AIR pulsando la tecla F12 ni llamando a uno de los métodos de la clase air.Introspector.Console. La ventana del introspector solo se puede abrir haciendo clic en el botón Open Introspector (Abrir introspector). El botón se añade de forma predeterminada a la esquina superior derecha de iframe o frame. (Debido a las restricciones de seguridad aplicadas al contenido del entorno limitado ajeno a la aplicación, una ventana nueva solo se puede abrir como resultado de un gesto del usuario como, por ejemplo, hacer clic en un botón.)

  • Es posible abrir ventanas del introspector de AIR independientes para el entorno limitado de la aplicación y el entorno limitado ajeno a la aplicación. Los dos entornos se pueden diferenciar utilizando el título que aparece en las ventanas del introspector de AIR.

  • La ficha Source (Código fuente) no muestra archivos de la aplicación cuando el introspector de AIR se ejecuta desde un entorno limitado ajeno a la aplicación.

  • El introspector de AIR solo puede consultar código en el entorno limitado desde el que se ha abierto.