React Academy · Aula

Instalação e abertura do React DevTools

Configure o React DevTools no Chrome/Firefox e navegue pelo painel Components.

Aula 1 de 413 etapas

Instalação e abertura do React DevTools é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você instalará a extensão de navegador React DevTools e aprenderá a navegar pelo painel Componentes para inspecionar seu aplicativo React em execução.

O que é o React DevTools?

O React DevTools é uma extensão de navegador que adiciona dois novos painéis ao DevTools do Chrome/Firefox: **Componentes** (para inspecionar a árvore) e **Perfilador** (para medir o desempenho). Ele funciona com qualquer aplicativo React no modo de desenvolvimento.

Instalando a extensão

Acesse a Chrome Web Store (ou os complementos do Firefox) e pesquise por **React Developer Tools**. Clique em **Adicionar ao Chrome** (ou no Firefox). O ícone do React na barra de ferramentas ficará ativo nas páginas que usam React.

Abrindo o DevTools

Pressione **F12** (ou Cmd+Option+I no Mac) para abrir o DevTools do navegador. Você verá novas guias chamadas **Componentes** e **Perfilador**, ao lado de Elementos e Console.

O painel Componentes

A guia Componentes mostra a árvore completa de componentes React da página atual. Você pode clicar em qualquer componente para inspecionar suas propriedades, estado, ganchos e o arquivo de origem que o renderizou.

Navegando pela árvore

Use a caixa de pesquisa na parte superior do painel Componentes para filtrar pelo nome do componente. Clique em um componente na árvore para ver seus detalhes no lado direito. Use as setas para expandir ou recolher os elementos filhos.

Inspecionando propriedades em tempo real

Quando você clica em um componente, suas **propriedades** atuais aparecem no painel à direita. Você pode até editar os valores das propriedades diretamente no DevTools para visualizar alterações na interface sem modificar o código-fonte.

Inspecionando o estado e os ganchos

Abaixo das propriedades, você verá **ganchos** como Estado, Efeito, Memorização e Referência. Ao expandir Estado, você verá o valor atual de cada chamada de useState nesse componente.

Requisito do modo de desenvolvimento

O React DevTools mostra nomes de componentes somente quando o aplicativo é executado no **modo de desenvolvimento**. Nas compilações de produção, o React remove os nomes dos componentes para gerar pacotes menores; portanto, sempre depure localmente com npm start ou npm run dev.

Destacando atualizações

Ative **Destacar atualizações quando os componentes forem renderizados** nas configurações do DevTools (ícone de engrenagem). Os componentes que forem renderizados novamente piscarão com uma sobreposição colorida, tornando as renderizações desnecessárias imediatamente visíveis.

Verificação rápida

Quais são as duas guias que a extensão React DevTools adiciona às ferramentas de desenvolvedor do navegador?

Responda na aula interativa

Revisão

Você instalou o React DevTools e explorou o painel Componentes. Agora pode inspecionar a árvore de componentes, ler propriedades e estado em tempo real, editar valores no próprio lugar e destacar novas renderizações — tudo sem tocar no código-fonte.

A seguir

Próxima lição: **Inspecionando árvores de componentes e propriedades** — você se aprofundará em hierarquias aninhadas e aprenderá a ler estruturas complexas de propriedades e estado na barra lateral do DevTools.

Grátis para começar

Aprenda React com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 88
Aulas: 324

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Instalação e abertura do React DevTools” é grátis?

Sim — o texto completo de “Instalação e abertura do React DevTools” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Instalação e abertura do React DevTools”?

Configure o React DevTools no Chrome/Firefox e navegue pelo painel Components. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Instalação e abertura do React DevTools”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Instalação e abertura do React DevTools
Inspeção de árvores de componentes e props
Uso da aba Profiler
Depuração de erros comuns do React

← Voltar para React Academy