Ich arbeite an einer React App und lerne die Seile. Ich habe ein SPA, in dem meine Entwicklungsumgebung in Docker läuft, und verwendet Gulp + Watchify, Browserify und Babelify, um meinen gesamten JS (X) -Code zu bündeln und als "bundle.js" zum Browser zu bekommen.Zugriff auf JavaScript-Objekte aus der Dev-Konsole nach dem Bündeln
Alles funktioniert gut, außer dass ich auf Objekte wie React und ReactDOM von meinen Chrome-Entwicklertools nicht zugreifen kann. Ich bin mir sicher, dass dies daran liegt, dass sie "versteckt" werden, weil sie gebündelt sind, aber ich bin mir nicht sicher, wie ich das beheben oder Zugang zu ihnen bekommen kann. Ich kann immer "window.ReactDOM = ReactDOM" in meinem Code, aber das scheint wie der dumme Weg zu gehen, und ich sehe voraus, dass ich mit mehr Code in der Konsole spielen möchte.
Ich bemerkte, dass ich "Debugger" zu meinem Code hinzufügen kann, und diese Objekte sind verfügbar, wenn der Code pausiert ist, aber sobald es ausgeführt wird, kann ich nicht auf die Objekte zugreifen.
Wie werden diese Objekte versteckt, und gibt es einen vernünftigen Weg, um sie außer Breakpoints zu erreichen?
Haben Sie das React dev tool add-on zu Chrome hinzugefügt? Es gibt eine Reihe von Chrome-Erweiterungen, die Sie hinzufügen sollten, um das Erforschen von React-Elementen zu erleichtern. – vol7ron
auch, wenn Sie einen Haltepunkt treffen, können Sie jede Variable im globalen Kontext für die spätere Verwendung speichern –
Ja, ich habe React Dev Tools hinzugefügt. Ich habe einige Tutorials durchgearbeitet, die einige Inspektionen über die Konsole durchführen, was in ihrem Fall funktioniert, da sie nicht gebündelt werden. Sie verwenden nur Skript-Tags, um alles hinzuzufügen. –