Overschrijf webinhoud en HTTP-antwoordheaders lokaal

Sofia Emelianova

Met lokale overschrijvingen kunt u HTTP-antwoordheaders en webinhoud , inclusief XHR- en ophaalverzoeken , overschrijven om externe bronnen te imiteren, zelfs als u er geen toegang toe heeft. Hierdoor kunt u prototypen maken van wijzigingen zonder te wachten tot de backend deze ondersteunt. 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.

Belangrijk punt: 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-toegangsrechten ervoor 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 Lokale overschrijvingen inschakelen uit of klikt u op respectievelijk 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.

Opmerking: U kunt aan de bron toegewezen bestanden niet overschrijven. Als u met de rechtermuisknop op een verzoek in het netwerkpaneel klikt en Inhoud overschrijven selecteert, toont DevTools u een dialoogvenster dat u naar de originele bronbestanden brengt.

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. Ververs 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 .

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.

   

   U kunt ook de Response Headers- editor inschakelen door de muisaanwijzer op een antwoordheaderwaarde te plaatsen en op te klikken.

4. Wijzig of voeg een nieuwe kop toe.

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

   

   • Om een ​​koptekstwaarde te bewerken, klikt u erop.
   • Om een ​​nieuwe koptekst toe te voegen, klikt u op Koptekst .
   • Als u een koptekstoverschrijving wilt verwijderen, klikt u op 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. 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 headers en waarden en een enkele of meerdere verzoeken om deze toe te passen.

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

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

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

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

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