Presentando debugger.html

3 enero, 2017 1:56 por

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

debugger.html es un moderno depurador de JavaScript creado por Mozilla, en forma de una aplicación web de React y Redux. Este proyecto se comenzó a realizar a principios del 2016 como un esfuerzo para remplazar el actual depurador de las Herramientas de Desarrollo de Firefox. También, quisimos hacer un depurador con capacidad para depurar varias plataformas y que funcionara como una aplicación separada.

debugger.html

Actualmente, debugger.html puede conectarse y depurar Firefox, también se puede conectar experimentalmente con Chrome y Node. El depurador se conecta con Firefox utilizando el Protocolo de Depuración Remota (RDP) de Mozilla y se comunica con Node y Chrome utilizando el RDP de Chrome.

El proyecto debugger.html se encuentra alojado en GitHub y utiliza modernos marcos de trabajo (frameworks) y herramientas (toolchains), haciéndolo valioso y atractivo para una gran audiencia de desarrolladores.

debugger.html

La interfaz de usuario está separada en 3 regiones: el panel de las fuentes (sources), el panel del editor y la barra lateral derecha.

  • El panel de fuentes muestra una vista de árbol de todas las fuentes actuales de la aplicación que se está depurando.
  • El panel de editor se usa para mostrar el contenido de varios archivos del proyecto y provee la funcionalidad para establecer puntos de ruptura (breakpoints) y hacer legible el código fuente.
  • La barra lateral derecha muestra el conjunto actual de puntos de rupturas, la pila de llamadas y el ámbito de las variables, cuando el depurador está pausado.
    • El depurador soporta controles para pausar, pasar por encima, adentrarse y salirse, ejecutar la depuración de tu código JavaScript.
    • El panel de llamadas de la pila, muestra la pila de llamadas para una condición de pausa y el panel de ámbito muestra el árbol de variables en el ámbito actual.

debugger.html en acción

Cómo empezar

Para empezar a usar el depurador, puedes chequear el código fuente en Github y leer la guía de cómo iniciar.

Si sólo deseas comenzar a usarlo, solo debes ejecutar los siguientes comandos:

npm install - Instala las dependencias
npm start - Inicia el servidor de desarrollo
open http://localhost:8000 - Abre cualquier navegador moderno

Una vez que hayas abierto el depurador en un navegador bajo el puerto 8000, se mostrará la página principal y listará cualquier objetivo que puedas seleccionar. Para que el depurador se pueda conectar a una plataforma, ésta debe estar ejecutándose con las opción de depuración remota activada. Esto generalmente requiere que reinicies la plataforma activando unas opciones especiales, por ejemplo, puedes iniciar una instancia de Firefox en Mac OS con la depuración remota activada usando el siguiente comando:

$ /Applications/Firefox.app/Contents/MacOS/firefox-bin --start-debugger-server 6080 -P development

Las opciones para Chrome y Firefox se muestran aquí.

Depurar Node requiere que tengas instalada la versión v6.3.0 o superior. Y luego ejecutar Node con la  bandera inspect activada. Por ejemplo, si deseas depurar myserver.js necesitas ejecutar el siguiente comando:

$ node --inspect myserver.js

Para mas información, lee la guía en inglés sobre cómo comenzar.

Herramientas de Desarrollo de Firefox

Estamos integrando esta herramienta en las Herramientas de Desarrollo de Firefox. La primer iteración ha llegado a la versión Nightly y ya puedes probarla.

Depurando jsfiddle

Depurando jsfiddle

Cómo colaborar

Como se mencionó anteriormente, este proyecto aún está en desarrollo y agradeceríamos tu ayuda para construir el mejor depurador posible. Si estás interesado en unirte para lograr esta meta, por favor, mira la guía en inglés de como contribuir.

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

cc-by-sa