Pular para conteúdo

Setup 03 - Browser e Vue DevTools 🕵️

Para desenvolver frontend, o navegador não é apenas onde vemos o site, mas também nossa principal ferramenta de depuração.

  • Google Chrome ou Microsoft Edge possuem as ferramentas de desenvolvedor mais robustas para o ecossistema Vue.

🛠️ Instalando Vue DevTools

O Vue DevTools permite "enxergar" as variáveis reativas, o estado do Pinia e a árvore de componentes.

  1. Acesse a loja de extensões (Chrome Web Store).
  2. Procure por Vue.js devtools e clique em "Usar no Chrome".
  3. Após instalar, reinicie o navegador.

🚀 Como Usar

No seu projeto Vue rodando: 1. Clique com o botão direito na página e selecione Inspecionar. 2. Procure a aba Vue no menu superior do console. 3. Agora você pode ver todas as suas refs e reactive em tempo real!