Depurar Bun com o depurador web

O Bun fala o WebKit Inspector Protocol. Para habilitar a depuração ao executar código com Bun, use a flag --inspect. Para fins de demonstração, considere o seguinte servidor web simples.

Bun.serve({
  fetch(req) {
    console.log(req.url);
    return new Response("Hello, world!");
  },
});

Vamos executar este arquivo com a flag --inspect.

Isso automaticamente inicia um servidor WebSocket em uma porta disponível que pode ser usado para introspecção do processo Bun em execução. Várias ferramentas de depuração podem se conectar a este servidor para fornecer uma experiência de depuração interativa.

O Bun hospeda um depurador baseado na web em debug.bun.sh. É uma versão modificada da Web Inspector Interface do WebKit, que será familiar para usuários do Safari.

bun --inspect server.ts

txt

------------------ Bun Inspector ------------------
Escutando em:
  ws://localhost:6499/0tqxs9exrgrm

Inspecionar no navegador:
  https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------

Abra a URL debug.bun.sh fornecida em seu navegador para iniciar uma sessão de depuração. Desta interface, você poderá visualizar o código fonte do arquivo em execução, visualizar e definir breakpoints e executar código com o console embutido.

Vamos definir um breakpoint. Navegue até a aba Sources; você deve ver o código de antes. Clique no número da linha 3 para definir um breakpoint em nossa instrução console.log(req.url).

Em seguida, visite http://localhost:3000 em seu navegador. Isso enviará uma requisição HTTP para nosso servidor web localhost. Parecerá que a página não está carregando. Por quê? Porque o programa pausou a execução no breakpoint que definimos anteriormente.

Note como a UI mudou.

Neste ponto, há muito que podemos fazer para introspecionar o ambiente de execução atual. Podemos usar o console na parte inferior para executar código arbitrário no contexto do programa, com acesso completo às variáveis no escopo em nosso breakpoint.

No lado direito do painel Sources, podemos ver todas as variáveis locais atualmente no escopo e explorar para ver suas propriedades e métodos. Aqui, estamos inspecionando a variável req.

Na parte superior esquerda do painel Sources, podemos controlar a execução do programa.

Aqui está uma folha de referência explicando as funções dos botões de controle de fluxo.

Continuar execução do script — continuar executando o programa até o próximo breakpoint ou exceção.
Step over — O programa continuará para a próxima linha.
Step into — Se a instrução atual contiver uma chamada de função, o depurador "entrará" na função chamada.
Step out — Se a instrução atual for uma chamada de função, o depurador terminará de executar a chamada e "sairá" da função para o local onde foi chamada.