It’s #FrontendFriday – HTTP-Antworten in Google Chrome überschreiben
Der Freitag ist zurück und mit ihm eine neue Ausgabe #FrontendFriday. Verwendest du Google Chrome für die Entwicklung deiner Webanwendung? Dann könnte dieser #FrontendFriday einen nützlichen Tipp für dich bereithalten.
Bei der Entwicklung einer stabilen Webanwendung ist es entscheidend, nicht nur den „Happy Path“ zu berücksichtigen, sondern auch unerwartete Probleme abzufangen und angemessen zu verarbeiten. Dies kann beispielsweise durch das Anzeigen von Fehlermeldungen für den Benutzer geschehen oder durch eine unterschiedliche Reaktion des Frontends je nach Antwort aus dem Backend. Zum Beispiel soll anstelle einer Tabelle ein Text angezeigt werden, wenn keine Daten vorhanden sind. Das Testen solcher Szenarien erfordert normalerweise das Anpassen der Datenbank oder das entsprechende Mocken des Codes. Dies ist jedoch nur möglich, solange man Zugriff darauf hat. Die Google Chrome DevTools bieten jedoch eine alternative Lösung, die keines dieser Vorgehensweisen erfordert.
Für diesen Zweck erstelle ich eine kurze Schritt-für-Schritt-Anleitung, wie ein JSON in einer HTTP-Antwort in Google Chrome zu Testzwecken überschrieben werden kann:
- Mit F12 die Google Chrome Dev-Tools öffnen
- In den Netzwerk Tab wechseln
- Die Anfrage für die Antworten starten. z. B. https://jsonplaceholder.typicode.com/posts/1
- Rechtsklick auf die Antwort, die überschrieben werden soll und „Inhalt überschreiben“ auswählen
Als Nächstes öffnet sich ein Feld, in dem die Werte innerhalb des JSON geändert werden können. Zum Beispiel ändere ich hier die userId von 1 auf 101.
Diese Änderungen müssen in einer Datei auf deinem lokalen System gespeichert werden. Du kannst sie entweder mit Strg+S speichern oder indem du mit der rechten Maustaste auf den geänderten Request klickst und „Speichern unter“ wählst.
Beim ersten Durchlauf musst du einen Ordner auswählen, in dem der geänderte Response gespeichert werden soll. Anfangs muss Google Chrome auch die Berechtigung erhalten, auf den ausgewählten lokalen Ordner zugreifen zu dürfen.
Wenn du die Seite nun neu lädst, liefert die neue Anfrage immer die überschriebenen Daten als Antwort. Google Chrome markiert sie mit einem rosa Punkt, um anzuzeigen, dass diese Daten überschrieben wurden.
Neben der Überschreibung von JSON ist es auch möglich, andere Inhalte wie Bilder und sogar HTTP-Header zu überschreiben.
Google Chrome bietet dafür eine gute Dokumentation. Siehe hierzu die verlinkten Quellen:
[1] https://developer.chrome.com/blog/new-in-devtools-117?hl=de#:~:text=To%20override%20web%20content%2C%20open,action%20bar%20at%20the%20top. ^
[2] https://developer.chrome.com/docs/devtools/overrides?hl=de#:~:text=Open%20DevTools%2C%20navigate%20to%20the,store%20the%20override%20files%20in.
