Eclipse Chromium Javascript Remote Debugger

Fábio Miranda, em 17 Out 2009

Quem desenvolve aplicações Web, em algum momento com certeza já precisou escrever código Javascript, seja para dar mais interatividade a uma tela, para inspecionar elementos DOM da página, ou para fazer chamadas assíncronas com o servidor. E provavelmente já se deparou com situações onde era necessário debugar o código para investigar erros. Antigamente, eu utilizava uma forma bastante primitiva (e ineficiente) de depurar código javascript, uma versão tosca dos clássicos "printf" e "system.out": usava o Window.alert() para inspecionar o valor das variáveis. Esta abordagem é muito ruim: intrusiva (tem que alterar o código), ineficiente (é necessário que colocar vários alerts para acompanhar a evolução do valor da variável / objeto investigado), e nem sempre revela com clareza em que ponto do código pode estar localizado um bug. Felizmente, descobri ferramentas para isso.

• No Internet Explorer, há o Microsoft Script Debugger (não é instalado por padrão, deve ser baixado no MSDN).
• Na prática é uma versão tosca, porém mais elaborada, do Window.alert. É pouco amigável e possui poucos recursos (pelo menos era no tempo que experimentei).
• No Firefox, há o Firebug, e a brincadeira começa a ficar interessante.
• No Chrome, há o Javascript Console, meu favorito.

Com o Firebug e o Chrome, é realmente muito fácil e natural debugar código Javascript. Para ficar ainda melhor, existem plugins que integram esses debuggers com o Eclipse: Fireclipse e Chrome Eclipse Debugger. Irei mostrar a seguir como configurar o Chromium Debugger.

Chromium Javascript Remote Debugger

O primeiro passo é baixar o plugin do Eclipse:

1. Help > Software Updates > Add Site...
2. Em Location, copie e cole a URL: http://chromedevtools.googlecode.com/svn/update/dev
3. Baixe o plugin e reinicie o Eclipse.

Passo-a-Passo

Usar o debugger consiste de três passos:

1. Criar uma External Tool Configuration para o Eclipse iniciar o Chrome em modo de Debug
2. Criar uma Debug Configuration que se conecta a este navegador.
3. Criar breakpoints no Projeto criado automaticamente pela Debug COnfiguration.

Iniciar Chrome em modo de Debug

1. Run > External Tools > External Tools Configurations
2. Indicar a localização do chrome.exe
3. Informar como Argumento a porta onde o navegador dever iniciar.
• --remote-shell-port=9222
• É necessário informar a porta, pois o debugger do eclipse se conectará ao Chrome por esta porta!

Criar Debug Configuration

Agora começa de fato o uso do plugin do Chromium.

1. Vá no menu Run > Debug Configurations
2. Clique em Chromium Javascript e crie uma nova configuração
3. Coloque um nome de sua preferência:
   1. O primeiro nome se refere ao nome da Debug Configuration que será disponibilizado no botão "Debug As..."
   2. O segundo nome (Remote Scripts Project Name) é o nome do projeto que será criado no eclipse, onde poderemos selecionar os locais onde colocaremos os breakpoints
4. Informe a portaatravés da qual o Debugger irá se conectar ao navegador do Chrome. (A mesma informada na External Tool Configuration acima)
5. Caso deseje ver um log da comunicação entre o Eclipse e o Chrome em um Console do Eclipse, deixe marcada a opçãoShow debbuger network communication console)

Iniciar o Chrome, o Debugger, Setar breakpoints e Começar a Depurar!

Execute o Chrome e o Debugger a partir dos respectivos ícones (figura abaixo). Após rodar o Debugger, o plugin cria um projeto, que é listado no Project Explorer. Toda vez que uma página é acessada no Chrome, os fontes onde estão localizados código Javascript são listados nesse projeto, como na figura abaixo. Ao selecionar um desses fontes, podemos setar breakpoints (basta clicar duas vezes ao lado esquerdo da linha que se quer debugar). Todos as views do debugger (variables, expressions, breakpoints e threads) estarão disponíveis. Pronto! Debugar no Eclipse nunca foi tão fácil e produtivo. É lógico que vc pode usar o próprio Chrome para debug, mas na minha opinião:

1. é mais fácil visualizar os valores das variáveis no Eclipse
2. é possível caminhar pelo stack de execução de uma thread
3. configurar expressões.
4. usar o eclipse diminui a necessidade de ficar alternando entre várias janelas, tornando o trabalho menos cansativo.
5. torna mais precisa a contagem de tempo do Mylyn, pois fica menos fora da IDE (diminui a imprecisão devido a paradas de contagem de tempo por o Eclipse estar ocioso).