Pitch: Fiz uma extensão do VS Code que desenha o programa enquanto ele roda, para quem está aprendendo

Para quem está começando, o difícil muitas vezes não é a sintaxe: é ver o que acontece dentro do laço. Na aula, alguém desenha o array no quadro, apaga e desenha de novo a cada passo.

O Code Scope faz esse desenho dentro do VS Code. Você coloca um breakpoint, aperta F10, e um painel ao lado do código mostra:

• arrays como caixas, com i e j virando setas que andam embaixo delas;
• a troca do Bubble Sort animada, mesmo quando o código usa temp e leva dois passos;
• pilha como torre, fila como esteira, lista ligada como nós e setas, árvore como árvore;
• a pilha de chamadas e a árvore de recursão do fib(n - 1) + fib(n - 2), com quantas vezes a mesma conta foi refeita;
• cada parte da condição do if com os valores no lugar dos nomes: ordenado[meio] == alvo (17 == 25), falso;
• o teste de mesa preenchido sozinho, uma linha por passo;
• o erro explicado em palavras simples, com a posição que não existe desenhada ao lado do array.

Funciona com Java, JavaScript, TypeScript, Python, C# e C, validado com os debuggers de verdade. As outras linguagens entram num modo genérico. Tudo roda dentro do VS Code: não abre navegador, não pede conta, não manda nada para a internet. O painel fala português e inglês.

Tem também um modo de "adivinhar antes": o painel pergunta quanto a variável vai valer, você responde, aperta F10 e ele diz se acertou.

Como funciona por dentro: a extensão escuta a sessão de debug pelo DAP (Debug Adapter Protocol) e, a cada parada, lê as variáveis e desenha num webview. Cada debugger formata as variáveis de um jeito, então há um adaptador para cada um (Java Debugger, js-debug, debugpy, coreclr do C# e cppdbg com gdb), com testes de integração que rodam o debugger de verdade no CI, em Windows, Linux e macOS. O painel usa só as cores do seu tema (--vscode-*), por isso acompanha os temas claro, escuro e de alto contraste.

É código aberto (MIT), está em beta e foi vibe codado: fiz com ajuda de IA. Por isso, o retorno de quem usar vale ainda mais. Para instalar, baixe o code-scope.vsix da release e use "Install from VSIX..." no VS Code:
https://github.com/celoramos/Code-Scope/releases/tag/v0.7.0

Precisa do VS Code 1.95 ou mais novo.

O que mais me ajuda agora: abrir com um programa seu e me dizer onde o desenho ficou confuso ou errado. Issues são bem-vindas, e tem tarefas abertas para quem quiser contribuir, várias sem código: testar com leitor de tela, revisar os textos em inglês, gravar GIFs, e também conjuntos, coleções do C++ e JavaScript no navegador. Dúvidas e ideias podem ir nas Discussions.

Repositório: https://github.com/celoramos/Code-Scope