Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Depuración de JavaScript usando mapas de fuente Cross-Browser.

Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Como un desarrollador JavaScript, estoy seguro que ya has caido en este escenario: algo va mal con la versión de producción de tu código y depurarlo directamente desde el servidor de producción es una pesadilla simplemente porque ha sido minificado o ha sido compilado desde otro lenguaje como TypeScript o CoffeeScript.

¿La buena noticia? Las últimas versiones de los navegadores pueden ayudar a resolver este problema mediante el uso de mapas de fuentes. En este tutorial te mostraré cómo encontrar mapas de fuentes en todos los navegadores y a aprovechar al máximo los pocos minutos que tienes  para depurar.

Espera, ¿qué son los mapas de fuentes?

Según el gran artículo introducción a Mapas de la Fuente en JavaScript, un mapa de la fuente es "una manera de mapear un archivo combinado/minificado para que vuelva a un estado sin construir. Cuando se genera para producción, junto con minificar y combinar tus archivos JavaScript, generas un mapa de la fuente que contiene la información sobre los archivos originales".

Por favor no dudes en leer artículo de Ryan Seddon en primer lugar, ya que va en gran detalle sobre cómo funciona un mapa de la fuente. Luego aprenderás que un mapa de la fuente utiliza un archivo intermedio que hace la correspondencia entre la versión de tu código y su estado de desarrollo inicial. El formato de este archivo se describe aquí: Revisión de Mapa de la Fuente 3 Propuestas

Para ilustrar, voy a compartir lo que estamos trabajando en el desarrollo de nuestro framework de código abierto WebGLBabylon.js. Está escrito en TypeScript Pero los principios seguirán siendo los mismos si usas JavaScript plano comprimido/minificado u otros idiomas como CoffeeScript.

Ahora vamos a jugar con la magia del mapa fuente directamente en los navegadores.

La página de Demo que vamos a usar

Recientemente, he puesto en marcha el soporte de la API de Gamepad en nuestro motor de juegos. Vamos a usar su código para este tutorial.

En este artículo, estoy utilizando los siguientes navegadores:

Ve a esta dirección URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html y obtendrás esta página:

GamePad test page

Conecta un controlador de Xbox 360 o el Xbox en el puerto USB de tu máquina. Presione el botón A para activar el pad y jugar con él:

GamePad test page Common Properties

Pero no te preocupes, no necesitarás un controlador del gamepad para seguir este tutorial.

Nota: El compilador de de TypeScript genera automáticamente el mapa fuente para ti. Si deseas generar un mapa de fuente al generar la versión minificada de nuestro código, recomiendo usar UglifyJS2.

Para este artículo, incluso mezclé ambos. He minificado el JS generado por TypeScript y he guardado intacto el mapeo de la fuente mediante esta línea de comandos:

Cómo depurar con el código fuente Original

Utilizando Internet Explorer 11

Una vez se ha cargado la página de prueba de GamePad, presiona F12 en IE11.

Verás que el código HTML hace referencia a dos archivos JavaScript: babylon.gamepads.js al principio de la página y testgamepad.min.js al final. El primer archivo viene desde nuestro framework en GitHub, y el segundo es una muestra sencilla que muestra cómo consumirla.

Pulse en el botón de depurador (o Control-3) y luego presione en el icono de carpeta.

Verás que IE11 ofrece dos archivos para depurar: babylon.gamepads.ts y testgamepad.min.js.

Debugger screen in Internet Explorer

Vamos a empezar por revisar el caso de babylon.gamepads.ts. ¿Por qué IE lo muestra en lugar de la versión de .js ejecutada por el navegador?

Esto es gracias al mecanismo del mapa fuente. Al final del archivo babylon.gamepads.js, se puede encontrar esta línea específica:

Abre babylon.gamepads.js.map para entender cómo funciona:

Al leer este archivo JSON, IE11 sabe que debe asignar "babylon.gamepads.ts" a "babylon.gamepads.js". Es por ello que lo ofrece directamente para depurar la fuente TypeScript en lugar de la versión compilada de JS.

Abre Babylon.gamepad.ts en la consola IE11 F12 y verás algo que tal vez nunca has visto antes, algo de lenguaje TypeScript:

babylongamepadts in the IE11 F12 console showing TypeScript language

Puedes depurarlo tal y como estás acostumbrado a depurar tu código JS, incluso si es la versión de JavaScript compilada actualmente ejecutada por el navegador.

Establecer un punto de interrupción en la línea 17 y presiona F5 en la ventana del navegador. Podrás ser capaz de depurar la versión de TypeScript del constructor:

Line 17 highlighted in the debugger

Pasa hasta la línea 20, pasa el ratón sobre this y expándelo para verificar que gamepadEventSupported está establecido en true:

Step up to line 20 mouse over this and expand it to check that gamepadEventSupported is set to true

Usando Chrome/Opera

Carga la misma página: http://david.blob.core.windows.net/babylonjs/gamepad/index.html y pulsa F12 en Chrome o Control-Shift-I en la ópera.

Chrome Developer Tools page

Haz clic en el icono de configuración y asegúrate de que está habilitada la opción de mapas de fuente de JavaScript.Debería estar establecida por defecto:

Enable JavaScript source maps option checked

Chrome y Opera te permiten revisar el código de babylon.gamepads.js ejecutado, pero si intentas establecer un punto de interrupción en la versión de JavaScript, no se mostrará. Pondrá en su lugar en el código asignado a esta versión: babylon.gamepads.ts.

Por ejemplo, trata de establecer un punto de interrupción en la línea 18 del archivo JavaScript babylon.gamepads.js y verás que se establecerá en la línea 17 del archivo de inicio de babylon.gamepads.ts en su lugar:

line 17 of the babylongamepadsts TypeScript file

 Por supuesto, también puedes establecer los puntos de interrupción correspondientes directamente en la fuente de TypeScript como  antes en IE11.

Presiona F5 en el navegador de nuestra página de demo y podrás ahora depurar mi código TypeScript. Pasa a la línea 20 y pasa el ratón sobre la variable this.gamepadEventSupported. Debe mostrar true:

thisgamepadEventSupported variable displaying true

Usando Firefox

Carga la misma página: http://david.blob.core.windows.net/babylonjs/gamepad/index.html y pulsa Control-Shift-S para abrir el depurador nativo (no usar F12/Firebug, porque no soporta mapas de fuente).

Comprueba que está marcada la opción Mostrar fuentes originales:

Show Original Sources option checked

Establece un punto de interrupción como de costumbre en la línea 17 y vuelve a cargar la página para romper en el código. Firefox no soporta el mouse hover de la fuente original. Pasa hasta la línea 20 y amplía el objeto this en su lugar en el panel derecho para ver que gamepadEventSupported se establece en true también.

Line 20

¿Qué pasa con el archivo de JavaScript minificado?

Hasta ahora, hemos estado depurando sólo el código de babylon.gamepads.js usando la fuente de babylon.gamepads.ts. Pero ¿qué pasa con este archivo minificado testgamepad.min.js?

La primera solución es embellecer el código. Trabaja con IE11, Chrome, Opera y Firefox.

En IE11, presiona el botón Pretty Print o pulsa Control-Shift-P:

Pretty print button in IE11

En Chrome/Opera, pulsa el botón {}:

In ChromeOpera press the button

En Firefox, pulsa también el botón {}:

In Firefox press the button

Esto es mucho mejor, pero todavía no tan bueno como lo fue con el mapa de la fuente. Para poder dar un paso más, hemos añadido una nueva característica en la actualización de agosto de 2014 de IE11. Puedes cargar un mapa de la fuente aun cuando lo hayas extraído el archivo .js.

Imagina que te gustaría prevenir que cualquiera pueda depurar fácilmente el código de tu aplicación web usando el mapa de la fuente, pero aún tu pudieras hacerlo. Para ello sólo retire la línea de sourceMappingURL del archivo .js.

Usando Internet Explorer 11, todavía puedes utilizar el mapa fuente cargando tu local .map y código fuente asociado. Para ello, haz clic derecho en el tab de testgamepad.min.js y pulsa elegir mapa de fuente:

right-click on the testgamepadminjs tab and press Choose source map

Descárgarlos desde aquí: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.

Descomprímelo en el directorio de tu preferencia y ve a él para seleccionar el archivo .map correcto:

Open map file dialog box

Y ahora se puede depurar el código fuente original otra vez:

F12 debugger screen in IE

Observa que la ficha ha sido renombrada a testgamepad.ts y que las primeras variables están escritas como estuviéramos viendo algo de TypeScript.

Cool, ¿no?

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Nos complace compartir contigo Edge Microsoft y el nuevo motor de procesamiento de EdgeHTML. Consigue las máquinas virtuales gratis o de prueba remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.