React Developer Tools

React Developer Tools

Hoy veremos una herramienta muy útil cuando se está desarrollando con React, con una aplicación que se ejecuta en un navegador web, la misma está desarrollada por Facebook, y se puede instalar como una extensión desde directamente la tienda de extensiones del navegador ( Web Store para Chrome, Complementos para Firefox, etc ), el proyecto es de código abierto, y puedes contribuir a él, desde el repositorio principal de Facebook.

Aquí no nos vamos a centrar como instalar el complemento en cada uno de los navegadores, sino en las funciones disponibles y lo que nos permite hacer con nuestra aplicación, desde inspeccionar cada uno de los Componentes del DOM hasta cambiar propiedades y estados de alguno en particular.

Para empezar, la extensión detecta cuando se está usando React, en la página web, y cuando es encontrada, el plugin se encarga de notificarnos, ( el icono se ilumina ).

Sin React

Con React

Además se agrega una nueva etiqueta en nuestra herramientas de desarrollador del navegador

Ahora, si damos click la nueva etiqueta, podremos inspeccionar nuestra aplicación, como si fuera un árbol de DOM, pero reemplazando los elementos HTML por nuestros Componentes.

Aquí veremos cada Componente que han sido montados. Veremos nodos adicionales, porque hay Componentes que contienen Funciones Creadoras de Componentes, que los agregan automáticamente a nuestro árbol del DOM.

Y del lado derecho de la pantalla, se encuentra un panel, con la información del Componente ( estado, propiedades y contexto ). Que se activa, cuando seleccionamos alguno.

Desde aquí podemos inspeccionar cada dato del componente. Y además aquellos que son objectos JSON, de texto plano o booleanos, los podemos modificar, y ver como funcionaría nuestra aplicación si ese parámetro fuese pasado de forma diferente.

Además de que las variables, también podemos usarlas en la consola de nuestro navegador, e inspeccionar los parámetros que son pasados como funciones.

La herramienta es muy útil a la hora de trabajar con React, sobre todo si quieres mostrar un dato que no estás seguro qué contiene, y para el que podríamos usar debugger del navegador o un simple console.log.