Melhores Práticas para a Depuração de Aplicativos HTML5 em Plataforma Cruzada

O Intel® HTML5 Development Environment - BETA provê um conjunto de ferramentas de teste e depuração que te ajudam a garantir que seu app seja executado bem através de todos os seus ambientes alvo de execução. Este documento descreve melhores práticas sobre como utilizar estas ferramentas para maximizar a sua produtividade. Cada ferramenta possui um ambiente de execução diferente, com diferentes balanços entre capacidades, conveniência e fidelidade ao ambiente de execução alvo. Inicie com  o ambiente mais conveniente e poderoso, encontre quantos erros forem possíveis, e então mude para ambientes com maior fidelidade, onde um número maior de defeitos pode se encontrado.

O processo de teste e depuração é diferente para diferentes tipos de aplicativos HTML5. Alguns aplicativos HTML5 utilizam apenas as APIs web padrão, que estão disponíveis nos navegadores. Outros apps HTML5, chamados de aplicações web híbridas, utilizam APIs adicionais como a Apache Cordova* para acessar recursos nativos dos dispositivos como câmeras, sensores e recursos de armazenamentos de dados. Aplicações web híbridas requerem um ambiente de teste que suporte a API. Outras aplicações podem ser testadas em navegadores, no servidor e na plataforma alvo. Ao longo deste documento, o termo servidor vai se referir à sua máquina de desenvolvimento, onde você está utilizando o  Intel HTML5 Development Environment, e alvo vai se referir ao ambiente onde a sua aplicação é executada.

Aqui está uma lista de ferramentas para teste e depuração, introduzidas na ordem em que devem ser utilizadas.

Pré visualizar no navegador do servidor

Esta operação é suportada dentro da IDE através do menu Tools>Preview in Browser. Isto simplesmente abre uma nova aba no navegador que mostra o arquivo HTML atualmente selecionado. Infelizmente a pré visualização possui utilidade limitada para aplicações web híbridas, porque não existe suporte a APIs não existentes no navegador.

Esta abordagem é muito familiar para aqueles que vêm do desenvolvimento web. Você pode testar as funcionalidades centrais da sua aplicação no conforto do seu servidor. Você também pode utilizar ferramentas baseadas no navegador, como o Selenium que te permite gravar e executar testes automatizados.

No ambiente de pré visualização, você pode utilizar as poderosas ferramentas de depuração nativas do seu navegador. O navegador Google Chrome* fornece as Ferramentas do desenvolvedor. A depuração completa de JavaScript está disponível. Você pode setar breakpoints, executar passo a  passo e ver o conteúdo de variáveis do seu código JavaScript. Você também pode fazer depuração completa do DOM (Document Object Model). Isto significa que você pode mostrar os elementos HTML que estão sendo renderizados, ver seus relacionamentos na tela e setar breakpoints em eventos DOM. Você também pode ver o efeito do CSS no DOM. Adicionalmente, você tem acesso a uma console JavaScript, de onde você pode visualizar as mensagens da console de log da sua aplicação (console.log) e dinamicamente interagir com seu app digitando qualquer comando JavaScript.

Você pode ainda ter uma noção de como sua aplicação vai ficar em diversos tamanhos de tela, destacando a aba de pré visualização (arrastando-a para fora da janela do navegador), e redimensionando a nova janela em diferentes tamanhos. Note que seu navegador no servidor poderá mostrar barras de rolagem horizontais ou verticais que poderão não estar disponíveis em um navegador móvel.

Executando no Emulador de Dispositivos

O Intel HTML5 Development Environment provê um Emulador de Dispositivo que associa a conveniência e capacidades da pré visualização dentro do navegador enquanto provê recursos de emulação de dispositivos e suporta aplicações web híbridas. Execute ele através do menu Tools > Device Emulator ou clicando no ícone   na barra de menu. Veja o artigo Iniciando com o Emulador de Dispositivos para informações sobre o Emulador de Dispositivos.

Inicie selecionando um dispositivo virtual e uma plataforma virtual.

Selecionar um dispositivo virtual determina o tamanho do quandro de renderização da sua aplicação. Você também pode alterar a sua orientação de retrato para paisagem. Selecionando diversos dispositivos e orientações, você poderá ver rapidamente como sua aplicação se apresenta e se comporta em uma variedade de tamanhos de tela, com diferentes proporções.

Selecionar uma plataforma virtual determina quais APIs em plataforma cruzada estarão disponíveis. Para aplicações web híbridas, escolha a plataforma Cordova 2.0.0. Em caso contrário, selecione Mobile Web

O resto da interface do Emulador de Dispositivos é composto por painéis que te permitem configurar o ambiente virtual que será visto pela aplicação que está sendo testada. Por exemplo, o painel Geo Location te permite selecionar a localização que será retornada ao aplicativo em teste quando ele invocar uma API que solicite a localização atual.

Um exemplo pode explicar as diferenças entre executar uma aplicação no Emulador de Dispositivos versus a Pré Visualização no navegador. Suponha que você tem uma aplicação que solicita a localização atual através da API de geolocalização. Quando estiver em pré visualização, as solicitações para obter a localização atual serão tratadas pelo navegador do seu servidor, pois a Geolocalização é agora um padrão W3C e está implementada em diversos navegadores. Se o seu navegador suportar a geolocalização, então ele retornará a localização real do seu servidor ou (se você negar o acesso), retornará o erro PERMISSION DENIED. Se o seu navegador não suportar geolocalização, sua aplicação pode ter uma exceção JavaScript como “call to undefined value”. Quando usar o Emulador de Dispositivos, as solicitações para obter a localização atual serão tratadas por um simulador que irá retornar a localização selecionada através do painel Geo Location. Isto permite que você teste o comportamento da sua aplicação sem precisar mover o seu servidor.

Tal como no ambiente de pré visualização, você depurar completamente a sua aplicação utilizando o depurador do navegador. Entretanto, quando você executa as Ferramentas do desenvolvedor do Chrome dentro do Emulador de Dispositivos, você verá tanto o seu próprio código quanto o código de implementação do Emulador de Dispositivos. Isso pode te distrair um pouco, mas com alguns truques é possível conseguir manter o foco no seu próprio código. Veja o artigo Iniciando com o Emulador de Dispositivos para mais detalhes e boas práticas.

Executando em Hardware Real

Executando sua aplicação HTML5 em hardware real te permite ver sua aplicação exatamente como os usuários irão vê-la. Este é o único ambiente de testes que revela problemas de performance, como rolagem de tela lenta. Existem diferenças na execução em hardware real entre aplicativos web puros e aplicativos web híbridos.

Você pode executar com facilidade uma aplicação web pura em um navegador do seu sistema alvo. A IDE baseada em nuvem atua como um servidor web que hospeda a sua aplicação. Simplesmente direcione o navegador de seu dispositivo para a mesma URL que aparece quando você pré visualiza o app. Por favor note que seu dispositivo não consegue acessar as URLs dos arquivos de seu projeto se você não tiver previamente efetuado o login no Intel® Developer Zone (Intel® DZ) através do dispositivo. Tão logo seu login seja completado, você deve ser capaz de acessar os arquivos do seu projeto. Não execute a IDE em um navegador móvel.

Dica: Use o menu Tools > Show Preview URL as QR Code na IDE para expor a URL de pré visualização de sua aplicação através de um QR Code. Escanear este QR Code com o seu dispositivo vai te poupar o trabalho de digitar a URL nele. Assim que abrir a página do seu arquivo no seu navegador móvel, acrescente um bookmark nele. A URL não vai mudar.

Como na Pré visualização no navegador do servidor, esta abordagem tem sucesso limitado para aplicações web híbridas, pois não existe suporte a APIs não nativas dos navegadores.

Para executar uma aplicação web híbrida em um hardware real, você deve primeiro empacotar sua aplicação utilizando o PhoneGap Build (ou alguma forma alternativa que suporte a Cordova API). Veja o Iniciando no Intel® HTML5 Development Environment para mais detalhes sobre isso. Uma vez que sua aplicação tenha sido empacotada com o PhoneGap Build, você pode fazer o download dela para o seu dispositivo móvel usando o QR Code fornecido pelo PhoneGap Build.

Depurando em Hardware Real

Muitos dispositivos móveis não possuem espaço suficiente na tela para a criação de uma interface gráfica prática para depuração. Com isso você fica limitado a imprimir mensagens de depuração, a não ser que alguma solução remota de depuração esteja disponível.

Depuração remota significa que você irá depurar um código que está sendo executado em um sistema alvo usando um depurador que está sendo executado em um servidor. O depurador no servidor controla e examina o sistema alvo utilizando um link de comunicação, usualmente através de uma conexão sem fio ou cabo USB. A depuração remota permite que a interface gráfica de depuração contorne as limitações de tela do ambiente alvo e minimize o footprint de depuração no dispositivo alvo. Depuração remota  oferece as mesmas capacidades da depuração no navegador do servidor.

Existem algumas limitações na depuração remota. Se você se encontrar em uma situação que não suporte a depuração remota, você pode encontrar uma solução parcial para a depuração remota usando a ferramenta weinre. Nós iremos descrever a weinre em mais detalhes abaixo.

Muitos dos navegadores dos sistemas alvo atuais suportam a depuração remota. No Android 4.0 (Ice Cream Sandwich) ou em qualquer versão mais nova, você pode depurar utilizando o Chrome para Android no dispositivo e o Chrome Desktop no servidor. No iOS 6.0 ou nas versões mais novas, você pode depurar utilizando o Apple Mobile Safari* 6 no dispositivo e o Desktop Safati 6 no servidor Mac. Você também pode depurar utilizando o Opera Mobile* 12 (ou mais novo) no dispositivo e o Opera 12 no servidor, e com o Mozilla Firefox* 15 (ou mais novo) no  Android e o Firefox 15 no servidor. Infelizmente estas implementações não são interoperáveis; Chrome só suporta Chrome, Safari com Safari e assim por diante. Com exceção ao iOS versão 6, a depuração remota não é suportada quando a aplicação está  sendo executada em um pacote do PhoneGap Build e portanto não pode ser utilizada para aplicações web híbridas.

O procedimento utilizado para estabelecer uma sessão remota de depuração varia de navegador para navegador, e pode requerer a instalação de ferramentas adicionais. Veja os seguintes links para instruções para o ChromeSafari e Opera.

Usando o Weinre

Se a depuração remota não estiver disponível, sua próxima melhor alternativa é o weinre, que significa Web Inspector Remote  Weinre provê um subconjunto de capacidades para a depuração remota; em particular ele não suporta a depuração de JavaScript (setar breakpoints, passo a passo, etc.). Ele pode, entretanto, acessar o renderizador DOM do sistema alvo e capturar a saída da console.

O weinre é composto por três componentes que interagem entre sim. O primeiro componente é chamado de agente de depuração. Ele consiste de um código em JavaScript que deve ser injetado na aplicação para que ela possa ser depurada. O segundo componente é a interface de usuário do depurador do weinre, que é executada no navegador do servidor. Ela é similar à interface das Ferramentas do desenvolvedor do Chrome. O terceiro componente é o servidor de depuração, um programa stand-alone utilizado para conectar de forma segura a interface gráfica de depuração com a aplicação. 

Veja a página de documentação do weinre para instruções sobre como instalar e utilizar o weinre. Ela explica como instalar e executar o servidor de depuração.

Existem duas formas de injetar o agente de depuração do weinre em sua aplicação. Você pode editar o seu programa em HTML5 e adicionar uma tag <script> para chamar o agente de depuração. Se você estiver utilizando o PhoneGap Build, você pode solicitar um “debug build” do serviço, para que ele insira automaticamente o código do agente de depuração do weinre em sua aplicação durante o empacotamento. O PhoneGap Build também provê um servidor de depuração que você pode utilizar ao invés de executar o seu próprio servidor. Veja a seção de debug build na documentação do PhoneGapp Build para mais detalhes.

Depois que o agente de depuração estiver inserido e o servidor de depuração estiver em execução, o último passo é conectar o depurador com a aplicação que será testada. O processo exato para isso depende de qual servidor de depuração você está utilizando. Veja a página de documentação do weinre ou a seção Debug Build da documentação do PhoneGap Build, como apropriado.

Executar em um Simulador de Plataforma

O simulador de plataforma é um software de simulação que executa no servidor e que pode executar (quase todos) os softwares do sistema alvo real. Isso provê uma aproximação muito grande do ambiente real do sistema alvo, porque você está executando o código real do sistema alvo, com suas particularidades e tudo. A principal vantagem do simulador de plataforma é que ele te permite testar em diversos ambientes diferentes com mais fidelidade do que no emulador de dispositivos, sem ter que utilizar muitos dispositivos reais para os testes.

O simulador de plataforma é tipicamente um componente do kit de desenvolvimento de software (SDK) da plataforma; ele não está incluído no Intel HTML5 Development Environment – BETA. Você deve instalar o SDK da plataforma alvo desejada para utilizar o simulador de plataforma.

O simulador de plataforma também provê um último recurso de valor caso sua aplicação seja executada dentro do emulador e falhe de uma forma não depurável no hardware real. Situações como esta são raras no desenvolvimento de aplicações em HTML5, mas é bom saber que este recurso existe, caso ele seja necessário. O simulador de plataforma é muito útil para a depuração de código nativo,  mas aplicações HTML5 em plataforma cruzada não devem utilizar código nativo.

Geralmente os simuladores de plataforma possuem suas próprias ferramentas de depuração, mas estas não são usualmente HTML5-aware tal como os depuradores baseados em navegadores são. Você pode aplicar as mesmas técnicas de depuração do HTML5 descritas anteriormente para depurar em hardware real quando estiver executando em um simulador de plataforma.

Alguns simuladores de plataforma impõem penalidades significativas na performance. Isto pode ocorrer, por exemplo, se o simulador de plataforma executar instruções da máquina alvo direcionadas a um processador ARM em um servidor contendo um processador x86. Aplicações sensíveis ao tempo, como diversos jogos, comumente não podem ser executadas em um ambiente de simulação como este.

Resumo

Ferramenta

Suporta Aplicações Web Híbridas / API Cordova

Assitência a Depuração HTML5 

Precisão de Layout

Comportamento Preciso

Precisão de  Performance

Pré Visualizar no Navegador do Servidor

Não

Sim

Não

Não

Não

Emulador de Dispositivos

Sim

Sim

Sim

Não

Não

Navegador Móvel em Hardware Real 

Não

Sim, se o debug remoto estiver disponível; use o weinre para depuração parcial

Sim

Sim

Sim

App Empacotado do PhonGap em Harware Real

Sim

Não

Sim

Sim

Sim

App versão Debug do PhoneGap em Hardware Real

Sim

Use o weinre para depuração parcial

Sim

Sim

Não, mas próxima

Simulador de Plataforma

Sim

Sim, se o debug remoto estiver disponível; use o weinre para depuração parcial

Sim

Sim

Não, e pode ser lenta

Categorias:
Para obter mais informações sobre otimizações de compiladores, consulte Aviso sobre otimizações.

Comentários