Share
Como desarrollador de JavaScript, estoy seguro de que ya has estado cayendo 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.
¿Las buenas noticias? Las últimas versiones de los navegadores pueden ayudarlo a resolver este problema utilizando mapas de origen. En este tutorial, te mostraré cómo encontrar mapas de origen en todos los navegadores y aprovechar al máximo esos minutos que tienes para depurar.
De acuerdo con el gran artículo de Introducción a JavaScript Source Maps, un mapa de origen es "una forma de asignar un archivo combinado / minimizado a un estado no compilado. Cuando creas para la producción, además de minimizar y combinar tus archivos JavaScript, generas un mapa de origen que contiene información sobre tus archivos originales.”.
Por favor, no dude en leer primero el artículo de Ryan Seddon, ya que contiene grandes detalles sobre cómo funciona un mapa de origen. Luego aprenderá que un mapa de origen usa un archivo intermedio que hace la comparación entre la versión de producción de su código y su estado de desarrollo original. El formato de este archivo se describe aquí: Mapa de origen Revisión 3 Propuesta.
Ahora para ilustrar, voy a compartir la forma en que trabajamos actualmente mientras desarrollamos nuestro marco de código abierto WebGLBabylon.js. Esta escrito en Mecanografiado. Pero los principios seguirán siendo los mismos si está usando JavaScript comprimido / minimizado u otros lenguajes como CoffeeScript..
Ahora vamos a jugar con la magia del mapa de origen directamente en los navegadores..
Recientemente, he estado implementando 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 usando los siguientes navegadores:
Vaya a esta URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html y obtendrá esta página:
Conecte un controlador de Xbox 360 o Xbox One en el puerto USB de su máquina. presione el UNA Botón 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 está generando automáticamente el mapa de origen para usted. Si desea generar un mapa de origen mientras genera su versión minified de su código, recomendaría usar UglifyJS2.
Para este artículo, incluso mezclé ambos. He minimizado el JS generado por TypeScript y mantuve la asignación de origen intacta usando esta línea de comando:
uglifyjs testgamepad.js -o testgamepad.min.js --source-map testgamepad.min.js.map --in-source-map testgamepad.js.map
Una vez que se haya cargado la página de prueba de la GamePad, presione F12 en IE11.
Verás que la fuente HTML hace referencia a dos archivos JavaScript: babylon.gamepads.js al comienzo de la página y testgamepad.min.js al final. El primer archivo proviene de nuestro marco en GitHub, y el segundo es una muestra simple que muestra cómo consumirlo..
Presione en el Depurador botón (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.
Empecemos revisando el babylon.gamepads.ts caso. ¿Por qué IE lo muestra en lugar de que la versión .js sea ejecutada por el navegador??
Esto es gracias al mecanismo de mapa de origen. Al final de babylon.gamepads.js Archivo, puedes encontrar esta línea específica:
// # sourceMappingURL = babylon.gamepads.js.map
Abierto babylon.gamepads.js.map para entender como 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 asignarse "babylon.gamepads.ts" a "babylon.gamepads.js". Es por eso que 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ás algo que quizás nunca hayas visto antes, un lenguaje TypeScript:
Puede depurarlo como está acostumbrado a depurar su código JS, incluso si se trata de la versión compilada de JavaScript que actualmente ejecuta el navegador..
Establezca un punto de interrupción en la línea 17 y presione F5 en la ventana del navegador. Podrás depurar la versión de TypeScript del constructor:
Paso a la línea 20, pase el mouse sobre esta y expandirlo para comprobar que gamepadEventSupported se establece en cierto:
Cargue la misma página: http://david.blob.core.windows.net/babylonjs/gamepad/index.html y presione F12 en cromo o Control-Shift-I en la opera.
Haga clic en el icono de configuración y asegúrese de que Habilitar mapas fuente de JavaScript La opción está habilitada. Se debe establecer por defecto:
Chrome y Opera te permiten revisar los ejecutados. babylon.gamepads.js código, 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 de la babylon.gamepads.ts Archivo de TypeScript en su lugar:
Por supuesto, también puede establecer los puntos de interrupción apropiados directamente en la fuente de TypeScript como se ve con IE11 justo antes..
prensa F5 en la ventana del navegador que aloja nuestra página de demostración, ahora podrá depurar mi código de TypeScript. Pasa a la línea 20 y pasa el mouse sobre la this.gamepadEventSupported variable. Debe mostrar cierto:
Cargue la misma página: http://david.blob.core.windows.net/babylonjs/gamepad/index.html y presione Control-Shift-S para abrir el depurador nativo (no use F12 / Firebug, porque no admite mapas de origen).
Comprobar que el Mostrar fuentes originales La opción está marcada:
Establezca un punto de interrupción como es habitual en la línea 17 y vuelva a cargar la página para ingresar el código. Firefox no admite el mouse sobre la fuente original. Avanza hasta la línea 20 y expande la esta objeto en su lugar en el panel derecho para comprobar que gamepadEventSupported se establece en true también.
Hasta ahora, hemos estado depurando solo el babylon.gamepads.js código usando el babylon.gamepads.ts fuente. Pero ¿qué hay de esto minificado? testgamepad.min.js Archivo JavaScript?
La primera solución es pretender el código. Funciona con IE11, Chrome, Opera y Firefox..
En IE11, presione el Impresión bonita botón o presione Control-Shift-P:
En Chrome / Opera, presione el botón:
En Firefox, presiona tambien el botón:
Esto es mucho mejor, pero aún así no es tan bueno como lo fue con el conjunto de mapas de origen. Para poder ir un paso más allá, agregamos una nueva función en la actualización de IE11 de agosto de 2014. Puede cargar un mapa de origen incluso si lo ha eliminado del archivo .js.
¿Imagina que le gustaría evitar que cualquiera pueda depurar fácilmente el código de producción de su aplicación web utilizando el mapa de origen, pero aún así desea poder hacerlo? Sólo quite el sourceMappingURL línea de su archivo .js.
Usando Internet Explorer 11, aún puede usar el mapa de origen cargando su local .mapa y código fuente asociado. Para eso, haga clic derecho en el testgamepad.min.js y presiona Elegir mapa de origen:
Descárguelos aquí: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.
Descomprima eso en su directorio preferido y navegue hasta él para elegir el derecho .mapa expediente:
Y ahora el código fuente original puede ser depurado nuevamente:
Observe que la pestaña ha cambiado de nombre a testgamepad.ts y que las primeras variables ya están escritas ya que estamos mostrando algunos TypeScript.
Genial no lo es?
Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
Aprender JavaScript: la guía completa
Hemos creado una guía completa para ayudarlo a aprender JavaScript, ya sea que esté comenzando a trabajar como desarrollador web o si desea explorar temas más avanzados..
Accentsconagua