Als Webentwickler verbringen wir viel Zeit damit, unseren Code in einer Bearbeitungsumgebung zu erstellen. Wir springen dann zum Browser, um die integrierten Entwicklertools zu verwenden, um die Benutzeroberfläche des Produkts zu debuggen und zu optimieren. Das Problem dabei ist, dass sich die Ergebnisse des Optimierens und Debuggens nicht im Quellcode widerspiegeln. In Microsoft Edge arbeiten wir derzeit an einigen Lösungen, die zur Diskussion stehen, und wir würden uns freuen Ihr Feedback dazu
Wenn Sie lieber ein Video ansehen, anstatt zu lesen, hier eine dreiminütige Einführung:
Das aktuelle Problem mit Optimierungen und Änderungen in den Entwicklertools
Heutzutage stellen Browser-DevTools hochentwickelte visuelle Tools bereit, die Ihnen beispielsweise CSS-Syntax beibringen, während Sie sie verwenden. Diese Tools verändern die Dinge auf visuelle Weise. Sie können beispielsweise auf das „Flexbox“-Symbol neben einer beliebigen CSS-Flexbox-Eigenschaft klicken und erhalten ein Popup mit einer Vorschau auf das Ergebnis dieser Stiländerung.
Dies ist eine hervorragende Debugging-Erfahrung und verhindert, dass Sie ständig die CSS-Syntax nachschlagen müssen Es gibt jedoch eine Unterbrechung, da der in diesen Debugging-Workflows angezeigte Code nicht dem entspricht, den Sie in Ihrem Code-Editor geschrieben haben.
Der Styles-Editor zeigt nur eine Teilansicht des aktuellen Codes an im Browser ausgewähltes Element. Sie wissen nicht, wo und wie dieser Code in den Rest Ihres CSS auf Ihrer Webseite passt. Sie können zwar scrollen, um den Rest des Codes anzuzeigen, aber wäre es nicht besser, auch das Original zu sehen CSS-Datei?
Sie können darauf zugreifen, indem Sie auf die Links zur CSS-Datei selbst klicken, wodurch Sie zum Sources Tool und weg vom Styles-Editor gelangen.
p> 
Dies ist ein Editor Eingebettet in die Browser-Entwicklertools, die bei ihrem Erscheinen raffiniert waren, aber im Vergleich zu dem, was wir heutzutage von einem Editor erwarten, nicht glänzt. Wenn Sie die Tools nicht abkoppeln und in einem eigenen Fenster verwenden, haben Sie auch nicht genügend Bildschirmfläche für eine bequeme Bearbeitung.
Egal, ob Sie die visuellen Tools verwenden, um Ihr CSS zu optimieren, oder den Quelleneditor, ein Problem bleibt: Wenn Sie viel geändert haben Dinge und Sie sind zum gewünschten Ergebnis gekommen, wie bringen Sie diese Änderungen wieder in Ihren Quellcode?
Wussten Sie, dass es ein Änderungstool gibt?
Browser Developer Tools haben Eine Funktion, die dabei hilft, heißt Änderungen, wird nicht viel genutzt und ist weitgehend unbekannt. Sie können über das Befehlsmenü oder das Kontextmenü darauf zugreifen und es zeigt Ihnen eine Diff-Ansicht aller Dateien, die Sie in dieser Sitzung geändert haben. Mit diesem Tool können Sie die Änderungen kopieren und wieder in Ihre Quelldateien einfügen.
Firefox verwendet einen etwas anderen Ansatz eines Änderungstools, das die von Ihnen vorgenommenen Änderungen live aktualisiert. Außerdem wird eine CSS-Datei erstellt, die Sie kopieren und einfügen können und die Kommentare enthält, in die erklärt wird, in welche Dateien diese Änderungen wieder eingefügt werden müssen und was entfernt oder hinzugefügt wurde.
Obwohl dies ein guter Schritt in die richtige Richtung ist, erfordert das Kopieren und Einfügen des Codes einen zusätzlichen Schritt zurück in Ihren Editor.
Ein verbesserter Workspace-Flow einschließlich Visual Studio CodeArbeitsbereiche in den Chromium-Entwicklertools gibt es schon seit langer Zeit, sie werden jedoch nicht so häufig verwendet. Aus diesem Grund wollten wir deutlicher machen, dass Sie Änderungen zwischen Browser-DevTools und einem Code-Editor live synchronisieren können. Wir haben auch festgestellt, dass der Editor im Sources-Tool nicht das ist, was die Leute verwenden möchten.
Was wäre, wenn Sie den Komfort des Editors, den Sie bereits verwenden, und die Vorteile von Live-Änderungen an Dateien von Workspaces nutzen könnten?
Ab Version 96 von Microsoft Edge finden Sie in DevTools ein neues Experiment namens „Open-Source-Dateien in Visual Studio Code“.
Sobald Sie dieses aktiviert und die Entwicklertools neu gestartet haben, navigieren Sie zu einer Datei auf Ihrer Festplatte oder einer lokalen Serveradresse wie z localhost oder 127.0.0.1 gibt Ihnen eine Eingabeaufforderung, die Sie auffordert, den Stammordner dieser Datei zu identifizieren Sie können sich auch für eine Sitzung abmelden oder diese Option nie sehen a gewinnen.
Einmal Sie wählen einen Ordner aus, und der Browser fragt Sie nach der Erlaubnis, auf diesen Ordner zugreifen zu dürfen – ähnlich wie bei der Verwendung von Arbeitsbereichen im Quellen-Tool.
Wenn Sie jetzt Änderungen im Stilbereich vornehmen, ändert sich die Datei auf der Festplatte. Der Unterschied besteht darin, dass, wenn Sie Visual Studio Code als Editor auf dem Computer haben, durch Klicken auf die Links zu den Dateien diese in diesem Editor statt in dem im Sources-Tool geöffnet werden. Sie bleiben in der gewohnten Umgebung mit all den Anpassungen und Erweiterungen, die Sie hinzugefügt haben.
Das ist großartig, da Ihre CSS-Änderungen jetzt dauerhaft sind. Das Problem ist jedoch, dass sie möglicherweise zu aufdringlich sind. Jede Änderung im Styles-Tool, wie z. B. das Ändern einer Größe um eine Einheit, führt dazu, dass sich die Datei auf Ihrer Festplatte ändert. Wenn Sie eine Live-Reload-Serverlösung oder sogar Skripte verwenden, die einen Ordner überwachen und einen Build-Prozess auslösen, kann dies schnell chaotisch werden.
CSS-Spiegelbearbeitung
In der neuesten Version des Edge DevTools for Visual Studio Code-Erweiterung haben wir eine andere Methode zum Schließen der Authoring-/Debugging-Schleife namens „CSS Mirror Editing“ eingeführt. Wenn Sie möchten, können Sie sich dieses 40-Sekunden-Einführungsvideo ansehen.
Wenn Sie diese Funktion aktivieren, wirken sich im Styles-Tool vorgenommene Änderungen auch auf den Quellcode aus, aber die Datei bleibt unverändert, bis Sie sie in Visual Studio Code speichern. Sie haben den Vorteil, dass Ihre Änderungen nicht verloren gehen und Sie behalten die volle Kontrolle über die Dateien auf der Festplatte.
Wenn Sie die Versionskontrolle verwenden, können Sie alle von Ihnen vorgenommenen Änderungen anzeigen eine Diff-Ansicht, sobald Sie die Datei gespeichert haben. Dadurch erhalten Sie den ganzen Komfort des Workspaces-Workflows mit weniger Änderungen an den Dateien.
Was sollten wir tun, um diese Erfahrung zu verbessern?
Es scheint, als hätten wir alle richtigen Komponenten eingebaut Ort, um Entwicklern und End-to-End-Authoring-und Debugging-Erfahrung zu geben. Wir würden gerne wissen, was Sie von diesen Ansätzen halten und welchen Sie bevorzugen.
Wenn Sie Feedback haben, wenden Sie sich bitte an das Edge DevTools-Team auf Twitter unter @EdgeDevTools, kommentieren Sie dieses Problem auf GitHub über CSS Mirror Editing oder verwenden Sie das in die DevTools im Browser integrierte Feedback-Tool.
– Chris Heilmann, Principal Program Manager, Microsoft Edge
