| title | Ferramenta de desenvolvedor do React |
|---|
Use a ferramenta de desenvolvedor do React para inspecionar componentes, editar props e estados, e identificar problemas de performance.
- Como instalar o React Developer Tools
A forma mais fácil de depurar websites construídos com React é instalar a ferramenta de desenvolvedor do React no navegador. Ela está disponível para vários navegadores populares:
Agora, se você visitar um website construído com React, você verá os painéis Components e Profiler.
Para outros navegadores (Safari, por exemplo), instale o pacote react-devtools:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtoolsEm seguida, abra a ferramenta de desenvolvedor no terminal:
react-devtoolsEm seguida, conecte seu website adicionando a seguinte tag <script> ao início do <head> de seu website.:
<html>
<head>
<script src="http://localhost:8097"></script>Agora recarregue seu website para que você possa ver a ferramenta de desenvolvedor.
Para inspecionar aplicativos construídos com React Native, você pode usar o React Native DevTools, o depurador integrado que se integra profundamente com as Ferramentas de Desenvolvedor do React. Todos os recursos funcionam de forma idêntica à extensão do navegador, incluindo destaque e seleção de elementos nativos.
Saiba mais sobre depuração no React Native.
Para versões do React Native anteriores à 0.76, use a versão independente do React DevTools seguindo o guia Safari e outros navegadores acima.