Come utilizzare i punti di rottura in sourcemaps (Chrome DevTools)

Question

Ho aggiunto alcune cose come Babel e il compilatore di chiusura al mio progetto di hobby solo per scoprire che Chrome non ha colpito i punti di interruzione nei miei file mappati.

Ecco un frammento che riproduce il problema:

function test(){console.log("Break me")}test(); 
 
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxTQUFBLElBQUEsR0FBQTtBQUNBLFlBQUEsR0FBQSxDQUFBLFVBQUE7QUFDQTs7QUFFQSIsImZpbGUiOiJtYWluLm1pbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIHRlc3QoKSB7XHJcbiAgICBjb25zb2xlLmxvZygnQnJlYWsgbWUnKTtcclxufVxyXG5cclxudGVzdCgpOyJdfQ==

Chrome raccoglie i file mappati, ma i punti di interruzione non sono colpito qui,
tipo di sconfiggere lo scopo di aggiungere sourcemaps. ..

Cosa posso fare per raggiungere i punti di interruzione sulla mia mappa?

^{versione Chrome 50.0.2661.94 m, utilizzando file di mappa esterni}

EDIT:
Sembra essere un problema con il mio Sourcemap quando sto codice di tubazioni attraverso Babel/chiusura .. .
(quindi per favore ignorare il frammento, il Sourcemap sembra corrotto)

gulpfile.js

.pipe(sourcemaps.init()) 
.pipe(concat("main.min.js")) 
.pipe(babel({ presets: ["es2015"] })) 
.pipe(closure({ compilation_level: "SIMPLE_OPTIMIZATIONS" })) 
.pipe(sourcemaps.write(".")) 

Utilizzando gulp-sourcemaps, gulp-babel, gulp-closure-compiler-service

Answer 1

non ho avuto un sacco di esperienza pratica con le mappe di origine, ma avrò una risposta andare. Sentiti libero di illuminarmi se sbaglio qui.

Penso che il problema è che i punti di interruzione che hai aggiunto nel debugger di Chrome non sono in realtà dove pensi di averli aggiunti a causa delle modifiche apportate dai compilatori al tuo codice.

Ad esempio, un caso semplice che ho visto è dove si sta eseguendo una concatenazione di stringhe in più istruzioni. Un minificatore li unirà in un'unica istruzione usando lo Comma Operator. Ciò significa che se si inserisce un punto di interruzione su una delle istruzioni, sarà passare a un'altra riga.

Nel tuo caso, è possibile che il punto di interruzione si trovi in ​​una parte completamente diversa del codice che non viene eseguita nelle condizioni in cui è attualmente in esecuzione.

Uglify sembra avere proprietà di configurazione che può aiutare nel caso dichiarazione combinato - utilizzando il seguente:

compress: { 
    sequences: false 
} 

In questo modo il compilatore dalla fusione delle più istruzioni in una sola. Non sono sicuro del tipo di ottimizzazioni di Closure e delle opzioni disponibili, ma ovviamente si tratterà di compromessi sulle ottimizzazioni delle prestazioni offerte dal compilatore.

C'è anche questo issue registrato nel tracker di problemi di Babel che potrebbe essere la causa o un fattore che contribuisce al tuo problema.

Le mappe di origine sono relativamente nuove e attualmente viene svolto un sacco di lavoro per migliorarle. In Chrome Canary, il progetto nightly build, il debugger può vedere i nomi delle variabili originali.

Non so quanto sia utile questo post, ma spero che qualcosa che ho detto sia utile a qualcuno.