Esegui l'override dei contenuti web e delle intestazioni delle risposte HTTP localmente

Sofia Emelianova

Con gli override locali, puoi sbloccare il flusso di lavoro prototipando e testando modifiche e correzioni senza attendere che il backend, terze parti o API le supportino.

Utilizza gli override locali per simulare le risorse remote anche se non hai accesso. Puoi simulare le risposte alle richieste e a vari file, ad esempio intestazioni delle risposte HTTP e contenuti web, incluse le richieste XHR e fetch.

Ad esempio, gli override locali possono essere utili nei seguenti casi d'uso:

• Simula l'API e testa le correzioni dell'API prima che vengano effettivamente implementate in produzione.
• Prototipa nuovi design della UI se conosci già le strutture dei dati che utilizzerà il backend.
• Testa le correzioni delle prestazioni, ad esempio elimina CLS, per assicurarti in anticipo che siano significative.

Nota: guarda il video qui sopra per scoprire di più sui casi d'uso.

Gli override locali ti consentono anche di mantenere le modifiche apportate in DevTools durante i caricamenti di pagina.

Come funziona

• Quando apporti modifiche in DevTools, viene salvata una copia del file modificato in una cartella specificata.
• Quando ricarichi la pagina, DevTools pubblica il file locale modificato anziché la risorsa di rete.

Nota: gli override locali disattivano automaticamente la cache.

Puoi anche salvare le modifiche direttamente nei file di origine. Consulta Modificare e salvare i file con gli spazi di lavoro.

Limitazioni

Gli override locali funzionano per le intestazioni di risposta di rete e per la maggior parte dei tipi di file, incluse le richieste XHR e fetch, con un paio di eccezioni:

• La cache è disattivata quando sono attivati gli override locali.
• DevTools non salva le modifiche apportate all'albero DOM del riquadro Elementi.
• Se modifichi il CSS nel riquadro Stili e l'origine del CSS è un file HTML, DevTools non salverà la modifica.

In alternativa, puoi modificare i file HTML nel riquadro Origini.

Configurare gli override locali

Puoi eseguire l'override dei contenuti web o delle intestazioni della risposta immediatamente nel riquadro Rete:

1. Apri DevTools, vai al pannello Rete, fai clic con il tasto destro del mouse su una richiesta che vuoi ignorare, scegli Ignora intestazioni o Ignora contenuti dal menu a discesa.
2. Se non hai ancora configurato gli override locali, nella barra delle azioni in alto, DevTools ti chiede di:
   1. Seleziona una cartella in cui archiviare i file di override.
   2. Fai clic su Consenti per concedere i diritti di accesso a DevTools.
3. Se hai configurato gli override locali ma li hai disattivati, DevTools li attiva automaticamente.

4. Una volta configurate e attivate le sostituzioni locali, a seconda di ciò che stai per sostituire, DevTools ti indirizza a:

   • Il riquadro Origini per apportare modifiche ai contenuti web.
   • L'editor in Rete > Intestazioni > Intestazioni risposta per apportare modifiche alle intestazioni risposta.

Per disattivare temporaneamente gli override locali o eliminare tutti i file di override, vai a Origini > Override e deseleziona la casella di controllo Attiva override locali o fai clic su Cancella.

Per eliminare un singolo file di override o tutti gli override in una cartella, fai clic con il tasto destro del mouse sul file o sulla cartella in Origini > Override, seleziona Elimina, quindi fai clic su Ok nella finestra di dialogo. Questa azione non può essere annullata e dovrai ricreare manualmente gli override eliminati.

Per visualizzare rapidamente tutti gli override, nel riquadro Rete, fai clic con il tasto destro del mouse su una richiesta e seleziona Mostra tutti gli override. DevTools ti indirizzerà a Origini > Override.

Eseguire l'override dei contenuti web

Per eseguire l'override dei contenuti web:

1. Configura gli override locali.
2. Apporta modifiche ai file e salvale in DevTools.

Nota:non puoi ignorare i file con mapping dell'origine. Se fai clic con il tasto destro del mouse su una richiesta nel riquadro Rete e selezioni Override dei contenuti, DevTools mostra una finestra di dialogo che ti indirizza ai file di origine originali.

Ad esempio, puoi modificare i file in Origini o il CSS in Elementi > Stili, a meno che il CSS non si trovi nei file HTML.

DevTools salva i file modificati, li elenca in Sources > Overrides e mostra l'icona accanto ai file sottoposti a override nei riquadri pertinenti: Elements > Styles, Network e Sources > Overrides.

Inoltre, il riquadro Rete mostra un'icona a forma di punto viola con una descrizione comando accanto alla scheda Risposta di una richiesta con contenuti web sostituiti.

Esegui l'override delle richieste XHR o di recupero per simulare le risorse remote

Con gli override locali, non hai bisogno dell'accesso al backend e non devi aspettare che supporti le tue modifiche. Crea prototipi e sperimenta al volo:

1. Configura gli override locali.
2. In Rete, filtra le richieste XHR/recupero, trova quella che ti serve, fai clic con il tasto destro del mouse e seleziona Override dei contenuti.
3. Apporta le modifiche ai dati recuperati e salva il file.
4. Aggiorna la pagina e osserva le modifiche applicate.

Per scoprire questo flusso di lavoro, guarda il video seguente:

Monitorare le modifiche locali

Puoi tenere traccia di tutte le modifiche apportate ai contenuti web in un unico posto: la scheda del riquadro Modifiche.

Inoltre, in Origini > Override, puoi fare clic con il tasto destro del mouse sul file salvato e selezionare Apri nella cartella contenitore dal menu contestuale. Si apre la cartella selezionata durante la configurazione degli override. Qui puoi modificare i file con il tuo editor di codice preferito.

Esegui l'override delle intestazioni della risposta HTTP

Nel riquadro Network, puoi sostituire le intestazioni della risposta HTTP senza accedere al server web.

Con gli override delle intestazioni di risposta, puoi prototipare localmente le correzioni per varie intestazioni, tra cui:

• Intestazioni per la condivisione delle risorse tra origini (CORS)
• Intestazioni Permissions-Policy
• Intestazioni di isolamento multiorigine

Per eseguire l'override di un'intestazione della risposta:

1. Configura le sostituzioni locali e apri la pagina di cui vuoi eseguire il debug.
2. Vai a Rete, trova una richiesta, fai clic con il tasto destro del mouse e seleziona Ignora intestazioni. DevTools ti reindirizza all'editor Intestazioni > Intestazioni della risposta.

3. Passa il mouse sopra un valore dell'intestazione della risposta e posiziona il cursore.

   

   In alternativa, per attivare l'editor Intestazioni delle risposte, passa il mouse sopra un valore dell'intestazione della risposta e fai clic su Modifica Modifica.

4. Modifica o aggiungi una nuova intestazione.

   Nota:questo esempio aggiunge l'intestazione Access-Control-Allow-Origin: * per eliminare un errore CORS.

   

   • Per modificare un valore di intestazione, fai clic.
   • Per aggiungere una nuova intestazione, fai clic su Aggiungi intestazione.
   • Per rimuovere l'override di un'intestazione, fai clic su accanto. In questo modo vengono rimossi gli header aggiunti o vengono ripristinati i valori originali.

   Il riquadro Rete evidenzia le intestazioni modificate in verde e gli override rimossi in rosso e barrati. Inoltre, la scheda Intestazioni mostra un'icona a forma di punto viola con una descrizione comando per indicare che le intestazioni sono state sostituite.

5. Aggiorna la pagina per applicare le modifiche.

Modifica tutti gli override dell'intestazione della risposta

Per modificare tutti gli override delle intestazioni in un unico posto:

1. Fai clic su .headers accanto alla sezione Intestazioni di risposta.

   

   DevTools ti reindirizza al file .headers corrispondente in Sources > Overrides.

2. Modifica il file .headers:

   

   • Per aggiungere una nuova regola di override, fai clic su Aggiungi regola di override. Una regola è un insieme di intestazioni e valori e una o più richieste a cui applicarli.

     Nota:puoi utilizzare i caratteri jolly per specificare più richieste contemporaneamente. Indica più caratteri con * e un singolo carattere con ?.

   • Per aggiungere una coppia intestazione-valore a una regola, passa il mouse sopra un'altra coppia e fai clic su .

   • Per ripristinare un valore dell'intestazione, rimuovi un'intestazione o una regola aggiunta, passa il mouse sopra e fai clic su .

3. Salva il file .headers con Comando / Controllo + S.

4. Aggiorna la pagina per applicare le modifiche.