Wie untersucht man ES6-Module im Chrom-Debugger

Question

Vor der Verwendung von Webpack, um meine Anwendung zu bündeln, habe ich Module mit IIFEs erstellt und dann auf das Objekt window angefügt, damit ich darauf zugreifen konnte. Dies machte das Debuggen im Chrome-Browser ziemlich einfach, da die Module alle global verfügbar sind und ich sie mit Haltepunkten untersuchen konnte.

Ich bin vor kurzem auf die Verwendung von Webpack um meine Anwendung zu bündeln, die großartig war. Wenn ich jetzt jedoch Haltepunkte einstelle und die importierten Module untersuchen möchte, kann ich dies nicht tun, indem ich auf den Modulnamen verweise. Ich bin mir ziemlich sicher, dass dies daran liegt, dass Webpack die Module unter der Haube in etwas anderes umbenennt.

Hier ist ein Beispiel für die Import-Anweisungen in einer bestimmten Datei (btw, jedes des importierten Module, um ein Objekt zu importieren):

Und in derselben Datei, wenn ich einen Haltepunkt festgelegt, Ich würde gerne in der Lage sein, den Inhalt der Module wie früher zu überprüfen. Im Bild unten versuche ich auf das Modul CustomHelpers zuzugreifen, das nur eine Sammlung von Hilfsfunktionen ist, die in einem Objekt gespeichert sind.

Irgendwelche Gedanken darüber, wie ich diese importierten Module beim Debuggen in der Chrome-Konsole verweisen kann?

Um zu klären, meine webpack.config.js funktioniert und ich habe sourcemaps aktiviert, weshalb ich die Original-Datei anstelle der verstümmelte bundle.js Dateien zu sehen bin. Insbesondere versuche ich nur die Module, die ich importierte, zu sehen und ihren Inhalt zu sehen.

Answer 1

in webpack.config.js:

• Set Debug-Flag auf true
• zeigen eine DevTool

wie folgt aus:

module.exports = { 
entry: "./index.js", //"./tryfirst/tree.js", // 
output: { 
    path: __dirname, 
    filename: "bundle.js" 
}, 
debug: true, 
devtool: 'cheap-module-eval-source-map', 
module: { 
    loaders: [ 
    ... 

Wenn Sie Ausgangs verwendet werden Babel von der Kommandozeile aus, können Sie die gleichen Optionen auf der Kommandozeile wie folgt einstellen:

babel src -d lib --presets es2015 --sourceMaps inline; webpack --devtool eval-source-map 

Die selbe Zeile kann zu package.json als Skript hinzugefügt werden. Genau so etwas zu dem „scripts“ Abschnitt hinzufügen:

"scripts": { 
    ..., 
    "test": "babel src -d lib --presets es2015 --sourceMaps inline; webpack --devtool eval-source-map" 
}, 

Dann können Sie es leicht von Commandline starten, ohne in Gedanken die Optionen und Fahnen alle zu halten zu haben:

npm run test 

-Code in den Skripten funktioniert genau (zum größten Teil zumindest) wie das, was Sie auf Ihrer Konsole eingeben. npm run test (oder was auch immer Sie das Skript nennen) ist die Verknüpfung, die Sie von nun an verwenden können.

Wenn es immer noch nicht an Haltepunkten stoppt, versuchen Sie den Befehl "debugger;" am gewünschten Haltepunkt in Ihrem tatsächlichen Javascript-Code. Sieht komisch aus, macht aber meistens den Trick. Chrome findet sie und setzt dort Haltepunkte für Sie.