Es ist weniger kompliziert, als es sich anhört.
Immer wieder müssen sich Webentwickler Problemen annehmen, die von Kunden oder Webseiten-Benutzern gemeldet werden. Oft erhalten sie eine kurze Beschreibung oder sogar ein kleines Video, anhand dessen das Problem nachgestellt und anschliessend gelöst werden muss.
Dafür benötige ich oft die Local Overrides Funktion von Safari, mit welcher man Requests an eine API und auch Responses von einer API mit eigenen Werten überschreiben kann. So kann ich zum Beispiel in einer JavaScript-Datei die Response überschreiben und so eine neue Funktion oder Anpassung testen.
Wie eine Funktion in einer JS-Datei angepasst werden kann
1. In Safari die gewünschte Webseite und den Web Inspector über “Develop – Show Web Inspector” öffnen. (Um den den Tab Develop anzuzeigen muss in den Einstellungen von Safari die Checkbox “Show Develop menu in menu bar” unter Advanced aktiviert sein)
2. Als nächstes suche ich mir immer im Network Tab die gewünschte Datei, da man hier schön nach Typ und Name filtern kann.
3. Auf die JavaScript-Datei einen Rechtsklick machen und “Create Response Local Override” auswählen.
4. Automatisch wechselt Safari jetzt in den Sources Tab, wo ich unter Local Overrides meine Einträge sehen kann.
5. Rechts daneben sehe ich den Inhalt der angeklickten JavaScript-Datei und kann diese anpassen.
6. Wichtig ist jetzt, dass ich die Page nach jeder Anpassung in diesem lokalen JavaScript Override neu laden muss. Dies weil der Browser bereits die originale Datei geladen und verarbeitet hat. Beim neuen Laden der Page wird dann statt der Original JavaScript-Datei der Override vom Browser geladen und ich kann meine Anpassungen direkt testen.
Ein Override bei XHR-Requests
Sehr interessant kann ein Response Override auch bei einem XHR Request sein. Zum Beispiel habe ich eine Filter-Funktion auf einer Seite mit einer Produktliste. Beim Aktivieren eines Filter-Kriteriums müssen stets automatisch die anderen Filter-Kriterien angepasst werden, da sonst Kombinationen entstehen, bei denen keine Resultate angezeigt werden. Die Werte der Anpassung kommen auch aus der API und ich möchte diverse Kombinationen testen.
1. Ich gehe also wieder auf den Network Tab und filtere nach meinen XHR Requests, welche ich bereits über die Webseite ausgelöst habe.
2. Rechtsklick, “Create Response Local Override” und schon bin ich wieder im Sources Tab.
3. Mit einem Rechtsklick auf den Eintrag und dann einen Klick auf “Edit Local Override” kann ich die Details des Overrides sehen. Leider werden hier auch die Parameter angezeigt, welche benötigt werden, damit der Local Override mit einem Request übereinstimmt und dann die Response überschreibt. Dies bedeutet, dass ich für meinen Test immer den genau gleichen Filter Werte einstellen müsste.
4. Da mir jedoch egal ist, was für Filter ich eingestellt habe, werde ich für meinen Test die Parameter entfernen. Einfach rauslöschen geht leider nicht, da ansonsten die URL des nächsten Requests nicht mehr übereinstimmt. Safari lässt jedoch zu, dass man mit Hilfe von Regular Expressions diese ignorieren kann. Somit lösche ich alle Parameter raus und ersetze sie durch “.*”
Auch funktionieren würde etwas wie “.*m_0015\/facet.*“. Den Slash am Anfang und am Ende der URL, welche für Regex benötigt werden, fügt Safari automatisch ein.
Weitere Möglichkeiten
Auch Google Chrome bietet eine Möglichkeit, Ressourcen lokal zu speichern und zu überschreiben. Dazu muss man die Funktion zuerst in den Entwicklertools im Sources Tab unter dem Reiter Overrides aktivieren. Anschliessend kann man diese (analog Safari) im Netzwerk Tab mit einem Rechtsklick auf die Ressource speichern. Leider ist es gemäss meiner Recherche aktuell nicht möglich, im Chrome XHR Requests zu überschreiben.
Zusätzlich gibt es in den Entwicklertools von Chrome ein Tab “Overrides”. Dort können Ressourcen einer Website durch lokal abgelegte Dateien überschrieben werden. Hilfreich kann dies zum Beispiel sein, wenn ich meine angepasste JavaScript-Datei von der lokalen Entwicklungsumgebung auf dem Live-System testen möchte, ohne diese zu deployen.
Fazit
Local Overrides sind für unser Team fast täglich im Einsatz und somit sehr wichtig. Die Override-Funktion von Chrome ist sehr angenehm zu bedienen, kann jedoch durch Content Security Policy sehr leicht unbrauchbar gemacht werden. Daher ist die Browserlösung von Safari nach einer kurzen Einarbeitung sehr zuverlässig einsetzbar.
Geschrieben von:
Thomas Bieli, Frontend-Entwickler bei der raffiniert media AG
Bleib mit unserem Newsletter auf dem Laufenden
Hast du eine Idee?
Nur keine scheu! Schreib uns.