React Developer Tools
Use as React Developer Tools para inspecionarcomponentesdo React, editarprops e estado, e identificar problemas de desempenho.
Você aprenderá
- Como instalar o React Developer Tools
Extensão do navegador
A maneira mais fácil de depurar sites construídos com React é instalar a extensão do navegador React Developer Tools. Ela está disponível para vários navegadores populares:
Agora, se você visitar um siteconstruído com React,você verá os painéisComponents e Profiler.
Safari e outros navegadores
Para outros navegadores (por exemplo, Safari), instale o pacote npmreact-devtools:
Em seguida, abra as ferramentas de desenvolvimento a partir do terminal:
Depois, conecte seu site adicionando a seguinte tag<script>ao início do<head>do seu site:
Recarregue seu site no navegador agora para visualizá-lo nas ferramentas de desenvolvimento.
Mobile (React Native)
Para inspecionar aplicativos construídos comReact Native, você pode usar oReact Native DevTools, o depurador integrado que incorpora profundamente o React Developer Tools. Todas as funcionalidades funcionam de forma idêntica à extensão do navegador, incluindo realce 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 standalone do React DevTools seguindo o guiaSafari e outros navegadoresacima.