Si está creando una aplicación web con React, es posible que desee ver el estado o los accesorios de los componentes en tiempo real. ¡Aquí hay una solución rápida para Chrome y FireFox!
Reaccionar herramientas de desarrollo
Instale la extensión React Developer Tools para Chrome o FireFox. Le permite inspeccionar las jerarquías de componentes de React dentro de las herramientas de desarrollador, de la misma manera que miraría los elementos DOM, la consola o la red.
Inspección de componentes de React
- Abra su aplicación e inspeccione la página con herramientas de desarrollador (Comando + Opción + I).
- Seleccione React Developer Tools
3. Elija un componente en el árbol para ver su estado y accesorios actuales.
También puede seleccionar un elemento de React directamente desde la página colocando el cursor sobre él con la herramienta de selección:
Modificar el estado
Si desea actualizar su estado en el navegador, ¡puede hacerlo! Modifíquelo haciendo clic y editando los atributos de estado en la pestaña React. Esto volverá a renderizar el DOM, pasando el estado a través de los accesorios.
¡Feliz codificación! ?