Jak używać punktów przerwania w sourcemaps (Chrome DevTools)

Question

Dodałem trochę rzeczy, takich jak Babel i kompilator zamknięcia do mojego projektu hobby, tylko po to, aby dowiedzieć się, że Chrome nie uderza w punkty przerwania w moich zmapowanych plikach.

Oto fragment, który reprodukuje problem:

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

Chrome podnosi odwzorowanych pliki, ale wartości graniczne nie są trafić tutaj,
rodzaju pokonując w celu dodania sourcemaps. ..

Co mogę zrobić, aby trafić w pułapki na mojej mapie?

^{wersja Chrome 50.0.2661.94 m, wykorzystujące zewnętrzne pliki map}

EDIT:
Wydaje się być problem z moim sourcemap kiedy jestem kod rurociąg przez Babel/zamknięcia .. .
(więc proszę ignorować fragment The sourcemap wydaje uszkodzony)

gulpfile.js

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

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

Answer 1

ja nie miałem wiele praktycznych doświadczeń z mapami źródłowych ale będę mieć go sekretarce. Możesz mnie oświecić, jeśli popełnię błąd tutaj.

Myślę, że problem polega na tym, że punkty przerwania dodane do debuggera Chrome nie są w rzeczywistości tym, w których je dodałeś, ze względu na zmiany, jakie kompilatory wprowadziły w Twoim kodzie.

Na przykład, prosty przypadek, jaki widziałem, to miejsce, w którym wykonuje się konkatenację ciągów w wielu instrukcjach. Minifier połączy je w jedną instrukcję za pomocą Comma Operator. Oznacza to, że jeśli umieścisz punkt przerwania na jednym ze zdań, przejdzie on do innej linii.

W twoim przypadku możliwe jest, że punkt przerwania może znajdować się w zupełnie innej części kodu, która nie zostanie wykonana w warunkach, w których aktualnie go używasz.

zeszpecić wydaje się mieć config właściwość, która może pomóc w przypadku łącznego rachunku - przy użyciu następujących:

compress: { 
    sequences: false 
} 

Zatrzymuje kompilator z scalanie wielu instrukcji w jednym. Nie jestem pewien, jakie rodzaje optymalizacji daje zamknięcie i jakie masz opcje, ale oczywiście są to kompromisy dotyczące optymalizacji wydajności oferowanych przez kompilator.

Istnieje również ten issue zalogowany w trackerze problemów Babel, który może być również przyczyną lub przyczyną twojego problemu.

Mapy źródeł są stosunkowo nowe i obecnie trwają prace nad ich poprawą. W Chrome Canary, nocnym projekcie kompilacji, debugger może zobaczyć oryginalne nazwy zmiennych.

Nie wiem, jak pomocny jest ten post, ale mam nadzieję, że coś, co tu powiedziałem, przydaje się komuś.