javascript - para - Breakpoint depuración de variables minfied/destrozadas/compiladas

modo debug chrome

Question

Trabajando en la creación de JavaScript sourcemaps en mi flujo de trabajo y he estado buscando alguna documentación sobre una parte particular de la depuración de los mapas de origen. En la imagen de abajo estoy ejecutando código JavaScript comprimido, pero a través de la magia de los mapas fuente, el depurador Chrome pudo reconstruir el código aparentemente descomprimido para que yo depurara:

Sin embargo, si mira las variables locales, someNumber y someOtherNumber no están definidos. En cambio, tenemos a y r , que son los nombres de las variables compiladas para esta función. Esto es lo mismo para Mozilla Firefox y Chrome.

Intenté consultar la Documentación de Chrome DevTools en los mapas de origen, pero no vi nada escrito sobre esto. ¿Es una limitación actual de la depuración del mapa de origen y existen soluciones para esto?

actualización :

Desde entonces he encontrado este hilo en los problemas del proyecto de cromo. No parece que haya sido o esté siendo implementado. Esto se está convirtiendo en un problema cada vez más importante a medida que los equipos comienzan a implementar Babel en sus sistemas de compilación para escribir el código ES2015. ¿Algún equipo ha encontrado una forma de evitar esto?

Answer 1

Parece que se ha abordado y estará disponible en la próxima actualización de Chromium

Answer 2

Todavía no hay una solución para mapear nombres de variables en los mapas fuente de Javascript, pero hay una solución para Babel 6. Como hemos adoptado ES2015, los nombres de importación mutilados se convirtieron en un punto crítico durante el desarrollo. Así que creé una alternativa a la transformación del módulo CommonJS que no cambia los nombres de importación llamados babel-plugin-transform-es2015-modules-commonjs-simple .

Siempre y cuando no esté escribiendo módulos que dependan de la exportación de enlaces dinámicos, se trata de un reemplazo directo para la transformación del módulo babel commonjs por defecto:

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs-simple

y .babelrc :

"plugins": ["transform-es2015-modules-commonjs-simple"]

Esto compilará los módulos de ES2015 a CommonJS sin cambiar ninguno de los nombres de símbolos de los módulos importados. Las advertencias se describen en el archivo Léame.

Sin embargo, esto no te ayudará con la minificación / uglificación, por lo que la mejor solución parece ser simplemente no utilizar la minificación durante el desarrollo. Entonces, al menos, es solo un problema si tiene que depurar algo en un sitio web de producción.

Answer 3

Usar Watch Expressions en el lado derecho, generalmente resuelve esto. Expande el menú y usa el botón más para agregar tus variables. Puede utilizar someNumber y someOtherNumber , e incluso someNumber + someOtherNumber .