Si venís de programar con Vanilla JS, seguramente vuestra herramienta de depuración número uno sea console.log() (y no nos engañemos, sigue siendo útil).
Pero en React, console.log se queda corto. React funciona con una estructura de árbol de componentes, estados internos y ciclos de vida que no son visibles directamente en el inspector de elementos tradicional del navegador.
Si inspeccionáis el HTML, veréis un montón de <div> y clases extrañas, pero ni rastro de vuestros componentes App, Header o UserList.
Para trabajar profesionalmente necesitamos visión de rayos X. Necesitamos las React Developer Tools.
Instalación
Las React Developer Tools (o “DevTools” para los amigos) son una extensión oficial mantenida por el equipo de Meta (Facebook). Está disponible para los principales navegadores.
Si estáis usando un navegador basado en Chromium (Chrome, Edge, Brave) o Firefox, la instalación es trivial desde sus respectivas tiendas de extensiones.
Una vez instalada, veréis que el icono de React aparece en la barra de extensiones. Si entráis en una web hecha con React (como Airbnb, Netflix o la que acabamos de crear con Vite), el icono se iluminará.
Lo interesante ocurre al abrir las Herramientas de Desarrollador (F12 o Ctrl+Shift+I). Veréis que han aparecido dos nuevas pestañas: Components y Profiler.
La pestaña Components
Esta es la pestaña donde pasaremos el 90% del tiempo. Mientras que la pestaña “Elements” del navegador nos muestra el DOM real (el resultado final HTML), la pestaña Components nos muestra el árbol de componentes de React.
Aquí veremos nuestros componentes tal y como los hemos escrito en nuestro código: <App>, <Button>, <Card>, etc.
Inspeccionando Props y Estado
Si seleccionáis un componente en el árbol de la izquierda, a la derecha se abrirá un panel de detalles que es oro puro. Aquí podemos ver:
- Props: Los datos que el componente está recibiendo de su padre.
- Hooks: Aquí veremos el estado interno (
State), referencias, efectos, etc. - Rendered by: Quién es el componente padre que ha renderizado a este.
Es muy útil para responder preguntas como: ¿Por qué no se muestra el mensaje de error? Ah, porque el estado isError sigue en false.
Lo mejor de este panel es que es interactivo. Podéis modificar el valor de un prop o de un estado (State) en tiempo real escribiendo sobre él, y veréis cómo la aplicación reacciona instantáneamente sin recargar la página.
Navegación rápida
Arriba a la izquierda del panel Components tenéis un icono de un cursor/flecha (similar al del inspector de elementos).
Si lo activáis y hacéis clic en cualquier elemento de vuestra página web, las DevTools os llevarán automáticamente al componente de React que ha generado ese trozo de interfaz.
La pestaña Profiler
Solo la mencionaremos brevemente, ya que cobra sentido en aplicaciones más grandes.
El Profiler sirve para medir el rendimiento. Nos permite grabar una sesión de uso y ver exactamente cuánto tarda cada componente en renderizarse y, lo más importante, por qué se ha renderizado.
Es la herramienta que usaremos en el futuro para detectar “cuellos de botella” cuando notemos que nuestra aplicación va lenta.
Configuraciones útiles
Si hacéis clic en el engranaje ⚙️ dentro de la pestaña Components, podéis configurar el comportamiento. Hay una opción que recomiendo activar cuando estéis aprendiendo el ciclo de vida:
- “Highlight updates when components render”: Al activar esto, cada vez que un componente se renderice, React dibujará un recuadro de color alrededor de él en la pantalla.
Es muy visual y os ayudará a entender cuándo y con qué frecuencia se están actualizando vuestras vistas.
