Dieser beliebte Artikel wurde 2020 aktualisiert. Weitere Informationen zur Verbesserung Ihres Entwicklungsworkflows mit Tools finden Sie unter Developer Essentials: Tools auf SitePoint Premium.
Der typische Tag eines Webentwicklers besteht darin, HTML-Webseiten mit zugehörigem CSS und JavaScript in ihrem bevorzugten Editor zu erstellen. Der Workflow:
- Öffnen Sie die lokal gehostete Seite in einem Browser.
- Schwören.
- Öffnen Sie DevTools, um die Layout-und Funktionsprobleme zu untersuchen.,
- Optimieren Sie die HTML-Elemente, CSS-Eigenschaften und JavaScript-Code, um die Probleme zu beheben.
- Kopieren Sie diese änderungen zurück in den editor und kehren Sie zu Schritt #1.
Während Tools wie das Live-Nachladen diesen Prozess erleichtert haben, optimieren viele Entwickler weiterhin Code sowohl in DevTools als auch in ihrem Editor.
Es ist jedoch möglich, Quelldateien direkt in Chrome zu öffnen und zu bearbeiten. Alle Änderungen, die Sie vornehmen, werden im Dateisystem gespeichert und im Editor aktualisiert (vorausgesetzt, sie werden aktualisiert, wenn Dateiänderungen auftreten).,
Schritt 1: Entwicklertools starten
Öffnen Sie Chrome, laden Sie eine Seite von Ihrem lokalen Dateisystem/Server und öffnen Sie Entwicklertools über das Menü Weitere Tools oder drücken Sie je nach System F12 oder Strg / Cmd + Umschalt + I. Navigieren Sie zur Registerkarte Quellen, um den Datei-Explorer zu untersuchen:
Sie können CSS-und JavaScript-Dateien in dieser Ansicht öffnen und bearbeiten, Änderungen gehen jedoch verloren, sobald Sie die Seite aktualisieren.
Schritt 2: Ordnen Sie einen Ordner dem Arbeitsbereich zu
Klicken Sie auf die Registerkarte Dateisystem und dann auf + Ordner zum Arbeitsbereich hinzufügen., Sie werden aufgefordert, Ihren Arbeitsordner zu finden, und Chrome fordert Sie auf, zu bestätigen, dass Sie den Zugriff zulassen. Der Explorer zeigt Dateien auf Ihrem System an, die mit einem einzigen Klick geöffnet werden können:
Schritt 3: Bearbeiten und speichern Sie Ihren Code
Sie können jetzt einspringen und Ihren Code bearbeiten. Nicht gespeicherte Bearbeitungen werden auf der Registerkarte Datei mit einem Sternchen markiert.
CSS-Änderungen werden sofort aktualisiert, aber im Fall von HTML und JavaScript müssen Sie normalerweise Strg/Cmd + S drücken, um die Datei im Dateisystem zu speichern und dann den Browser zu aktualisieren.,
Beachten Sie, dass Sie auch mit der rechten Maustaste auf die Registerkarte Datei klicken und Speichern unter… auswählen können, um eine Kopie der Datei an anderer Stelle zu speichern.
Schritt 4: Änderungen überprüfen und rückgängig machen
Um Änderungen zu überprüfen, klicken Sie mit der rechten Maustaste auf eine Registerkarte Datei und wählen Lokale Änderungen… aus dem Kontextmenü:
Eine diff-ähnliche Ansicht wird angezeigt. Das Pfeilsymbol unten links im Bereich macht alle Änderungen rückgängig und setzt die Datei in ihren ursprünglichen Zustand zurück.,
Die Entwicklertools von Chrome sind niemals ein vollständiger Ersatz für Ihren bevorzugten Editor, können jedoch nützlich sein, wenn Sie schnelle Änderungen vornehmen oder von einem anderen PC aus arbeiten, auf dem Ihr Editor möglicherweise nicht installiert ist.