Herramientas de Desarrollo de React
Utiliza las Herramientas de Desarrollo de React (React Developer Tools) para inspeccionar componentes de React, editar props y estado, e identificar problemas de rendimiento.
Aprenderás
- Cómo instalar las Herramientas de Desarrollo de React
Extensión del navegador
La forma más fácil de depurar sitios web construidos con React es instalar la extensión de las Herramientas de Desarrollo de React. Está disponible para varios de los navegadores más populares:
Ahora, si visitas un sitio web construido con React, verás los paneles de Components (componentes) y Profiler (perfilador o generador de perfiles).
Safari y otros navegadores
Para otros navegadores (por ejemplo, Safari), instala el paquete de npm react-devtools:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtoolsA continuación abre las herramientas de desarrollo desde la terminal:
react-devtoolsLuego conecta tu sitio web añadiendo la siguiente etiqueta <script> al inicio del <head> de tu sitio web:
<html>
<head>
<script src="http://localhost:8097"></script>Ahora recarga tu sitio web en el navegador para verlo en las herramientas de desarrollo.
Móvil (React Native)
Para inspeccionar aplicaciones creadas con React Native, puedes usar React Native DevTools, el depurador integrado que se integra profundamente con las herramientas de desarrollador de React. Todas las funciones funcionan de forma idéntica a la extensión del navegador, incluyendo el resaltado y la selección de elementos nativos.
Learn more about debugging in React Native.
Para versiones de React Native anteriores a la 0.76, utiliza la compilación independiente de React DevTools siguiendo la guía de arriba Safari y otros navegadores.