Pular para conteúdo

Setup 04: Svelte DevTools e Debugging 🔍

Para debugar aplicações Svelte de forma eficiente, as ferramentas nativas do navegador são ótimas, mas a extensão oficial do Svelte é ainda melhor.

1. Svelte DevTools

Esta extensão adiciona uma aba "Svelte" ao seu console do desenvolvedor (F12), permitindo inspecionar o estado e as props de cada componente em tempo real. - Chrome: Link Chrome Web Store. - Firefox: Link Firefox Add-ons.

2. Inspecionando Elementos

Com o DevTools instalado: 1. Abra seu projeto rodando em localhost:5173. 2. Abra o console (F12). 3. Vá na aba Svelte. 4. Selecione um componente na árvore para ver suas variáveis atuais.

3. O comando console.log() 📢

No Svelte, você pode usar o log dentro das tags reativas para rastrear mudanças: 

<script>
  let contador = 0;
  $: console.log("O contador mudou para:", contador);
</script>

4. Error Lens no VS Code

Se você seguiu o Setup 02, o Error Lens mostrará erros de sintaxe instantaneamente na tela, sem que você precise rodar o código para descobrir o erro.

Finalizado! Agora seu ambiente está pronto para brilhar com Svelte. ✨