Überschreiben von Webseitenressourcen mit lokalen Kopien (Registerkarte "Außerkraftsetzungen")

Artikel
12/08/2023

Manchmal müssen Sie einige mögliche Korrekturen für eine Webseite ausprobieren, aber Sie haben keinen Zugriff auf die Quelldateien, oder das Ändern der Seite erfordert einen langsamen und komplexen Buildprozess. Sie können alle Arten von Problemen in DevTools debuggen und beheben. Die Änderungen bleiben jedoch nicht bestehen. Nachdem Sie die lokale Datei aktualisiert haben, ist ihre gesamte Arbeit nicht mehr vorhanden. Das Feature Außerkraftsetzungen im Tool Quellen hilft Ihnen, dieses Problem zu lösen.

Sie können jetzt eine Ressource der aktuellen Webseite verwenden und lokal speichern. Wenn Sie die Webseite aktualisieren, lädt der Browser die Ressource nicht vom Server. Stattdessen ersetzt der Browser die Serverressource durch Ihre lokale Kopie der Ressource.

Einrichten Ihres lokalen Ordners zum Speichern von Außerkraftsetzungen

Klicken Sie mit der rechten Maustaste auf eine Webseite, z https://microsoftedge.github.io/Demos/demo-to-do/. B. , und wählen Sie dann Untersuchen aus. DevTools wird geöffnet.
Wählen Sie das Tool Quellen () aus.
Klicken Sie im Bereich Navigator (links) auf die Registerkarte Außerkraftsetzungen (gruppiert mit der Registerkarte Seite ). Klicken Sie bei Bedarf auf die Schaltfläche Weitere Registerkarten (v):
Wählen Sie die Registerkarte Außerkraftsetzungen aus, und klicken Sie dann erneut auf die Schaltfläche Weitere Registerkarten , um die Registerkarten zu reduzieren:
Klicken Sie auf + Ordner auswählen für Außerkraftsetzungen:
Wählen Sie im Dialogfeld für die Dateinavigation einen Ordner auf Ihrem lokalen Computer aus, um die Ressourcendateien zu speichern, die Sie ersetzen möchten, z C:\Users\myusername\overrides. B. , und klicken Sie dann auf die Schaltfläche Ordner auswählen .

DevTools warnt Sie, dass Sie über Vollzugriff auf den Ordner verfügen müssen und dass Sie keine vertraulichen Informationen preisgeben sollten:
Klicken Sie auf die Schaltfläche Zulassen .

Auf der Registerkarte Außerkraftsetzungen wird neben Lokale Außerkraftsetzungen aktivieren ein Kontrollkästchen angezeigt. Rechts neben Lokale Außerkraftsetzungen aktivieren befindet sich ein Konfigurationssymbol löschen , mit dem Sie Ihre einstellungen für lokale Außerkraftsetzungen löschen können. Sie sind nun mit dem Einrichten Ihres Ordners fertig und können Liveressourcen durch lokale Ressourcen ersetzen:

Hinzufügen von Dateien zum Ordner "Overrides"

Fügen Sie dem Ordner Overrides als Nächstes Dateien wie folgt hinzu. In diesem Beispiel wird eine CSS-Datei hinzugefügt.

Wählen Sie das Tool Elemente aus, und klicken Sie dann auf der Registerkarte Formatvorlagen auf den Namen einer CSS-Datei, z to-do-styles.css. B. :

Das Tool Quellen wird geöffnet, wobei die ausgewählte Datei auf einer Registerkarte im Editorbereich geöffnet wird.
Klicken Sie im Editorbereich mit der rechten Maustaste auf die Registerkarte der Datei, z. B. to-do-styles.css, und wählen Sie dann Inhalt außer Kraft setzen aus:

Auf der Registerkarte der Datei wird ein Seitensymbol mit einem violetten Punkt hinzugefügt, und auf der Registerkarte Außerkraftsetzungen wird die Datei hinzugefügt:

In diesem Beispiel wird die Datei wie folgt aufgelistet: microsoftedge.github.io/Demos/demo-to-do/styles > to-do-styles.css

Die Datei wird in einem neuen Verzeichnis gespeichert, das sich in Ihrem Überschreibungsordner befindet (z. B. in C:\Users\myusername\overrides).
Überprüfen Sie in Explorer oder Finder, ob DevTools einen Unterordner erstellt hat, der mithilfe der URL der Datei (z. B. microsoftedge.github.io) benannt ist und die richtige Verzeichnisstruktur enthält, z. BC:\Users\myusername\overrides\microsoftedge.github.io\Demos\demo-to-do\styles. . Die überschreibende Datei wird in diesem Verzeichnis gespeichert.

Im Editorbereich des Quellentools wird der Registerkarte der Datei ein Seitensymbol mit einem violetten Punkt hinzugefügt. Der violette Punkt gibt an, dass es sich bei der Datei um eine lokale Datei handelt, die die vom Webserver zurückgegebene Datei überschreibt:

Ändern des Stils mithilfe der Überschreibungsdatei

Weiter oben können Sie nun die Stile der Webseite ändern, indem Sie Ihre lokale CSS-Datei überschreiben (in diesem Beispiel to-do-styles.css). Fügen Sie wie folgt einen dicken roten Rahmen um den text der gerenderten Webseite ein:

Wählen Sie in DevTools das Tool Elemente () aus, und stellen Sie dann sicher, dass die Registerkarte Formatvorlagen ausgewählt ist.
Kopieren Sie die folgende CSS-Formateigenschaft, und fügen Sie sie dann in die vorhandene body CSS-Elementregel ein, die sich in Ihrer CSS-Überschreibungsdatei befindet, z to-do-styles.css. B. :
```
border: 10px solid firebrick
```
Um den Textkörper der gerenderten Webseite wird ein dicker roter Rahmen ("Firebrick") hinzugefügt, und die geänderte CSS-Datei wird automatisch auf Ihrem Computer in Ihrem Overrides-Verzeichnis gespeichert.
Aktualisieren Sie die Webseite.

Der dicke rote Rahmen bleibt angezeigt, und ihre Arbeit geht nicht verloren, wie es beim Rendern der CSS-Datei gewesen wäre, die vom Webserver zurückgegeben wird, anstatt die lokale Überschreibungsdatei zu verwenden.

Hinzufügen von Dateien zu Außerkraftsetzungen aus anderen Registerkarten oder Tools

Wählen Sie oben das Tool Quellen () aus, und wählen Sie dann auf der linken Seite die Registerkarte Seite (gruppiert mit der Registerkarte Außerkraftsetzungen ) aus.
Erweitern Sie in der Struktur der Ressourcendateien für die Seite den Ordner formatvorlagen . Dateien, die bereits im Ordner "Außerkraftsetzungen" (über die Registerkarte "Außerkraftsetzungen ") to-do-styles.cssplatziert wurden, haben einen violetten Punkt auf dem Symbol.
Klicken Sie mit der rechten Maustaste auf eine andere Datei, z. B. (Index),index.htmlund wählen Sie dann Inhalt außer Kraft setzen aus:

Auf der Registerkarte Seite und der Registerkarte Außerkraftsetzungen im Quellentool ändert sich das Symbol der Datei in ein Seitensymbol mit einem violetten Punkt (z. B. für index.html), und die Datei wird dem Verzeichnis "Overrides" Ihres lokalen Laufwerks hinzugefügt.
Wählen Sie das Tool Netzwerk () aus, klicken Sie mit der rechten Maustaste auf eine Ressourcendatei für die Webseite, z . B.to-do.js, und wählen Sie dann Inhalt außer Kraft setzen aus:

Auf der gesamten DevTools-Benutzeroberfläche ändert sich das Symbol der Datei in ein Seitensymbol mit einem violetten Punkt (z. B. für to-do.js), und die Datei wird dem Overrides-Verzeichnis Ihres lokalen Laufwerks hinzugefügt.

Wenn Außerkraftsetzungen wirksam sind, werden Ressourcendateien verwendet, die sich auf Ihrem Computer im Ordner Overrides befinden, anstelle von Ressourcendateien, die vom Webserver zurückgegeben werden.

Bidirektionale Interaktion von Außerkraftsetzungen

Verwenden Sie den Editor, der mit dem Quellentool von DevTools oder einem beliebigen Editor bereitgestellt wird, den Sie die Dateien ändern möchten. Änderungen werden über alle Produkte hinweg synchronisiert, die auf die Dateien im Außerkraftsetzungsordner zugreifen.