Usuwanie błędów minified/mangled/compiled zmiennych

Question

Praca nad budowaniem JavaScript sourcemaps w moim workflow i szukałem dokumentacji dotyczącej konkretnej części debugowania map źródłowych. Na zdjęciu poniżej biegnę skompresowanego kodu JavaScript, ale dzięki magii źródła mapy Chrome debugger był w stanie zrekonstruować kod pozornie nieskompresowanego dla mnie do debugowania:

Jednak jeśli spojrzeć na zmienne lokalne, someNumber i someOtherNumber nie są zdefiniowane. Zamiast tego mamy a i r, które są skompilowanymi nazwami zmiennych dla tej funkcji. To samo dotyczy zarówno Mozilli Firefox, jak i Chrome.

Spróbowałem przejrzeć Chrome DevTools Documentation na sourcemaps, ale nie widziałem nic napisane na ten temat. Czy jest to bieżące ograniczenie debugowania sourcemap i czy istnieją jakieś obejścia tego problemu?

aktualizacja:

Mam ponieważ stwierdzono this thread w kwestiach projektowych chromu. To nie wygląda na to, że zostało lub jest wdrażane. Staje się to coraz ważniejszym problemem, ponieważ zespoły zaczynają wdrażać Babel w swoich systemach kompilacji, aby pisać kod ES2015. Czy jakieś zespoły znalazły sposób obejścia tego?

Answer 1

Wygląda na to, że został skierowany i staną się dostępne in the next Chromium update

Answer 2

Po prawej stronie, zwykle rozwiązuje to. Rozwiń menu i użyj przycisku plusa, aby dodać zmienne. Można użyć someNumber i someOtherNumber, a nawet someNumber + someOtherNumber.

Answer 3

Nadal nie ma rozwiązania do mapowania nazw zmiennych w źródłowych mapach JavaScript, ale istnieje rozwiązanie dla Babel 6. Po przyjęciu ES2015, zmanipulowane nazwy importu stały się głównym problemem podczas opracowywania. Dlatego stworzyłem alternatywę dla transformacji modułu CommonJS, która nie zmienia nazw importu o nazwie babel-plugin-transform-es2015-modules-commonjs-simple.

Dopóki nie jesteś pisanie modułów, które są zależne od eksportu dynamic bindings jest zastąpienie drop-in dla domyślnego babel commonjs moduł transform:

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

i .babelrc:

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

Spowoduje to kompilację modułów ES2015 do CommonJS bez zmiany nazw symboli importowanych modułów. Ostrzeżenia są opisane w pliku Readme.

To jednak nie pomoże ci w umiszczeniu/uglifowaniu, więc najlepszym rozwiązaniem wydaje się po prostu nie używać minifikacji podczas programowania. Przynajmniej jest to tylko problem, jeśli trzeba coś debugować na stronie produkcyjnej.