Noticias

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

El desarrollo y depuración de aplicaciones JavaScript modernas en las herramientas de desarrollador de Firefox dieron un salto cuántico hacia adelante. En colaboración con Logan Smyth, Líder Técnico para Babel, subimos de nivel el soporte a mapas de fuente para permitirte inspeccionar el código que realmente escribiste. Combinado con la iniciativa en marcha para ofrecer soporte de primera clase a frameworks JS a través de nuestras herramientas, esto aumentará la productividad para desarrolladores de aplicaciones web modernas.

Los frameworks JS y las herramientas de construcción (build) juegan un rol crítico hoy en día. Frameworks como React, Angular y Ember le permiten a los desarrolladores construir interfaces de usuario declarativas con JSX, directivas y plantillas. Herramientas como Webpack, Babel y PostCSS le permiten a los desarrolladores usar las nuevas características de JS y CSS antes que sean soportadas por los creadores de navegadores. Estas herramientas ayudan a los desarrolladores a escribir código más simple, pero generan código más complicado de depurar.

En el siguiente ejemplo, usamos Webpack y Babel para compilar Módulos ES y funciones asíncronas dentro de JS simple, que puede correr en cualquier navegador. El código original a la izquierda es muy simple. El código generado, compatible con navegadores a la derecha es mucho más complicado.

Archivo original a la izquierda, archivo generado a la derecha.

Cuando el depurador se pausa, usa los mapas de fuentes para navegar desde la línea 13 en el código generado a la línea 4 en el código original. Desafortunadamente, ya que la pausa realmente ocurre en la línea 13, eso puede hacer difícil para el usuario para descubrir cuál es el valor que dancer tiene en ese momento. Moviendo el puntero del ratón sobre la variable dancer retorna undefined y la única manera para encontrar el contexto de dancer es abrir todos los seis contextos en el panel de Contextos seguidos por expandir el objeto _emojis. Este proceso complicado y frustrante es el por qué mucha gente opta por deshabilitar los mapas de fuentes.

Valor de dancer es undefined, seis contextos separados en el panel de Contextos.

Para hacer frente a este problema, formamos un equipo con Logan Smyth para ver si era posible hacer que la interacción se sintiera más natural, como si estuvieras depurando el código original. El resultado es un nuevo motor que mapea los datos de mapas de fuentes con el árbol de sintaxis de Babel para mostrar las variables que esperas ver en la manera que quieres verlas.

El valor correcto de dancer es mostrado, el panel de Contextos muestra un contexto.

Estas mejoras fueron implementadas primero para Babel y Webpack, y actualmente estamos agregando soporte para TypeScript, Angular, Vue, Ember y muchas otras. Si tu proyecto genera fuentes de mapas hay una buena posibilidad para que esta característica funcione para ti.

Para probarlo, sólo dirígete y descarga Firefox Developer Edition. Puedes ayudarnos probando esto en tu propio proyecto y reportando cualquier error. Si quieres seguir adelante, decir hola, o contribuir, también puedes encontrarnos en los canales de devtools en GitHub, Mozilla Discourse o en el Slack de devtools.

Nuestro objetivo para el 2018 es mejorar la vida de los desarrolladores web que desarrollan aplicaciones modernas usando los últimos frameworks, herramientas y mejoras prácticas. Corregir variables es sólo el inicio ¡El futuro es brillante!