Es ist nicht ungewöhnlich, dass mein Frontend-Workflow etwa so abläuft
- Arbeite an einer Sache.
- Sehe diese Sache in einem automatisch aktualisierten Browser.
- Sehe etwas Falsches an dieser Sache.
- Inspektiere und korrigiere die Sache in DevTools.
- Wenden Sie den richtigen Code in meinem Code-Editor an.
- Sehen Sie, wie sich dieser richtige Code automatisch im Browser aktualisiert.
Ich weiß, es ist nicht immer großartig. Aber ich wette mein letztes Hemd darauf, dass Sie etwas Ähnliches tun, zumindest ab und zu.
Deshalb hat mich der Titel von Chris Heilmans Beitrag angesprochen: „Was wäre, wenn… Sie Visual Studio Code als Editor für In-Browser-Entwicklertools verwenden könnten?“
Die Idee ist, dass VS Code als Editor für DevTools verwendet werden kann und wir das heute tun können, indem wir es als experimentelles Feature aktivieren, zusammen mit Microsoft Edge. Es ist also nichts, was für den breiten Einsatz bereit ist, aber Chris zeigt, wie er das Feature aktiviert, VS Code mit DevTools verbindet, DevTools Zugriff zum Schreiben von Dateien gibt und dann die Seite einer lokalen URL inspiziert.
Nun können die Änderungen, die ich in DevTools vornehme, zurück an VS Code synchronisiert werden, und ich habe direkten Zugriff, um bestimmte Dateien von DevTools aus zu öffnen und anzuzeigen, um meinen Code im Kontext zu sehen. Alle Änderungen, die ich in DevTools vornehme, werden in den VS Code-Dateien reflektiert, und alle Änderungen, die ich in VS Code vornehme, werden live im Browser aktualisiert. Genial.
Ich bin mir nicht sicher, ob dies über Edge hinaus Bestand haben wird, aber diese Art von plattformübergreifender Arbeit begeistert mich wirklich.
Yay, danke, dass du meinen Beitrag hervorgehoben hast. Wir experimentieren derzeit viel mit diesen Ideen und würden uns über mehr Feedback freuen, was wir besser machen können. Ich habe auch gerade im Microsoft Edge-Blog über andere Ideen wie das CSS-Mirroring in der VS Code-Erweiterung geschrieben.
Ich denke wirklich, es ist an der Zeit, die Erstellungs-/Debugging-Schleife zu schließen.
Wie funktioniert das im Zusammenspiel mit Sourcemaps? Funktioniert es bereits magisch? Oder gibt es noch Verbesserungspotenzial?
Da immer mehr Leute in React entwickeln und viele Dinge wie Mui makeStyles oder andere JS-CSS-Lösungen verwenden, wäre ich daran interessiert zu sehen, ob es schlau genug ist, Stiländerungen in diesen JS-Stildefinitionen vorzunehmen.
Wirklich coole Sachen, die Zukunft von VS Code ist für mich immer erstaunlich.
In den Chrome-Entwicklertools können Sie, wenn Sie ihnen Zugriff auf die Dateien auf der Festplatte geben, die Skripte den Dateien auf der Festplatte zuordnen, auch wenn Sie Webpack (mit Source Maps) verwenden. Dann können im Browser bearbeitete Dateien einfach auf der Festplatte gespeichert werden.
Ja, mit lokalen Überschreibungen in Chrome können Sie etwas Ähnliches tun. Und dann öffnen Sie sie mit VC. Alles, was Sie in den Entwicklertools ändern, wird sofort in VC angezeigt und umgekehrt.
Ja, die Chrome-Entwicklertools können, wenn Sie ihnen Zugriff auf die Dateien auf der Festplatte gewähren, die Inhalte den Dateien auf der Festplatte zuordnen, auch wenn Sie Webpack (mit Source Maps) verwenden. Dann können im Browser bearbeitete Dateien einfach auf der Festplatte gespeichert werden.
Das ist sehr cool – aber was ich irgendwie gehofft hatte, war ein VS Code-Editor-Panel, das direkt in DevTools eingebettet ist und das eingebaute Editor-Panel ersetzt.
Es ist alles nur JS und DOM, also technisch sollte das möglich sein, oder? Viele VS Code-Derivate laufen bereits im Web.
Danke fürs Teilen. Obwohl ich davon wusste, hatte ich Schwierigkeiten, es zum Laufen zu bringen, da ich mit einem Low-Code-Tool namens Node-RED arbeite.
Ich habe es jetzt aber herausgefunden. Möglicherweise müssen Sie mehrere Ordner manuell hinzufügen, damit es eine Zuordnung zwischen den Quelldateien und dem, was der Server präsentiert, erstellen kann. Ich musste ein paar tiefere Ordner manuell hinzufügen, damit es funktioniert.
Sie sagen es nicht, aber ich musste auch nicht nur die Entwicklertools neu starten, sondern auch den Tab schließen und wieder öffnen, bevor alles richtig funktionierte.
„Die Idee ist, dass VS Code als Editor für DevTools verwendet werden kann und wir das heute tun können, indem wir es als experimentelles Feature aktivieren, zusammen mit Microsoft Edge.“
Also im Grunde hat MS eine Funktion in seinen Browser integriert, die Google für sie entwickelt hat und die VSC für ein automatisches visuelles Ergebnis integriert – so ähnlich, wie Dreamweaver das schon seit der Zeit von Macromedia macht.