wake-up-neo.net

Mit es6 mit Chrome debuggen

Ich versuche, Ecmascript 2015 für mein Projekt zu verwenden, und es fällt mir schwer, an bestimmten Stellen Haltepunkte hinzuzufügen (Orte, an denen ich dachte, dass es logisch ist, einen Haltepunkt zu haben). 

Ich habe # enable-javascript-harmony-Flag in Chrome auf true gesetzt (wenn das hilft), aber ich verwende Babeljs zum Transpilieren und Quellcaps, um Haltepunkte in der Datei direkt festzulegen, die ich debuggen möchte. Ich bin am sichersten, dass ich etwas falsch mache, aber kann mir jemand zeigen, wo ich Fehler mache. 

Als Referenz habe ich eine GIF hinzugefügt, worüber ich spreche. 

 enter image description here

30
Ajai

Das Problem liegt beim Quellcode (über Quellkarten) beim Realcode-Mapping. Während die Quelle knapp und dicht ist, ist der generierte Code normalerweise länger und die Zuordnung zwischen den beiden wird nicht (und kann wahrscheinlich nicht auf eine Weise erfolgen), die eine 1: 1-Beziehung zwischen den beiden gewährleistet.

Wenn Sie also versuchen, einen Haltepunkt in einer einzeiligen Anweisung wie (foo) => bar zu platzieren, ist der actual ausgeführte Code mindestens ein paar Zeilen lang und ich gehe davon aus (und weiß nicht wirklich!), Dass devtools versucht, den echter Haltepunkt einfach in der ersten Zeile des laufenden Codes. - Was wiederum für Ausdrücke fehlschlägt.

Dies ist ein inhärenter Nachteil des generierten Codes und gilt für alle Compile-to-js-Sprachen mit Quellkarten. Leider ist mir keine gute Lösung bekannt. Als letzten Ausweg schalte ich in diesen Fällen nur Quellkarten im Browser aus und schritt durch den echten, generierten Code.

Hoffentlich hilft das :/

7
elektronik

Haben Sie alle Anweisungen hier befolgt?

https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps

Wenn Sie das Harmony-Flag gesetzt haben, müssen Sie keine Babeljs verwenden, um transpilierbar zu sein. Chrome wird ES6/2015 oder zumindest die unterstützte Untermenge verstehen. Deaktivieren Sie also möglicherweise Babeljs und vermeiden Sie alle Quellcaps.

5
arislan

Es scheint ein Fehler in Chrome zu sein.

Es ist auf Canary behoben: https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21

Es gibt eine große Diskussion in github, wenn das Problem dadurch nicht gelöst wird . https://github.com/webpack/webpack/issues/2145

0
Ventura

Normalerweise würde ich nur Sourcemaps beschuldigen, aber aus dem, was Sie hier zeigen, folge ich aus dem Vergleich von Debug in Chrome mit der Javascript-Debugger-Anweisung. Ich glaube, dass sie nicht so funktionieren.

Wir wissen also, dass Sie keine Debugger-Anweisung innerhalb eines Funktionsparameterbereichs platzieren können. 

Dies geschieht viel in Ihrem aufgezeichneten Beispiel. 

.then(debugger)

 enter image description here

Wenn Sie dort brechen wollen, müssen Sie mehr Code hinzufügen.

.then((whatever) => { 
 // We need an existing empty line here.
 return whatever
})

Das Deaktivieren von Quellkarten ist auch eine gute Idee, und Sie müssen nur den Code Zeile für Zeile durchgehen.

Ich stelle fest, dass Sie in der Nähe oder im Versprechen des Flusses pausieren möchten . Beachten Sie die Warnung, dass das Anhalten des asynchronen Codes in komplexen Apps zu Race-Bedingungen und zu unerwartetem Verhalten führen kann.

0
Urasquirrel