Depurando una aplicación ReactJS con WebStorm

¡Hola de nuevo!

Escribo este artículo dado que durante todo el tiempo que llevo como desarrollador web he buscado alguna herramienta con la que pueda hacer depuración de mis aplicaciones React de una manera sencilla y sin moverme de la “comodidad de mi IDE”.

Fue entonces cuando me encontré con WebStorm, un IDE de JetBrains especializado en el ecosistema de JavaScript, el cual cuenta con poderosas herramientas que, si las sabes utilizar, te facilitarán la vida de una manera formidable.

Si bien existe la opción de depurar JavaScript utilizando Developer Tools de Chrome o Firebug para Firefox, WebStorm integra estas herramientas lo cual nos facilita el proceso de depuración. Precisamente eso es lo que abordaremos en este artículo, así que ¡manos a la obra!

Creando la aplicación

Pero ¿y qué vamos a depurar? Dado que este artículo no se centrará en cómo crear una aplicación ReactJS, haremos uso de create-react-app para obtener nuestra aplicación de prueba lo más rápido posible.

Como primer paso, en un terminal escribiremos lo siguiente:

npx create-react-app debugging-react-app

Una vez se haya creado nuestra aplicación, la iniciaremos en modo desarrollo:

cd debugging-react-app
yarn start

Cuando el servidor de desarrollo esté listo, se abrirá un navegador mostrando algo similar a esto:

Si el navegador no se abre automáticamente, abrimos uno y entramos a http://localhost:3000

Configuración de WebStorm

El siguiente paso es crear una configuración de depuración en nuestro IDE. Para esto, una vez que hayamos abierto el proyecto con WebStorm iremos a la barra de herramientas: Run — Edit configuration.

Se abrirá un modal con el listado de configuraciones de Run/Debug existentes para el proyecto:

Hacemos click en el símbolo + que está en la parte superior derecha y seleccionamos JavaScript Debug:

Aparecerá en el listado de configuraciones una nueva sección llamada JavaScript Debug con nuestra nueva configuración lista para modificarla.

Colocaremos el nombre que deseemos y en el campo URL escribiremos la dirección donde está corriendo nuestra aplicación React (http://localhost:3000)

Posteriormente, guardamos la configuración y haremos unas pequeñas modificaciones al componente App (src/App.js) — en resumen agregaremos un constructor y una variable de estado llamada date para almacenar la hora en la que el componente se inicialice — . Luego de las modificaciones, el archivo lucirá de la siguiente manera:

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      date: new Date(),
    }
  }

  render () {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo"/>
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          <h2>It is {this.state.date.toLocaleTimeString()}</h2>
        </p>
      </div>
    )
  }
}

export default App

Para el ejemplo colocaremos un punto de ruptura en la línea 21 del archivo src/App.js, exactamente donde se mostrará la hora.

Depurando la aplicación

Luego de esto iniciaremos una sesión de depuración buscándola en el listado de configuraciones que está en la parte superior derecha del IDE. Haremos click en el ícono en forma de insecto.

Esto abrirá una nueva ventana con la aplicación de prueba y se detendrá en el punto de ruptura que agregamos anteriormente.

En la parte inferior del IDE encontraremos una pestaña Debug que muestra la pila de llamadas hacia el punto de ruptura junto con las variables en el contexto del archivo que estamos depurando.

TIP: Si queremos depurar una expresión personalizada que no se encuentre en el listado de variables, hacemos click derecho en cualquier parte del archivo que estamos depurando y en el menú que se despliega seleccionamos Evaluate Expression:

Y en la ventana modal que se nos muestra escribimos la expresión que queremos evaluar, como por ejemplo:

Y listo! Ahora ya sabemos como depurar una aplicación ReactJS con WebStorm.

Para que tengas una mejor guía, el código que se ha trabajado al escribir este artículo se encuentra en el siguiente repositorio:

AlturaSoluciones/debugging-react-app

Un agradecimiento especial a Ekaterina Prigara quien es el autor de la entrada de blog en la cual se basó este artículo:

Debugging React apps created with Create React App in WebStorm

Si el artículo te gustó, por favor aplaude tantas veces como desees. Para ver historias similares acerca de tecnología, mira nuestras publicaciones. No dudes en dejarnos en la caja de comentarios cualquier inquietud o sugerencia que tengas.

Si necesitas un gran equipo que te asesore en plasmar tus ideas en React JS o React Nativo, no dudes en contactarnos. Puedes ir a nuestro sitio web y llenar el formulario y nos contactaremos contigo a la brevedad posible.

¡Que tengas un excelente día!

Miguel Torres Vivanco
Mail: miguel@alturasoluciones.com
Twitter: @perrotedonperro
LinkedIn: www.linkedin.com/in/miguetv17