React Academy · Lección

Instalación y apertura de React DevTools

Configure React DevTools en Chrome/Firefox y explore el panel Components.

Lección 1 de 413 pasos

Instalación y apertura de React DevTools es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenido

En esta lección instalará la extensión de navegador React DevTools y aprenderá a navegar por el panel Components para inspeccionar su aplicación de React en ejecución.

¿Qué es React DevTools?

React DevTools es una extensión de navegador que añade dos paneles nuevos a las DevTools de Chrome/Firefox: **Components** (para inspeccionar el árbol) y **Profiler** (para medir el rendimiento). Funciona con cualquier aplicación de React en modo de desarrollo.

Instalación de la extensión

Vaya a Chrome Web Store (o a Firefox Add-ons) y busque **React Developer Tools**. Haga clic en **Add to Chrome** (o en la opción equivalente de Firefox). El icono de React de la barra de herramientas se iluminará en las páginas que usen React.

Apertura de las DevTools

Pulse **F12** (o Cmd+Option+I en Mac) para abrir las DevTools del navegador. Verá las nuevas pestañas **Components** y **Profiler** junto a Elements y Console.

El panel Components

La pestaña Components muestra el árbol completo de componentes de React de la página actual. Puede hacer clic en cualquier componente para inspeccionar sus props, estado, hooks y el archivo de origen que lo renderizó.

Navegación por el árbol

Use el cuadro de búsqueda situado en la parte superior del panel Components para filtrar por nombre de componente. Haga clic en un componente del árbol para ver sus detalles en el lado derecho. Use las flechas para expandir o contraer los componentes secundarios.

Inspección de props en tiempo real

Al hacer clic en un componente, sus **props** actuales aparecen en el panel derecho. Incluso puede editar los valores de las props directamente en las DevTools para previsualizar cambios en la interfaz sin modificar el código fuente.

Inspección del estado y los hooks

Debajo de las props verá **hooks** como State, Effect, Memo y Ref. Al expandir State se muestra el valor actual de cada llamada a useState en ese componente.

Requisito del modo de desarrollo

React DevTools muestra los nombres de los componentes únicamente cuando la aplicación se ejecuta en **modo de desarrollo**. En las compilaciones de producción, React elimina los nombres de los componentes para generar bundles más pequeños, por lo que debe depurar siempre de forma local con npm start o npm run dev.

Resaltado de actualizaciones

Active **Highlight updates when components render** en la configuración de las DevTools (icono de engranaje). Los componentes que vuelvan a renderizarse parpadearán con una superposición de color, lo que hará visibles de inmediato las renderizaciones innecesarias.

Comprobación rápida

¿Qué dos pestañas añade la extensión React DevTools a las herramientas de desarrollo del navegador?

Responde en la lección interactiva

Resumen

Ha instalado React DevTools y explorado el panel Components. Ahora puede inspeccionar el árbol de componentes, leer props y estado en tiempo real, editar valores directamente y resaltar las renderizaciones —todo sin tocar el código fuente.

Próxima lección

Próxima lección: **Inspección de árboles de componentes y props** — profundizará en jerarquías anidadas y aprenderá a leer estructuras complejas de props y estado en la barra lateral de las DevTools.

Gratis para empezar

Aprende React con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 88
Lecciones: 324

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Instalación y apertura de React DevTools» es gratis?

Sí — el texto completo de «Instalación y apertura de React DevTools» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Instalación y apertura de React DevTools»?

Configure React DevTools en Chrome/Firefox y explore el panel Components. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Instalación y apertura de React DevTools»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Instalación y apertura de React DevTools
Inspección de árboles de componentes y props
Uso de la pestaña Profiler
Depuración de errores comunes de React

← Volver a React Academy