Aprenda esta herramienta muy útil que definitivamente necesitamos instalar al crear una aplicación React.
Una herramienta muy útil que definitivamente necesitamos instalar cuando creamos una aplicación React, como una aplicación Next.js por ejemplo, son las React Developer Tools.
Disponibles tanto para Chrome como para Firefox , las herramientas para desarrolladores de React son una herramienta esencial que puedes usar para inspeccionar una aplicación de React.
Proporcionan un inspector que revela el árbol de componentes de React que construye tu página, y para cada componente puedes ir y verificar las propiedades, el estado, los ganchos y mucho más.
Una vez que hayas instalado React Developer Tools, puedes abrir las herramientas de desarrollo del navegador habitual (en Chrome, haz clic derecho en la página y luego haz clic en Inspect
) y encontrarás 2 nuevos paneles: Componentes y Profiler .
Si mueve el mouse sobre los componentes, verá que en la página, el navegador seleccionará las partes que son renderizadas por ese componente.
Si selecciona cualquier componente en el árbol, el panel derecho le mostrará una referencia al componente principal y las propiedades que se le pasan:
Puede navegar fácilmente haciendo clic en los nombres de los componentes.
Puede hacer clic en el ícono del ojo en la barra de herramientas de Herramientas para desarrolladores para inspeccionar el elemento DOM, y también si usa el primer ícono, el que tiene el ícono del mouse (que se ubica convenientemente debajo del ícono regular similar de DevTools), puede pasar el cursor sobre un elemento en la interfaz de usuario del navegador para seleccionar directamente el componente React que lo representa. ¿QUÉ SARTÉN COMPRAR? Comparativa, precios y análisis de LAS MEJORES SARTENES
Puede utilizar el bug
icono para registrar los datos de un componente en la consola.
Esto es bastante asombroso porque una vez que tienes los datos impresos allí, puedes hacer clic derecho en cualquier elemento y presionar “Guardar como variable global”. Por ejemplo, aquí lo hice con la url
propiedad y pude inspeccionarla en la consola usando la variable temporal que se le asignó temp1
:
Usando los Source Maps , que son cargados por Next.js automáticamente en modo de desarrollo, desde el panel Componentes podemos hacer clic en el código y DevTools cambiará al panel Fuente, mostrándonos el código fuente del componente:
La pestaña Profiler es aún más genial, si cabe. Nos permite registrar una interacción en la aplicación y ver qué sucede. No puedo mostrar un ejemplo todavía, porque se necesitan al menos dos componentes para crear una interacción y ahora solo tenemos uno. Hablaré de esto más adelante.
Mostré todas las capturas de pantalla usando Chrome, pero React Developer Tools funciona de la misma manera en Firefox:
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Cómo utilizar las herramientas para desarrolladores de React
Aprenda esta herramienta muy útil que definitivamente necesitamos instalar al crear una aplicación React.
programar
es
https://aprendeprogramando.es/static/images/programar-como-utilizar-las-herramientas-para-desarrolladores-de-react-2144-0.jpg
2024-11-02
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente