Asignar código preprocesado a código fuente

Mantenga el código de cliente legible y depurable incluso después de combinarlo, minifylo o compilarlo. Use mapas de origen para asignar el código fuente al código compilado.

Resumen

  • Use mapas de origen para asignar código de minified al código fuente. Después, podrá leer y depurar el código compilado en el origen original.
  • Usa previamente procesadores que puedan generar mapas de origen.
  • Compruebe que el servidor web puede atender mapas de origen.

Introducción a los preprocesadores

En este artículo se explica cómo interactuar con mapas de origen de JavaScript en el panel de orígenes de DevTools.

Usar un preprocesador admitido

Debe usar un minifier que sea capaz de crear mapas de origen. Para ver una vista extendida, vaya a mapas de origen: idiomas, herramientas y otra página wiki de información.

Los siguientes tipos de preprocesadores se suelen usar en combinación con mapas de origen:

Mapas de origen en el panel de orígenes de DevTools

Los mapas de origen de los preprocesadores hacen que DevTools cargue los archivos originales además de sus minified. A continuación, puede usar los originales para establecer puntos de interrupción y recorrer el código. Mientras tanto, Microsoft Edge ejecuta el código de minified. Esto le ofrece la ilusión de ejecutar un sitio de desarrollo en producción.

Al ejecutar mapas de origen en DevTools, debes tener en cuenta que el código JavaScript no está compilado y que puedes ver todos los archivos JavaScript individuales a los que hace referencia. Este es el uso de la asignación de origen, pero, en realidad, ejecuta el código compilado en segundo plano. Los errores, registros y puntos de interrupción se asignan al código de desarrollo para la depuración formidable. Por ello, le da la sensación de que está ejecutando un sitio de desarrollo en producción.

Habilitar mapas de origen en la configuración

Los mapas de origen están habilitados de forma predeterminada , pero si deseas volver a activarlos o habilitarlos; en primer lugar, abre DevTools, haz clic en el botón personalizar DevTools \ ( ... ) y selecciona configuración. En el panel preferencias , en fuentes, active la casilla Habilitar mapas de origen de JavaScript. También puede Activar habilitar mapas de origen CSS.

Habilitar mapas de origen

Depurar con mapas de origen

Al depurar el código y los mapas de origen habilitados, los mapas de origen se muestran en dos lugares:

  1. En la consola \ (el vínculo al origen debe ser el archivo original, no el generado )
  2. Al repasar por el código \ (los vínculos en la pila de llamadas deben abrir el archivo de origen original )

@sourceURL y displayName

Aunque no forme parte de la especificación del mapa de origen, el @sourceURL le permite hacer un desarrollo mucho más fácil cuando se trabaja con evaluaciones. Este ayudante es muy similar a la //# sourceMappingURL propiedad y se menciona realmente en las especificaciones del mapa de origen V3.

Al incluir el siguiente comentario especial en el código, que se evaluación, podrás nombrar las evaluaciones y los estilos y los scripts en línea, de modo que cada uno aparezca como más nombres lógicos en tu DevTools.

//# sourceURL=source.coffee

Vaya a la página siguiente.

Complete las siguientes acciones.

  1. Abra el DevTools y vaya al panel fuentes .
  2. Escribe un nombre de archivo en el campo nombre de tu código: entrada.
  3. Haga clic en el botón compilar .
  4. Aparece una alerta con la suma evaluada del origen de CoffeeScript.

Si expande el subpanel orígenes , ahora verá un nuevo archivo con el nombre de archivo personalizado que escribió anteriormente. Si hace doble clic para ver este archivo, contiene el JavaScript compilado para el origen original. En la última línea, sin embargo, es un // @sourceURL comentario que indica el archivo de origen original. Esto puede ayudarle a realizar la depuración mientras trabaja con abstracciones de lenguaje.

Habilitar mapas de origen

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según las condiciones descritas en la licencia internacional de Creative Commons Atribution 4,0.
La página original se encuentra aquí y está creada por Meggin Kearney \ (Tech Write ) y Paul Bakaus \ (Open Web Developer defensor, Google: Tools, performance, Animation y UX ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.