Weinre: Web Inspector / Debugger para Mobile Web Apps - PhoneGap

Ei pessoal,

Trabalhando já há algum tempo com mobile web apps, existe uma ferramenta que mora no meu coração que se chama Weinre. É um remote web inspector para debugar e inspecionar aplicações web remotas. É bem parecido com o Firebug (do Firefox) e o Google Developer Tools (do Google Chrome). Eu uso muito para debugar apps feitas com PhoneGap e PhoneGap com Sencha Touch.

Eu procurei para ver se tinha algum post falando sobre isso em português, mas não achei muita coisa. Então resolvi escrever um! :)

O resultado é como esse do screenshot abaixo. Eu usei a aplicação de HelloWorld que postei aqui no blog como exemplo:

Vamos ver como se instala e usa essa ferramenta.

Link do Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

Instalação

O primeiro passo é a instalação, que é meio chatinha. Os passos que vou descrever aqui são para Mac OS.

1 - Ter o XCode instalado.

2 - Abra o terminal

3 - Instalar o Homebrew (se ainda não tiver). Execute o seguinte comando:

/usr/bin/ruby -e "$(/usr/bin/curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)"

4 - Instalar o Node (se ainda não tiver):

brew install node

5 - Instalar o NPM que é um gerenciador de pacotes para o Node. Precisa ter o Git Instalado também.

git clone http://github.com/isaacs/npm.git
cd npm
sudo make install

6 - Instalar o Weinre

sudo npm -g install weinre

7 - Execute o Weinre. Digite o seguinte comando:

weinre

Usando o Weinre

8 - Uma vez que o Weinre estive rodando, abra o browser em http://localhost:8080 ou IP local como 127.0.0.1:8080/. Vai abrir a página o Weinre com instruções.

9- Abra o projeto no XCode. Adicione o script na página index.html do seu projeto.

10 - Não esqueça de configurar os external hosts no arquivo .plist - eu coloquei "*" para permitir todos. Quando for empacotar a app para produção pode remover o script e essa configuração.

11 - Abra a página client do Weinre e emule o projeto:

12 - Pronto! Agora é só inspecionar e debugar a sua web app!

Alternativas:

Se não quiser instalar o Weinre na sua máquina, pode usar o http://debug.phonegap.com/

Existe uma ferramenta similar também chamada iWebSpector (apenas para iOS). Pena que não funciona no Mac OS Mountain Lion! :(

Para usuários de Windows ou Linux: o processo de instalação é mesmo, quer dizer, você precisar ter o Node e o NPM instalado na sua máquina (existem instaladores alternativos, só pesquisar na web). E a partir daí, o processo é o mesmo.

E quem quiser usar o Weiner em apps Android também pode. O processo é o mesmo.

Essa ferramenta também vale se você usa por exemplo, PhoneGap com Sencha Touch, PhoneGap com JQuery mobile, etc ou até mesmo mobile apps feitas puramente com HTML 5!

Até a próxima! :)