debugger.html é um depurador de JavaScript moderna da Mozilla, construído como um
aplicação web usando React e Redux. Este projecto foi iniciado em um esforço para substituir o depurador atual dentro do Firefox Developer Tools.
O debugger.html é uma aplicação que faz uma conexão WebSocket para um alvo que será debugável. A aplicação então interpreta dados e envia comandos para o motor JS para gerenciar o ambiente de debug; por exemplo, criando um breakpoint pausando a execução do motor JS em um determinado parte do código.
O debugger.html pode conectar-se e depurar também com Chrome e Node, ambos de forma experimental por enquanto. O depurador se conecta ao Firefox usando o Mozilla Remote Debug Protocol (RDP) e se comunica com o Node e o Chrome usando RDP do Chrome.
O projeto debugger.html está hospedado em GitHub e usa frameworks modernos do mercado e toolchains, tornando-se prontamente disponível para um grande público de desenvolvedores.
A interface
A interface é dividida em três partes: o painel que mostra o código-fonte, o painel de editor e uma barra lateral direita.
O painel do código fonte exibe uma visualização do source que está sendo depurado.
O painel do editor mostra uma árvore dos arquivos do projeto. Você também consegue abrir vários arquivos em abas para melhorar a depuração de vários arquivos de uma vez.
Já a barra da direita, mostra a listagem de breakpoints, pausando o debugger, ele mostra chamadas atuais e também o escopo das funções. Ainda nesse painel, manipular um pouco seu código, pausando, executando, pulando funções e etc.
Lá no GitHub eles tem as instruções de como você pode usar isso HOJE. Mas eles já colocaram na versão Nighly Build. Queria ter trazido mais informações de uso, eu até clonei e rodei o npm install, mas está rodando até agora! 😉