Depuração com o AIR HTML Introspector

Sobre o AIR Introspector
Carregamento do código do AIR Introspector
Inspeção de um objeto na guia Console
Configuração do AIR Introspector
Interface do AIR Introspector
Uso do AIR Introspector com conteúdo em uma caixa de proteção não do aplicativo

O SDK do Adobe® AIR® inclui um arquivo AIRIntrospector.js de JavaScript que você pode incluir em seu aplicativo para ajudar a depurar os aplicativos baseados em HTML.

Sobre o AIR Introspector

O Adobe AIR HTML/JavaScript Application Introspector (chamado AIR HTML Introspector) fornece recursos úteis para ajudar no desenvolvimento e na depuração do aplicativo baseados em HTML:

Inclui uma ferramenta de introspecção que lhe permite apontar para um elemento da interface do usuário no aplicativo e vê suas propriedades de marcação e DOM.
Além disso, inclui um console para enviar referências de objetos para introspeção, e você pode ajustar valores de propriedade e executar o código de JavaScript. Você também pode serializar objetos no console, que o limita na edição dos dados. Também é possível copiar e salvar texto a partir do console.
Inclui uma visualização de árvore para as propriedades e funções DOM.
Com isso, você poderá editar os atributos e nós de texto para os elementos DOM.
Ele lista os links, estilos, imagens e arquivos JavaScript carregados no seu aplicativo.
Assim, você poderá ver o código-fonte inicial de HTML e o código-fonte de marcação atual para a interface do usuário.
Ele permite acessar os arquivos no diretório do aplicativo. (Esse recurso só está disponível para o console do AIR HTML Introspector aberto para a caixa de proteção do aplicativo. Não disponível para os consoles abertos para o conteúdo que não está na caixa de proteção do aplicativo.)
Ele inclui um visualizar para os objetos XMLHttpRequest e suas propriedades, incluindo as propriedades responseText e responseXML (quando disponível).
Você pode pesquisar o texto correspondente no código e nos arquivos de origem.

Carregamento do código do AIR Introspector

O código do AIR Introspector está incluído em um arquivo JavaScript, AIRIntrospector.js, que, por sua vez, está incluído no diretório de estruturas do SDK do AIR. Para usar o AIR Introspector no seu aplicativo, copie o arquivo AIRIntrospector.js para o diretório do projeto do seu aplicativo e carregue o arquivo através da tag de script no arquivo HTML principal no seu aplicativo:

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

Também inclua o arquivo em todos os arquivos HTML que correspondem a janelas nativas diferentes no seu aplicativo.

Importante: Inclua o arquivo AIRIntrospector.js apenas ao desenvolver e depurar o aplicativo. Remova-o no aplicativo empacotador do AIR que você distribua.

O arquivo AIRIntrospector.js define uma classe, Console, que você pode acessar do código do JavaScript chamando air.Introspector.Console.

Nota: O código que usa o AIR Introspector deve estar em uma caixa de proteção do aplicativo (em um arquivo no diretório do aplicativo).

Inspeção de um objeto na guia Console

A classe Console define cinco métodos: log(), warn(), info(), error() e dump().

Os métodos log(), warn(), info() e error() permitem que você envie um objeto à guia Console. O método mais básico de todos é o método log(). O código a seguir envia um objeto simples, representado pela variável test, para a guia Console:

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

No entanto, é mais útil enviar um objeto complexo para a guia Console. Por exemplo, a página HTML a seguir inclui um botão (btn1) que chama uma função que envia o próprio objeto do botão para a guia 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>

Ao clicar no botão, a guia Console exibe o objeto btn1, e você pode expandir a visualização de árvore do objeto para inspecionar suas propriedades:

Visualizar gráfico inteiro

Você pode editar uma propriedade do objeto clicando na lista à direita do nome da propriedade e modificando a listagem do texto.

Os métodos info(), error() e warn() são parecidos com o método log(). No entanto, ao chamar esses métodos, o Console exibe um ícone no começo da linha:

Método

Ícone

info()

error()

warn()

Os métodos log(), warn(), info() e error() enviam uma referência apenas para um objeto real, por isso as propriedades disponíveis são as únicas no momento da visualização. Se desejar serializar o objeto real, use o método dump(). O método tem dois parâmetros:

Parâmetro	Descrição
`dumpObject`	O objeto a ser serializado.
`levels`	O número máximo de níveis a serem examinado na árvore do objeto (além do nível de raiz). O valor padrão é 1 (indicando que um é mostrado um nível além do nível de raiz da árvore). Esse parâmetro é opcional.

Chamar o método dump() serializa um objeto antes de enviá-lo para a guia Console, de forma que você não possa editar as propriedades dos objetos. Por exemplo, considere o seguinte código:

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

Ao executar este código, o Console exibe o objeto testObject e suas propriedades, mas você não pode editar os valores da propriedade no Console.

Configuração do AIR Introspector

Você pode configurar o console definindo as propriedades da variável global AIRIntrospectorConfig. Por exemplo, o código de JavaScript a seguir configura configura o AIR Introspector para empacotar colunas com 100 caracteres:

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

Certifique-se de definir as propriedades da variável AIRIntrospectorConfig antes de carregar o arquivo AIRIntrospector.js (através de uma tag script).

Há oito propriedades na variável AIRIntrospectorConfig:

Propriedade	Valor padrão	Descrição
`closeIntrospectorOnExit`	`true`	Define que a janela Inspector feche quando todas as outras janelas do aplicativo estão fechadas.
`debuggerKey`	123 (a tecla F12)	O código da tecla para o atalho no teclado para mostrar e ocultar a janela do AIR Introspector.
`debugRuntimeObjects`	`true`	Define que o Introspector expanda os objetos do tempo de execução além dos objetos definidos no JavaScript.
`flashTabLabels`	`true`	Define que as guias Console e XMLHttpRequest pisquem, indicando quando ocorre uma mudança nelas (por exemplo, quando o texto é registrado nessas guias).
`introspectorKey`	122 (a tecla F11)	O código de tecla para o atalho no teclado para abrir o painel Inspect.
`showTimestamp`	`true`	Define que a guia Console exiba os carimbos de data/hora no começo de cada linha.
`showSender`	`true`	Define que a guia Console exiba as informações no objeto que está enviando a mensagem no começo de cada linha.
`wrapColumns`	2000	O número de colunas nas quais os arquivos de origem são empacotados.

Interface do AIR Introspector

Para abrir a janela do AIR Introspector ao depurar o aplicativo, pressione a tecla F12 ou chame um dos métodos da classe Console (consulte Inspeção de um objeto na guia Console). Você pode configurar a "hot key" como uma tecla que não seja a tecla F12; consulte Configuração do AIR Introspector.

A janela do AIR Introspector tem seis guias — Console, HTML, DOM, Ativos, Código-Fonte e XHR — como mostrado na ilustração a seguir:

Visualizar gráfico inteiro

A guia Console

A guia Console exibe os valores das propriedades passadas como parâmetros para um dos métodos da classe air.Introspector.Console. Para obter detalhes, consulte Inspeção de um objeto na guia Console.

Visualizar gráfico inteiro

Para limpar o console, clique com o botão direito do mouse no texto e selecionar Limpar console.
Para salvar texto na guia Console em um arquivo, clique com o botão direito na guia Console e selecione Salvar console em arquivo.
Para salvar texto na guia Console na área de transferência, clique com o botão direito na guia Console e selecione Salvar console na área de transferência. Para copiar apenas o texto na área de transferência, clique com o botão direito no texto e selecione Copiar.
Para salvar texto na classe Console em um arquivo, clique com o botão direito na guia Console e selecione Salvar console em arquivo.
Para pesquisar texto correspondente exibido na guia, clique em CTRL+F no Windows ou em Command+F no Mac OS. (Os nós de árvore que são visíveis não são pesquisados.)

A guia HTML

A guia HTML permite visualizar todo o DOM de HTML em uma estrutura de árvore. Clique em um elemento para exibir suas propriedades no lado direito da guia. Clique nos ícones + e - para expandir e recolher um nó na árvore.

Visualizar gráfico inteiro

Você pode editar qualquer atributo ou elemento de texto na guia HTML e o valor editado se reflete no aplicativo.

Clique no botão Inspecionar (à esquerda da lista de guias na janela do AIR Introspector). Você pode clicar em qualquer elemento na página HTML da janela principal e o objeto DOM associado é exibido na guia HTML. Quando a janela principal tem foco, você também pode pressionar o atalho no teclado para ativar e desativar o botão Inspecionar. O atalho no teclado é F11 por padrão. Você pode configurar o atalho no teclado como uma tecla que não seja a tecla F11; consulte Configuração do AIR Introspector.

Clique no botão Atualizar janela ativa (na parte superior da janela do AIR Introspector) para atualizar os dados exibidos na guia HTML.

Clique em CTRL+F no Windows ou em Command+F no Mac OS para pesquisar o texto correspondente exibido na guia. (Os nós de árvore que são visíveis não são pesquisados.)

A guia DOM

A guia DOM mostra o objeto da janela em uma estrutura de árvore. Você pode editar qualquer propriedade numérica e de string, e o valor editado se reflete no aplicativo.

Visualizar gráfico inteiro

Clique no botão Atualizar janela ativa (na parte superior da janela do AIR Introspector) para atualizar os dados exibidos na guia DOM.

Clique em CTRL+F no Windows ou em Command+F no Mac OS para pesquisar o texto correspondente exibido na guia. (Os nós de árvore que são visíveis não são pesquisados.)

A guia Ativos

A guia Ativos permite verificar os links, imagens, CSS e arquivos JavaScript carregados na janela nativa. A expansão de um desses nós mostra o conteúdo do arquivo ou exibe a imagem real usada.

Visualizar gráfico inteiro

Clique no botão Atualizar janela ativa (na parte superior da janela do AIR Introspector) para atualizar os dados exibidos na guia Ativos.

Clique em CTRL+F no Windows ou em Command+F no Mac OS para pesquisar o texto correspondente exibido na guia. (Os nós de árvore que são visíveis não são pesquisados.)

A guia Fonte

A guia Fonte inclui três seções:

Fonte real — Mostra a fonte de HTML da página carregada como conteúdo de raiz quando o aplicativo for iniciado.
Fonte analisada — Mostra a marcação real que compõe a IU do aplicativo, que pode ser diferente da fonte real, uma vez que o aplicativo gera o código de marcação durante o processo usando técnicas Ajax.
Arquivos do aplicativo — Lista os arquivos no diretório do aplicativo. Essa listagem só está disponível para o AIR Introspector quando aberto a partir do conteúdo da caixa de segurança do aplicativo. Nessa seção, você pode ver o conteúdo dos arquivos de texto ou visualizar imagens.

Visualizar gráfico inteiro

Clique no botão Atualizar janela ativa (na parte superior da janela do AIR Introspector) para atualizar os dados exibidos na guia Fonte.

Clique em CTRL+F no Windows ou em Command+F no Mac OS para pesquisar o texto correspondente exibido na guia. (Os nós de árvore que são visíveis não são pesquisados.)

A guia XHR

A guia XHR intercepta toda a comunicação XMLHttpRequest no aplicativo e registra as informações. Isso lhe permite ver as propriedades XMLHttpRequest, incluindo responseText e responseXML (quando disponíveis) em uma visualização de árvore.

Visualizar gráfico inteiro

Clique em CTRL+F no Windows ou em Command+F no Mac OS para pesquisar o texto correspondente exibido na guia. (Os nós de árvore que são visíveis não são pesquisados.)

Uso do AIR Introspector com conteúdo em uma caixa de proteção não do aplicativo

Você pode carregar o conteúdo do diretório do aplicativo em um iframe ou quadro que é mapeado em uma caixa de proteção externa ao aplicativo. (Consulte Segurança HTML no Adobe AIR para desenvolvedores em ActionScript ou Segurança HTML no Adobe AIR para desenvolvedores em HTML). Você pode usar o AIR Introspector com esse conteúdo, mas observe as seguintes regras:

O arquivo AIRIntrospector.js deve ser incluído no conteúdo da caixa de proteção do aplicativo e também não do aplicativo (o iframe).
Não sobrescreva a propriedade parentSandboxBridge; o código do AIR Introspector usa essa propriedade. Acrescente as propriedades conforme necessário. Por isso, em vez de escrever o seguinte:
```
parentSandboxBridge = mytrace: function(str) {runtime.trace(str)}} ;
```
Use a sintaxe da seguinte forma:
```
parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
```
Do conteúdo da caixa de proteção não do aplicativo, você não pode abrir o AIR Introspector pressionando a tecla F12 ou chamando um dos métodos na classe air.Introspector.Console. Você pode abrir a janela do Introspector apenas clicando no botão Abrir Introspector. O botão é acrescentado por padrão no canto superior direito do iframe ou do quadro. (Devido a restrições de segurança impostas ao conteúdo da caixa de proteção não do aplicativo, pode-se abrir uma nova janela apenas como resultado de um gesto do usuário, como clicar em um botão.)
Você pode abrir janelas separadas do AIR Introspector para a caixa de proteção do aplicativo e não do aplicativo. É possível diferenciar as duas usando o título exibido nas janelas do AIR Introspector.
A guia Fonte não exibe os arquivos de aplicativo quando o AIR Introspector é executado de uma caixa de proteção não do aplicativo.
O AIR Introspector só pode analisar o código na caixa de proteção da qual ele foi aberto.