punto di interruzione di debug minfied straziati variabili// compilati

Question

lavorando sulla costruzione di JavaScript sourcemaps nel mio flusso di lavoro e ho cercato per un po 'di documentazione su una particolare parte del debug mappe di origine. Nella foto qui sotto sono in esecuzione codice Javascript compressa, ma attraverso la magia della fonte mappe Chrome debugger è stato in grado di ricostruire il codice apparentemente non compresso per me per eseguire il debug:

Tuttavia, se si guarda al le variabili locali, someNumber e someOtherNumber non sono definite. Invece, abbiamo a e r, che sono i nomi delle variabili compilati per questa funzione. Questo è lo stesso sia per Mozilla Firefox che per Chrome.

ho provato guardando attraverso la Chrome DevTools Documentation su sourcemaps, ma non ho visto niente scritto su questo. È una limitazione attuale del debug di sourcemap e ci sono soluzioni alternative per questo?

aggiornamento:

allora ho trovato this thread nelle questioni progetto Chromium. Non sembra che sia stato o sia stato implementato. Questo sta diventando un problema sempre più importante poiché i team stanno iniziando a implementare Babel nei loro sistemi di compilazione per scrivere il codice ES2015. Qualche team ha trovato un modo per aggirare questo?

Answer 1

sembra che sia stato affrontato e sarà disponibile in the next Chromium update

Answer 2

Utilizzando Watch Expressions sul lato destro, in genere risolve questo problema. Espandi il menu e utilizza il pulsante più per aggiungere le tue variabili. È possibile utilizzare someNumber e someOtherNumber, e anche someNumber + someOtherNumber.

Answer 3

Non c'è ancora alcuna soluzione per mappare i nomi di variabili nelle mappe di sorgenti Javascript, ma c'è una soluzione per Babel 6. Come abbiamo adottato ES2015, i nomi di importazione alterati sono diventati un importante punto di dolore durante lo sviluppo. Così ho creato un'alternativa alla trasformazione del modulo CommonJS che non modifica i nomi di importazione denominati babel-plugin-transform-es2015-modules-commonjs-simple.

Finché non si sta scrivendo moduli che dipendono da esportare dynamic bindings si tratta di un rimpiazzo per il default babele commonjs modulo trasformano:

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

e .babelrc:

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

Questo compilerà i moduli ES2015 su CommonJS senza modificare alcuno dei nomi dei simboli dei moduli importati. Avvertenze sono descritte nel readme.

Questo non vi aiuterà con Minimizzando/uglifying, però, quindi la soluzione migliore sembra essere quella di semplicemente di non utilizzare minification durante lo sviluppo. Quindi almeno è un problema se devi eseguire il debug di qualcosa su un sito Web di produzione.