Inspecciona, modifica, y depura React y Redux en Firefox

25 agosto, 2017 1:15 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

React, en conjunto con Redux, son uno de los frameworks para interfaces de usuario más rápidos y flexibles que existen para la web. Es fácil de escribir, de usar y excelente para equipos. De hecho, la comunidad de Mozilla utiliza React para construir gran parte de la interfaz de las herramientas de desarrollo de Firefox, y la famosa interfaz de usuario de Facebook está escrita con React. A pesar de su popularidad, aún no es fácil de depurar React desde el navegador. Las herramientas de desarrollo de React de Facebook y las herramientas de desarrollo de Redux de Zalmoxisus te dejan inspeccionar, modificar y depurar tu código desde el navegador. Y ahora están disponibles para Firefox. Estos complementos y otros como el complemento de Vue para Firefox harán la depuración de frameworks de JavaScript mas fácil. Cuando se combinan con la herramienta Debugger.html de Mozilla, permiten que todas estas herramientas transformen tu navegador en un excelente depurador de código.

React

Obtén la última versión del complemento React DevTool desde aquí. Una vez instalado, podrás examinar código de React en cualquier sitio que lo utilice. Cuando visitas un sitio construido en React, el ícono del complemento aparecerá en la derecha de la barra de direcciones de Firefox:

Notificación de uso de React en Firefox

Abre tus herramientas de desarrollo con la combinación de teclas Command-Option-i (Ctrl-Shift-i para Windows), haz click en el botón de la barra de las herramientas o haz clic derecho en la página y luego selecciona “Inspeccionar”. Verás el panel de React en conjunto con los otros paneles de las Herramientas de desarrollo. El panel principal ahora te mostrará el código de React:

Código de React

La herramienta de React funciona muy parecido como cualquier otra herramienta de desarrollo. Utiliza las teclas direccionales o las teclas h,j,k,l para navegar en el código, haz click derecho en los componentes para examinarlos en el panel de elementos, mostrar la fuente y así. Puedes expandir los elementos al hacer click en las flechas.

El panel lateral es un gran lugar para almacenar variables y ver las actualizaciones del código.

Panel lateral de React

También posee una barra genial para búsquedas.

Búsqueda en panel React

Inspecciona un elemento de React en una página utilizando el inspector por defecto, entonces cambia a la pestaña de React. Entonces el elemento estará seleccionado automáticamente en el árbol de React.

También puedes hacer clic derecho en un elemento y seleccionar “Encontrar nodo DOM” para, bueno, encontrar el nodo DOM de cualquier elemento.

Redux

React y Redux van de la mano. Redux crea un contenedor de estado predictivo para que tu librería de React pueda ejecutarse virtualmente en cualquier sistema de forma confiable. También te permite viajar en el tiempo a una versión anterior de tus estados. Las herramientas de desarrollo de Redux para Firefox te permite inspeccionar acciones de  Redux y cargas, cancelar acciones, registrar errores de las acciones y automáticamente revaluar acciones a medida que cambias el código de reducer.

Herramienta de Redux para Firefox

Las herramientas de desarrollo de Redux poseen gran documentación en inglés en su repositorio de GitHub, incluyendo argumentos, métodos, e inclusive un tutorial de como crear una tienda en Redux para depurar. ¡Chequéalos!

Con los complementos de Firefox, puedes tener un conjunto de herramientas para depurar React/Redux directamente desde el navegador. Descarga Firefox Edición para Desarrolladores y entonces puedes chequear todos los complementos disponibles en addons.mozilla.org.

The following two tabs change content below.
Colaborador de Mozilla Venezuela e Hispano en las áreas de desarrollo y medios sociales, entre otros. También soy desarrollador Web, Skateboarder, Profesor universitario, jugador de Playstation y PC, usuario Linux, Blogger, Geek, entre otros.

Compartir artículo:

Start the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa