Breakpoint-Debugging minded/mangled/kompilierte Variablen

Question

Ich arbeite an der Erstellung von JavaScript-Quellkarten in meinem Workflow und habe nach einer Dokumentation zu einem bestimmten Teil der Debugging-Quellkarten gesucht. Im Bild unten I komprimierte Javascript-Code renne, aber durch die Magie der Quelle Karten Chrome Debugger konnte den scheinbar nicht komprimierten Code für mich zu debuggen rekonstruieren:

Wenn Sie jedoch den Blick auf Lokale Variablen someNumber und someOtherNumber sind nicht definiert. Stattdessen haben wir a und r, die die kompilierten Variablennamen für diese Funktion sind. Dies gilt sowohl für Mozilla Firefox als auch für Chrome.

Ich habe versucht, durch die Chrome DevTools Documentation auf Sourcemaps, aber ich habe nichts darüber geschrieben geschrieben. Ist es eine aktuelle Einschränkung für das Debugging von Quellkarten und gibt es dafür Workarounds?

Update:

Ich habe seit this thread in Chrom-Projekt Probleme gefunden. Es sieht nicht so aus, als ob es umgesetzt wurde oder wird. Dies wird ein immer wichtigeres Problem, da Teams beginnen, Babel in ihren Build-Systemen zu implementieren, um ES2015-Code zu schreiben. Haben irgendwelche Teams einen Weg gefunden?

Answer 1

Sieht aus wie es ist angesprochen worden und wird in the next Chromium update

Answer 2

Mit Watch Expressions auf der rechten Seite, normalerweise löst dies. Erweitern Sie das Menü und verwenden Sie die Plus-Schaltfläche, um Ihre Variablen hinzuzufügen. Sie können someNumber und someOtherNumber und sogar someNumber + someOtherNumber verwenden.

Answer 3

Es gibt immer noch keine Lösung für die Zuordnung von Variablennamen in Javascript-Quellkarten, aber es gibt eine Lösung für Babel 6. Da wir ES2015 übernommen haben, wurden die verfälschten Importnamen zu einem wichtigen Schwachpunkt während der Entwicklung. Also habe ich eine Alternative zur CommonJS-Modultransformation erstellt, die die Importnamen nicht ändert.

Solange Sie nicht schreiben Module, die dynamic bindings auf den Export angewiesen es ein Drop-in-Ersatz für die Standard ist babel Commonjs Transformationsmodul:

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

und .babelrc:

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

Dadurch werden ES2015-Module in CommonJS kompiliert, ohne dass die Symbolnamen der importierten Module geändert werden. Einschränkungen werden in der Readme beschrieben.

Dies wird Ihnen nicht helfen mit dem Verkleinern/Uglifying, obwohl, so die beste Lösung scheint zu sein, nicht nur Verkleinerung während der Entwicklung zu verwenden. Dann ist es zumindest ein Problem, wenn Sie etwas auf einer Produktionswebsite debuggen müssen.