A Rik Arends lançou o TraceGL, uma nova ferramenta para depurar aplicações JavaScript usando depuração por trilhas. A fim de tornar mais fácil depurar e entender navegadores complexos e aplicações baseadas em Node.js, a ferramenta captura, visualiza e permite que o usuário navegue na trilha de execução enquanto a aplicação está sendo executada.
O TraceGL consiste em duas partes: um servidor baseado no node.js e um cliente baseado no WebGL que executa no navegador. O navegador de quatro painéis mostra um mini mapa da trilha no topo superior esquerdo, uma parte ampliada da trilha no canto superior direito, o stack-trace no canto inferior esquerdo e o código no canto inferior direito. Quando visualizado o código nas variáveis, a Interface do Usuário (UI) mostra os valores que a variável tem no momento. Além disso, os caminhos de execução de código para fluxo de controle são visualizados.
Para saber mais sobre este projeto, o InfoQ.com conversou com seu criador, Rik Arends.
Porque precisamos do TraceGL, os depuradores integrados aos navegadores não são bons o suficiente?
Depuradores de navegadores foram definitivamente ficando melhor, mas eles operam no modo 'breakpoint/step'. Primeiro, você tem que saber aonde colocar os breakpoints, e se passar sobre a função errada tem que começar tudo novamente. Com a trilha, toda execução é gravada. Isso significa que ao invés de passar sobre o código é possível ver toda lógica de uma só vez, todas variáveis e argumentos de função são visíveis, podendo usar a busca e visualizações agregadas de dados. Além disso, como isso é uma gravação, não é necessário interromper o programa. Especialmente com códigos baseados em eventos, o comportamento é diferente se colocar um breakpoint em algum lugar, com o rastreamento o comportamento do código é mais natural. E agora a gravação pode ser compartilhada, que habilita novas maneiras de ajudar a depuração em processos de garantia de qualidade.
O TraceGL tem definitivamente me ensinado muito sobre meu próprio código e bibliotecas como jQuery apenas vagando ao redor do código.
Existe algum tipo de aplicação que o TraceGL é especialmente útil?
Quanto maior a quantidade de código, mais agradável é ter um rastreador, especialmente se o código não for todo seu. Use-o em qualquer aplicativo HTML5 razoavelmente complexo e aprenda muitas coisas novas sobre o código. Ver o que você faz quando você move ao redor da interface do usuário é muito lindo. Entretanto eu tenho que dizer que o TraceGL é também muito útil para o Node.js. Como ele é inteiramente direcionado a evento, depurar com breakpoint não é uma característica natural, mas o rastreamento é. A disponibilidade de uma pilha de fechamento permite-lhe entrar e sair em callbacks clicando na função, que é muito útil. Isso é como abrir uma janela no servidor e ter condições de ver o que está acontecendo.
Como o TraceGL trabalha, ele se integra com a VM Javascript?
O TraceGL opera tanto como um proxy quanto fileserver e trabalha por instrumentação no seu Javascript, muito da mesma maneira que o CoffeScript é compilado para o Javascript. Estou usando o incrível Acorn JS parser do Marijn Haverbeke, e então modifico o código sem destruí-lo. Quando executando este código modificado, ele grava todo o fluxo do código sobre uma conexão websocket, através do nó processado para a interface de visualização do usuário. Isso significa que o traceGL não precisa de uma conexão para depurar a VM Javascript. Isso pode facilmente rastrear seu código em um telefone móvel, como um backend Node.js.
Qual é a tecnologia usada para implementar a interface do usuário no traceGL?
Como o TraceGL pode obter enormes quantidades de dados contínuos, era necessário mostrar e rolar grandes quantidades de texto. Como um experimento escrevi toda a interface do usuário em webGL, e renderizar todo o texto para estáticos como buffer de vértices (Vertex Buffers). Isso significa que quando rola a tela e amplia o zoom existe um pequeno processamento sendo feito no JavaScript como uma simples chamada para renderizar grandes pedaços de texto. Implementei um kit básico de manipulação da "região suja" da interface do usuário e escrevi um compilador GLSL para fazer todo o estilo da UI. Então, com isso não é mais necessário utilizar CSS para aplicar os estilos, mas é necessário escrever pequenos fragmentos de sombreamento. Toda a interatividade funciona via raypicking e databinding com o DOM do JavaScript para variáveis sombras. Se seguir esse caminho será necessário implementar a manipulação das telas de retina, mas isso funciona muito bem. Sou originalmente um programador gráfico C++, ser capaz de fazer uma UI do navegador rápido sem HTML foi muito animador.
O TraceGL funciona com linguagens que compilam para Javascript como o CoffeScript?
O TraceGL pode instrumentar e mostrar a saída de um compilador CoffeScript, mas ainda não tenho suporte para source-maps para ordenadamente mapeá-lo de volta para o código CoffeeScript original.
No entanto o TraceGL não é um editor ou IDE, mas permite uma "programação ao vivo" similar ao IDE LightTable. Considerando que o LightTable faz isso exibindo resultados de funções individuais em Closure e permite que a edição afete os resultados, com o TraceGL é possível continuar usando seu próprio editor e usar a interface do usuário do TraceGL para visualizar também o fluxo do código ao vivo, ou após a execução.
O TraceGL está disponível por $14,99 dólares. Sendo distribuído como um simples arquivo JavaScript e executa em qualquer plataforma que consiga executar o Node.js e navegadores que suportam WebGL (principalmente as versões recentes do Chrome e Firefox).