Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Como Depurar Aplicativos HTML5 no Windows Phone

From Wiki
Jump to: navigation, search

Este artigo exemplifica como depurar aplicativos HTML5 no Windows Phone.

WP Metro Icon Bug.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

Compatibilidade
Artigo
Tradução:
Por diegodobelo
Última alteração feita por hamishwillee em 19 Jul 2013

Introdução

Depurar aplicativos HTML não é uma tarefa fácil e, até hoje, eu não sabia como fazer isso usando HTML5 no Windows Phone. A técnica que será descrita neste artigo pode ser aplicada também para aplicativos Windows Phone 7.1 usando Phonegap ou aplicativos Android/iOS. A ferramenta "secreta" para depurar o conteúdo HTML dentro de uma aplicação é chamada WEINRE, abreviação de WEb INspector REmote. Weinre é um depurador para páginas web, como o FireBug (para FireFox) e o WebInspector (para browsers baseados em WebKit), porém ele foi projetado para funcionar remotamente e, em particular, para permitir depuração de páginas web em dispositivos móveis como os smartphones.

Solução

Para instalar o Weinre é necessário baixar e instalar o NodeJS

NodeJS

Após instalar o NodeJS reinicie o seu computador para que seja possível executar os comandos NodeJS a partir da linha de comando. Após reiniciar abra o prompt de comando e execute:

npm install weinre -g  

Este comando irá instalar o pacote Weinre globalmente. Isto é o que você deverá ver no prompt de comando:

Weinre Install

Quando o instalador terminar a instalação o servidor Weinre poderá ser executado no PC. Execute o seguinte comando no prompt:

weinre --boundHost -all- --debug -true  

Com estes parâmetros o Weinre também deverá abrir uma porta no firewall. Para mais parâmetros veja a página do projeto. Para verificar se o servidor foi iniciado corretamente basta abrir um browser e carregar 127.0.0.1:8080 (8080 é a porta padrão para o Weinre). Se esta página for exibida o servidor está rodando:

Server running

Clique no link Debug Client User Interface para ver se algum cliente está conectado e para depurar estes clientes.

Vamos criar o aplicativo HTML5 para Windows Phone. Use o template que foi instalado junto com o SDK para criar um novo projeto HTML5 para Windows Phone. Abra o arquivo index.html que foi criado dentro do diretório Html e adicione a seguinte linha no header:

<script src="http://[o ip do servidor]:8080/target/target-script-min.js#anonymous"></script>  

Substitua [o ip do servidor] pelo IP do PC que está rodando o servidor Weinre e execute o aplicativo. Se tudo ocorrer dentro do esperado, o cliente conectado deve ser visto em Debug Client User Interface no servidor:

Client connected

Quando o Windows Phone estiver conectado, você poderá inspecionar e alterar o DOM em tempo real e executar javascripts:

Debug

Neste caso em particular a única alteração foi a cor do background, mas você pode fazer o que for necessário.

Usando o painel Console da ferramente de desenvolvimento presente no browser você pode executar comandos e sentenças JavaScript. O Console também mostra a saída para vários métodos, inclusive console.log().

Commands

Isto é basicamente tudo. Simples e (assim espero) útil.

Referências adicionais

This page was last modified on 19 July 2013, at 06:20.
292 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×