Overschrijf webinhoud en HTTP-antwoordheaders lokaal

Sofia Emelianova

Met lokale overschrijvingen kunt u uw workflow deblokkeren door wijzigingen en oplossingen te testen en te testen zonder te wachten tot de backend, derden of API's deze ondersteunen.

Gebruik lokale overschrijvingen om externe bronnen te imiteren, zelfs als u er geen toegang toe heeft. U kunt reacties op verzoeken en verschillende bestanden nabootsen, bijvoorbeeld HTTP-antwoordheaders en webinhoud , inclusief XHR en ophaalverzoeken .

Lokale overschrijvingen kunnen bijvoorbeeld helpen in de volgende gebruikssituaties:

• Mock API en test API-fixes voordat ze daadwerkelijk in productie gaan.
• Maak een prototype van nieuwe UI-ontwerpen als u al weet dat de datastructuren die de backend gaat gebruiken.
• Testprestatieverbeteringen elimineren bijvoorbeeld CLS , om er vooraf zeker van te zijn dat ze significant zijn.

Met lokale overschrijvingen kunt u ook de wijzigingen behouden die u in DevTools aanbrengt tijdens het laden van pagina's.

Hoe het werkt

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

U kunt uw wijzigingen ook rechtstreeks in bronbestanden opslaan. Zie Bestanden bewerken en opslaan met Workspaces .

Beperkingen

Lokale overschrijvingen werken voor netwerkantwoordheaders en voor de meeste bestandstypen, inclusief XHR- en ophaalverzoeken, met een paar uitzonderingen:

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

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

Lokale overschrijvingen instellen

U kunt webinhoud of antwoordheaders meteen overschrijven in het netwerkpaneel :

1. Open DevTools , navigeer naar het netwerkpaneel , klik met de rechtermuisknop op een verzoek dat u wilt overschrijven, kies Kopteksten overschrijven of Inhoud overschrijven in het vervolgkeuzemenu.
2. Als u nog geen lokale overschrijvingen heeft ingesteld, vraagt ​​DevTools u in de actiebalk bovenaan het volgende:
   1. Selecteer een map waarin u de overschrijvingsbestanden wilt opslaan.
   2. Klik op Toestaan ​​om DevTools er toegangsrechten voor te verlenen.
3. Als u 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 gaat overschrijven, naar:

   • Het Bronnenpaneel waarmee u wijzigingen in de webinhoud kunt aanbrengen.
   • De editor in Netwerk > Kopteksten > Antwoordkopteksten waarmee u wijzigingen in de antwoordkopteksten kunt aanbrengen.

Om lokale overschrijvingen tijdelijk uit te schakelen of alle overschrijvingsbestanden te verwijderen, navigeert u naar Bronnen > Overschrijvingen en schakelt u het selectievakje check_box_outline_blank Lokale overschrijvingen inschakelen uit of klikt u op respectievelijk block Wissen .

Als u een enkel overschrijvingsbestand of alle overschrijvingen in een map wilt verwijderen, klikt u met de rechtermuisknop op het bestand of de map in Bronnen > Overschrijvingen , selecteert u Verwijderen en klikt u vervolgens op OK in het dialoogvenster. Deze actie kan niet ongedaan worden gemaakt en u zult de verwijderde overschrijvingen handmatig opnieuw moeten maken.

Als u snel alle overschrijvingen wilt zien, klikt u in het netwerkpaneel met de rechtermuisknop op een verzoek en selecteert u Alle overschrijvingen weergeven . DevTools brengt u naar Bronnen > Overschrijvingen .

Webinhoud overschrijven

Webinhoud overschrijven:

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

U kunt bijvoorbeeld bestanden in Bronnen of CSS bewerken in Elementen > Stijlen , tenzij de CSS in HTML-bestanden leeft.

DevTools slaat de gewijzigde bestanden op, geeft ze weer in Bronnen > Overschrijvingen en toont u de pictogram naast de overschreven bestanden in de relevante panelen en deelvensters: Elementen > Stijlen , Netwerk en Bronnen > Overschrijvingen .

Bovendien toont het paneel Netwerk een paars stippictogram met knopinfo naast het tabblad Reactie van een verzoek met overschreven webinhoud.

Negeer XHR of haal verzoeken op om externe bronnen te imiteren

Met lokale overschrijvingen heeft u geen toegang tot de backend nodig en hoeft u niet te wachten tot deze uw wijzigingen ondersteunt. Bespot en experimenteer meteen:

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

Bekijk de volgende video om deze workflow te leren:

Volg uw lokale wijzigingen

U kunt alle wijzigingen die u in de webinhoud aanbrengt op één plek bijhouden: het tabblad Wijzigingen .

Bovendien kunt u in Bronnen > Overschrijvingen met de rechtermuisknop op het opgeslagen bestand klikken en Openen in de bevattende map selecteren in het contextmenu. Hierdoor wordt de map geopend die u hebt geselecteerd tijdens het instellen van de overschrijvingen . Daar kunt u de bestanden wijzigen met uw favoriete code-editor.

HTTP-antwoordheaders overschrijven

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

Met responsheader-overschrijvingen kunt u lokaal prototypes maken van oplossingen voor verschillende headers, inclusief maar niet beperkt tot:

• Cross-Origin Resource Sharing (CORS)-headers
• Machtigingen-beleidskoppen
• Cross-Origin-isolatieheaders

Een antwoordheader overschrijven:

1. Stel lokale overrides in en bekijk bijvoorbeeld deze demopagina .
2. Ga naar Netwerk , zoek een verzoek, klik er met de rechtermuisknop op en selecteer Kopteksten overschrijven . DevTools brengt u naar de Headers > Response Headers -editor.

3. Plaats de muisaanwijzer op de waarde van een antwoordheader en plaats daar een cursor.

   

   Als alternatief kunt u de Response Headers -editor inschakelen door de muisaanwijzer op een antwoordheaderwaarde te plaatsen en op Bewerken te klikken.

4. Wijzig of voeg een nieuwe kop toe.

   

   • Om een ​​koptekstwaarde te bewerken, klikt u erop.
   • Als u een nieuwe koptekst wilt toevoegen, klikt u op Koptekst add .
   • Als u een koptekstoverschrijving wilt verwijderen, klikt u op delete ernaast. Hiermee worden de headers verwijderd die u hebt toegevoegd of worden gewijzigde waarden teruggezet naar de oorspronkelijke waarden.

   Het Netwerkpaneel markeert gewijzigde headers in het groen en verwijderde overschrijvingen in rood en doorgestreept . Bovendien toont het tabblad Kopteksten een paars stippictogram met knopinfo om u te laten weten dat kopteksten worden overschreven.

5. refresh Vernieuw de pagina om de wijzigingen toe te passen.

Bewerk alle overschrijvingen van de antwoordheader

Om alle koptekstoverschrijvingen op één plaats te bewerken:

1. Klik .headers naast de sectie Antwoordheaders .

   

   DevTools brengt u naar het overeenkomstige .headers -bestand in Bronnen > Overschrijvingen .

2. Bewerk het .headers -bestand:

   

   • Als u een nieuwe overschrijvingsregel wilt toevoegen, klikt u op Overschrijvingsregel toevoegen . Een regel hier is een set kopteksten en waarden en een enkele of meervoudige aanvraag om deze op toe te passen.

   • Om een ​​header-waardepaar aan een regel toe te voegen, beweegt u de muis over een ander paar en klikt u op add .

   • Om een ​​koptekstwaarde terug te draaien, verwijdert u een toegevoegde koptekst of regel, beweegt u eroverheen en klikt u op delete .

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

4. refresh Vernieuw de pagina om de wijzigingen toe te passen.