Overschrijf webinhoud en HTTP-antwoordheaders lokaal

Sofia Emelianova

Met lokale overrides kunt u uw workflow vlot trekken door wijzigingen en bugfixes te prototypen en te testen zonder te hoeven wachten tot de backend, externe partijen of API's deze ondersteunen.

Gebruik lokale overrides om externe bronnen te simuleren, zelfs als je er geen toegang toe hebt. Je kunt bijvoorbeeld reacties op verzoeken en verschillende bestanden simuleren, zoals HTTP-antwoordheaders en webinhoud , waaronder XHR- en fetch-verzoeken .

Lokale overschrijvingen kunnen bijvoorbeeld nuttig zijn in de volgende gevallen:

• Test API-wijzigingen en mock-implementaties voordat ze daadwerkelijk in productie worden genomen.
• Ontwerp prototypes van nieuwe UI-ontwerpen als je de datastructuren die de backend gaat gebruiken al kent.
• Test prestatieverbeteringen, bijvoorbeeld door CLS te elimineren , om er vooraf zeker van te zijn dat ze significant zijn.

Let op: bekijk de video hierboven voor meer informatie over gebruiksscenario's.

Met lokale overschrijvingen blijven de wijzigingen die je in DevTools aanbrengt behouden, ook na het laden van de pagina.

Hoe het werkt

• Wanneer je wijzigingen aanbrengt in DevTools, slaat DevTools een kopie van het gewijzigde bestand op in een map die je opgeeft.
• Wanneer je de pagina opnieuw laadt, serveert DevTools het lokaal gewijzigde bestand in plaats van de netwerkbron.

Let op: Lokale overschrijvingen schakelen de cache automatisch uit.

Je kunt je wijzigingen ook rechtstreeks in de bronbestanden opslaan. Zie Bestanden bewerken en opslaan met werkruimten .

Beperkingen

Lokale overschrijvingen werken voor netwerkresponsheaders en voor de meeste bestandstypen, inclusief XHR- en fetch-verzoeken, met een paar uitzonderingen:

• De cache is uitgeschakeld wanneer lokale overschrijvingen zijn ingeschakeld.
• DevTools slaat geen wijzigingen op die zijn aangebracht in de DOM-structuur van het Elementen -paneel.
• Als je CSS bewerkt in het deelvenster Stijlen en de bron van die CSS is een HTML-bestand, dan slaat DevTools de wijziging niet op.

In plaats daarvan kunt u HTML-bestanden bewerken in het paneel Bronnen .

Lokale overschrijvingen instellen

Je kunt webinhoud of responsheaders direct overschrijven in het netwerkpaneel :

1. Open DevTools , ga naar het paneel Netwerk , klik met de rechtermuisknop op een verzoek dat u wilt overschrijven en kies Headers overschrijven of Inhoud overschrijven in het vervolgkeuzemenu.
2. Als je nog geen lokale overschrijvingen hebt ingesteld, vraagt ​​DevTools je in de actiebalk bovenaan om het volgende te doen:
   1. Selecteer een map om de override-bestanden in op te slaan.
   2. Klik op Toestaan ​​om DevTools toegangsrechten te verlenen.
3. Als je lokale overschrijvingen hebt ingesteld maar uitgeschakeld, schakelt DevTools deze automatisch in.

4. Zodra lokale overschrijvingen zijn ingesteld en ingeschakeld, brengt DevTools u, afhankelijk van wat u wilt overschrijven, naar:

   • Het paneel 'Bronnen ' stelt u in staat om wijzigingen aan te brengen in de webinhoud .
   • De editor in Netwerk > Headers > Reactieheaders stelt u in staat om wijzigingen aan te brengen in de reactieheaders .

Om lokale overschrijvingen tijdelijk uit te schakelen of alle overschrijvingsbestanden te verwijderen, ga naar Bronnen > Overschrijvingen en schakel het Lokale overschrijvingen inschakelen uit of klik Wissen .

Om een ​​enkel override-bestand of alle overrides in een map te verwijderen, klikt u met de rechtermuisknop op het bestand of de map in Bronnen > Overrides , selecteert u Verwijderen en klikt u vervolgens op OK in het dialoogvenster. Deze actie kan niet ongedaan worden gemaakt en u moet de verwijderde overrides handmatig opnieuw aanmaken.

Om snel alle overschrijvingen te zien, klikt u in het paneel Netwerk met de rechtermuisknop op een verzoek en selecteert u Alle overschrijvingen weergeven . DevTools brengt u dan naar Bronnen > Overschrijvingen .

Webinhoud overschrijven

Om webinhoud te overschrijven:

1. Lokale overschrijvingen instellen .
2. Breng wijzigingen aan in bestanden en sla ze op in DevTools.

Let op: u kunt bronbestanden niet overschrijven. Als u in het paneel Netwerk met de rechtermuisknop op een verzoek klikt en 'Inhoud overschrijven' selecteert, toont DevTools een dialoogvenster waarmee u in plaats daarvan naar de oorspronkelijke bronbestanden wordt geleid.

Je kunt bijvoorbeeld bestanden bewerken in Bronnen of CSS in Elementen > Stijlen , tenzij de CSS zich in HTML-bestanden bevindt.

DevTools slaat de gewijzigde bestanden op, geeft ze weer in Sources > Overrides en toont ze aan u. pictogram naast de overschreven bestanden in de betreffende panelen en vensters: Elementen > Stijlen , Netwerk en Bronnen > Overrides .

Daarnaast toont het netwerkpaneel een paars stipje met een tooltip naast het tabblad 'Reactie ' van een verzoek met overschreven webinhoud.

XHR- of fetch-verzoeken overschrijven om externe resources te simuleren.

Met lokale overrides heb je geen toegang tot de backend nodig en hoef je niet te wachten tot deze je wijzigingen ondersteunt. Mock en experimenteer direct:

1. Lokale overschrijvingen instellen .
2. Filter in het netwerk op XHR/fetch -verzoeken , zoek het verzoek dat u nodig hebt, klik er met de rechtermuisknop op en selecteer 'Inhoud overschrijven' .
3. Breng de gewenste wijzigingen aan in de opgehaalde gegevens en sla het bestand op.
4. de pagina en bekijk de toegepaste wijzigingen.

Om deze workflow te leren, bekijk je de volgende video:

Houd uw lokale wijzigingen bij.

Je kunt alle wijzigingen die je aan webcontent aanbrengt op één plek bijhouden: in het tabblad 'Wijzigingen '.

Daarnaast kunt u in Bronnen > Overrides met de rechtermuisknop op het opgeslagen bestand klikken en 'Openen in map' selecteren in het contextmenu. Hiermee opent u de map die u tijdens het instellen van de overrides hebt geselecteerd. Daar kunt u de bestanden bewerken met uw favoriete code-editor.

HTTP-antwoordheaders overschrijven

Via het netwerkpaneel kunt u HTTP-antwoordheaders overschrijven zonder toegang tot de webserver.

Met response header overrides kunt u lokaal oplossingen testen voor diverse headers, waaronder maar niet beperkt tot:

• Cross-Origin Resource Sharing (CORS)-headers
• Permissions-Policy Headers
• Cross-Origin Isolatie Headers

Om een ​​antwoordheader te overschrijven:

1. Stel lokale overschrijvingen in en open de pagina die u wilt debuggen.
2. Ga naar Netwerk , zoek een verzoek, klik er met de rechtermuisknop op en selecteer Headers overschrijven . DevTools brengt je naar de editor Headers > Reactieheaders .

3. Beweeg de muis over een waarde in een responsheader en plaats de cursor daar.

   

   Als alternatief kunt u de editor voor responsheaders inschakelen door met de muis over een responsheaderwaarde te bewegen en op 'Bewerken ' te klikken.

4. Een bestaande koptekst wijzigen of een nieuwe koptekst toevoegen.

   Opmerking: In dit voorbeeld wordt de header Access-Control-Allow-Origin: * toegevoegd om een ​​CORS-fout te verhelpen.

   

   • Om een ​​koptekstwaarde te bewerken, klikt u erop.
   • Om een ​​nieuwe koptekst toe te voegen, klikt u op 'Koptekst toevoegen'
   • Om een ​​koptekstoverride te verwijderen, klikt u op ernaast. Hiermee worden de door u toegevoegde kopteksten verwijderd of worden gewijzigde waarden teruggezet naar de oorspronkelijke waarden.

   Het paneel Netwerk markeert gewijzigde headers in het groen en verwijderde overschrijvingen in het rood en doorgestreept . Daarnaast toont het tabblad Headers een paars stipje met een tooltip om aan te geven dat headers zijn overschreven.

5. de pagina om de wijzigingen toe te passen.

Bewerk alle overschrijvingen van de responsheader

Om alle header-overrides op één plek te bewerken:

1. Klik .headers naast het gedeelte 'Response Headers' .

   

   Met DevTools ga je naar het bijbehorende .headers -bestand in Bronnen > Overrides .

2. Bewerk het .headers -bestand:

   

   • Om een ​​nieuwe overschrijvingsregel toe te voegen, klikt u op 'Overschrijvingsregel toevoegen' . Een regel is hier een set headers en waarden en een of meerdere verzoeken waarop deze moeten worden toegepast.

     Opmerking: U kunt jokertekens gebruiken om meerdere verzoeken tegelijk op te geven. Geef meerdere tekens aan met * en één teken met ? .

   • Om een ​​koptekst-waardepaar aan een regel toe te voegen, beweeg je de muis over een ander paar en klik je op .

   • Om een ​​koptekstwaarde terug te zetten, een toegevoegde koptekst of een regel te verwijderen, ga je met de muis eroverheen en klik je op .

3. Sla het .headers -bestand op met Command / Control + S.

4. de pagina om de wijzigingen toe te passen.