Mejore su vida de depuración de JavaScript con mapas de origen entre navegadores

Mejore su vida de depuración de JavaScript con mapas de origen entre navegadores

Como desarrollador de JavaScript, estoy seguro de que ya ha estado cayendo en este escenario: algo sale mal con la versión de producción de su código, y depurarlo directamente desde el servidor de producción es una pesadilla simplemente porque se ha minimizado o se ha compilado de otro lenguaje como Mecanografiado o CoffeeScript.

¿Las buenas noticias? Las últimas versiones de los navegadores pueden ayudarlo a resolver este problema utilizando el mapa de origen. En este tutorial, le mostraré cómo encontrar mapas de origen en todos los navegadores y aprovechar al máximo esos pocos minutos que tiene para depurar.

Espera, ¿qué son los mapas de origen?

Según el gran Introducción a los mapas fuente de JavaScript artículo, el mapa fuente es “una forma de mapear un archivo combinado/minificado de nuevo a un estado no construido. Cuando construyes para producción, además de minimizar y combinar tus archivos JavaScript, generas un mapa fuente que contiene información sobre tus archivos originales.”. Por favor, no dude en leer ryan seddonEl artículo de primero, ya que explica con gran detalle cómo funciona el mapa de origen. Luego, aprenderá que el mapa fuente usa un archivo intermedio que hace coincidir la versión de producción de su código con su estado de desarrollo original. El formato de este archivo se describe aquí: Propuesta de revisión 3 del mapa fuente

Ahora, para ilustrar, voy a compartir la forma en que estamos trabajando actualmente mientras desarrollamos nuestro marco de código abierto WebGL Babylon.js: http://www.babylonjs.com/. esta escrito en Mecanografiado. Pero los principios seguirán siendo los mismos si usa JavaScript simple comprimido/minificado u otros lenguajes como CoffeeScript. Ahora juguemos con la magia del mapa fuente directamente en los navegadores.

La página de demostración que vamos a utilizar

Recientemente, he estado implementando el soporte de la Gamepad API en nuestro motor de juegos. Usemos su código para este tutorial. En este artículo, estoy usando los siguientes navegadores:

  • explorador de Internet 11, actualización de agosto (versión 11.0.9600.17239) o mejor aún, la versión del canal del desarrollador: devchannel.modern.es compatible con la API de Gamepad. Una nota al margen sobre IE: Microsoft está trabajando en un nuevo navegador Borde de Microsoft así que asegúrese de verificar el soporte de los últimos estándares web: http://dev.modern.ie/plataforma/status.
  • Cromo 38 canales de desarrollador (versión 38.0.2125.8 dev-m)
  • Ópera 23
  • Firefox 31 o Firefox 34 todas las noches

Navegar a esta URL y obtendrás esta página:

Conecte un controlador Xbox 360 o Xbox One en el puerto USB de su máquina. Presiona el botón A para activar el gamepad y jugar con él:

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

Nota: El compilador de TypeScript genera automáticamente el mapa de origen para usted. Si desea generar un mapa fuente mientras genera su versión minimizada de su código, le recomendaría usar Uglify JS 2: https://github.com/mishoo/UglifyJS2

Para este artículo, incluso mezclé ambos. Minimicé el JS generado por TypeScript y mantuve intacto el mapeo de origen usando esta línea de comando: uglifyjs testgamepad.js -o testgamepad.min.js –source-map testgamepad.min.js.map –in-source-map testgamepad.js.mapa

Cómo depurar con el código fuente original

Uso de Internet Explorer 11

Una vez que se haya cargado la página de prueba del gamepad, presione F12 en IE11. Verá que la fuente HTML hace referencia a 2 archivos JavaScript: «babylon.gamepads.js” al principio de la página & “testgamepad.min.js» al final. El primer archivo proviene de nuestro marco en Github y el segundo una muestra sencilla de cómo consumirlo. Presiona el botón “Depurador” (o CTRL+3), luego presiona el ícono de la carpeta. Verás que IE11 ofrece 2 archivos para depurar: “babylon.gamepads.ts” & “testgamepad.min.js”.

Comencemos revisando el “babylon.gamepads.ts» caso. ¿Por qué IE lo muestra en lugar de que el navegador ejecute la versión .js? Esto es gracias al mecanismo del mapa fuente. Al final de «babylon.gamepads.js”, puede encontrar esta línea específica:

  //# sourceMappingURL=babylon.gamepads.js.map

Abierto «babylon.gamepads.js.mapa” para entender cómo funciona:

  { "version": 3,
  "file": "babylon.gamepads.js",
  "sourceRoot": "",
  "sources": [ "babylon.gamepads.ts" ], 
"names": [ "BABYLON", "BABYLON.Gamepads", ... ] }

Al leer este archivo JSON, IE11 sabe que debe asignar «babylon.gamepads.t» para «babylon.gamepads.js”. Por eso, le ofrece directamente depurar la fuente de TypeScript en lugar de la versión compilada de JS. Abierto «babylon.gamepad.ts” en la consola IE11 F12 y verá algo que tal vez nunca antes había visto, algún lenguaje TypeScript:

Puede depurarlo como está acostumbrado a depurar su código JS. Incluso si es la versión compilada de JavaScript que está ejecutando actualmente el navegador. Establecer un punto de interrupción en la línea 17 y presione F5 en la ventana del navegador. Podrá depurar la versión TypeScript del constructor:

Avance hasta la línea 20, coloque el mouse sobre «este” y expandirlo para comprobar que “gamepadEventCompatible” se establece en verdadero:

Uso de Chrome/Opera

Cargue la misma página: http://david.blob.core.windows.net/babylonjs/gamepad/index.html y presiona F12 en cromo o CTRL+MAYÚS+I en la ópera

Haga clic en el icono de configuración y asegúrese de que el “Habilitar mapas fuente de JavaScriptLa opción ” está habilitada. Debe estar configurado por defecto:

Chrome/Opera le permite revisar el ejecutado «babylon.gamepads.js” pero si intenta establecer un punto de interrupción en la versión de JavaScript, no lo mostrará. En su lugar, lo establecerá en el código fuente asignado a esta versión: “babylon.gamepads.ts”. Por ejemplo, intente establecer un punto de interrupción en la línea 18 del «babylon.gamepads.js” archivo JavaScript y verá que se establecerá en la línea 17 del “babylon.gamepads.ts” archivo TypeScript en su lugar:

Por supuesto, también puede establecer los puntos de interrupción apropiados directamente en la fuente de TypeScript como se vio con IE11 justo antes. Presione F5 en la ventana del navegador que aloja nuestra página de demostración y ahora podrá depurar mi código TypeScript. Avance hasta la línea 20 y coloque el mouse sobre el «este.gamepadEventSoportado» variable. Debería mostrar verdadero:

usando firefox

Cargue la misma página: http://david.blob.core.windows.net/babylonjs/gamepad/index.html y presiona CTRL+MAYÚS+S para abrir el depurador nativo (no use F12/Firebug, no es compatible con el mapa de origen). Compruebe que el “Mostrar fuentes originalesLa opción ” está marcada:

Establezca un punto de interrupción como de costumbre en la línea 17 y vuelva a cargar la página para acceder al código. Firefox no admite el desplazamiento del mouse sobre la fuente original. Avance hasta la línea 20 y expanda el “este” objeto en su lugar en el panel derecho para comprobar que “gamepadEventCompatible” también se establece en verdadero.

¿Qué pasa con el archivo JavaScript minimizado?

Hasta ahora, hemos estado depurando solo el «babylon.gamepads.js” código usando el “babylon.gamepads.ts» fuente. Pero que pasa con este minificado”testgamepad.min.js¿Archivo JavaScript? La primera solución es embellecer el código. Funciona con IE11/Chrome/Opera y Firefox. En IE11presione el botón «Impresión bonita» o presione CTRL+MAYÚS+P:

En cromo/óperapresiona el botón:

En Firefoxpresione también el botón “{}”:

Esto es mucho mejor, pero aún no tan bueno como lo era con el conjunto de mapas de origen. Para poder ir un paso más allá, acabamos de añadir una nueva función en la Actualización de agosto de IE11. Puede cargar un mapa de origen incluso si lo ha eliminado del archivo .js. Imagínese que le gustaría evitar que alguien pueda depurar fácilmente el código de producción de su aplicación web usando el mapa fuente, pero aún desea poder hacerlo. Simplemente elimine la línea sourceMappingURL de su archivo .js. Con Internet Explorer 11, aún puede usar el mapa de origen cargando su .map local y el código fuente asociado. Para eso, haga clic derecho en el «testgamepad.min.jspestaña ” y presione “Elija el mapa de origen”:

Descárgalos aquí

Descomprímalo en su directorio preferido y navegue hasta él para elegir el correcto .mapa expediente:

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

Observe que la pestaña ha sido renombrada a “testgamepad.ts” y que las primeras variables ahora están escritas mientras mostramos algo de TypeScript. Genial, ¿no?

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

(dpe)

#Mejore #vida #depuración #JavaScript #con #mapas #origen #entre #navegadores

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *