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

Sofia Emelianova

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

Utilizza le sostituzioni locali per simulare le risorse remote anche se non hai accesso. Puoi simulare le risposte alle richieste e a vari file, ad esempio le intestazioni di risposta HTTP e i contenuti web, incluse le richieste XHR e di recupero.

Ad esempio, le sostituzioni locali possono essere utili nei seguenti casi d'uso:

• Simula le correzioni dell'API e testale prima che vengano effettivamente implementate in produzione.
• Prototipa nuovi progetti di UI se conosci già le strutture dati che il backend utilizzerà.
• Testa le correzioni del rendimento, ad esempio l'eliminazione del CLS, per assicurarti in anticipo che siano significative.

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

Le sostituzioni locali ti consentono inoltre di mantenere le modifiche apportate in DevTools durante i caricamenti della pagina.

Come funziona

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

Nota: le sostituzioni locali disattivano automaticamente la cache.

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

Limitazioni

Le sostituzioni 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 viene disattivata quando sono attivati gli override locali.
• DevTools non salva le modifiche apportate alla struttura DOM del riquadro Elementi.
• Se modifichi il CSS nel riquadro Stili e la relativa origine è un file HTML, DevTools non salverà la modifica.

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

Configurare le sostituzioni locali

Puoi sostituire immediatamente i contenuti web o le intestazioni di risposta nel riquadro Rete:

1. Apri DevTools, vai al riquadro Rete, fai clic con il tasto destro del mouse su una richiesta da sostituire e scegli Sostituisci intestazioni o Sostituisci contenuto 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 a DevTools i diritti di accesso.
3. Se hai configurato le sostituzioni locali, ma sono disattivate, DevTools le attiva automaticamente.

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

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

Per disattivare temporaneamente le sostituzioni locali o eliminare tutti i file di sostituzione, vai a Origini > Sostituzioni 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 pulsante destro del mouse sul file o sulla cartella in Origini > Override, seleziona Elimina e fai clic su OK nella finestra di dialogo. Questa azione non può essere annullata e dovrai ricreare manualmente le sostituzioni eliminate.

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

Sostituire i contenuti web

Per eseguire l'override dei contenuti web:

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

Nota: non puoi sostituire i file mappati alla sorgente. Se fai clic con il tasto destro del mouse su una richiesta nel riquadro Rete e selezioni Sostituisci contenuti, DevTools mostra una finestra di dialogo che ti reindirizza ai file di origine originali.

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

DevTools salva i file modificati, li elenca in Origini > Override e mostra l'icona accanto ai file con override nei riquadri e nei riquadri pertinenti: Elementi > Stili, Rete e Origini > Override.

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

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

Con le sostituzioni locali, non è necessario accedere al backend e non devi attendere che supporti le modifiche. Simula ed esegui esperimenti al volo:

1. Configura gli override locali.
2. In Rete, filtra per le richieste XHR/fetch, trova quella che ti serve, fai clic con il tasto destro del mouse e seleziona Sostituisci contenuto.
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 seguente video:

Monitora le modifiche locali

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

Inoltre, in Origini > Sostituzioni, puoi fare clic con il tasto destro del mouse sul file salvato e selezionare Apri nella cartella contenente dal menu contestuale. Si aprirà la cartella selezionata durante la configurazione delle sostituzioni. Qui puoi modificare i file con il tuo editor di codice preferito.

Sostituire le intestazioni della risposta HTTP

Dal riquadro Rete, puoi sostituire le intestazioni di risposta HTTP senza accedere al server web.

Con gli override delle intestazioni delle risposte, puoi prototipare localmente correzioni per varie intestazioni, incluse, a titolo esemplificativo:

• Intestazioni di Cross-Origin Resource Sharing (CORS)
• Intestazioni relative alle autorizzazioni e alle norme
• Intestazioni di isolamento cross-origin

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

1. Configura le sostituzioni locali e controlla, ad esempio, questa pagina dimostrativa.
2. Vai a Rete, trova una richiesta, fai clic con il tasto destro del mouse e seleziona Sostituisci intestazioni. DevTools ti porta all'editor Intestazioni > Intestazioni della risposta.

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

   

   In alternativa, per attivare l'editor Intestazioni della risposta, passa il mouse sopra il valore dell'intestazione di una 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 dell'intestazione, fai clic sul valore.
   • Per aggiungere una nuova intestazione, fai clic su Aggiungi intestazione.
   • Per rimuovere una sostituzione dell'intestazione, fai clic su accanto. In questo modo, le intestazioni aggiunte vengono rimosse o i valori modificati vengono ripristinati ai valori originali.

   Il riquadro Rete evidenzia le intestazioni modificate in verde e le sostituzioni rimosse in rosso e barrate. Inoltre, la scheda Intestazioni mostra un'icona a forma di punto viola con una descrizione comando per informarti che le intestazioni sono sostituite.

5. Aggiorna la pagina per applicare le modifiche.

Modifica tutte le sostituzioni delle intestazioni di risposta

Per modificare tutte le sostituzioni dell'intestazione in un unico posto:

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

   

   DevTools ti reindirizza al file .headers corrispondente in Origini > Sostituzioni.

2. Modifica il file .headers:

   

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

     Nota: puoi utilizzare i caratteri jolly per specificare più richieste contemporaneamente. Indica più caratteri con * e uno solo con ?.

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

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

3. Salva il file .headers con Command / Ctrl + S.

4. Aggiorna la pagina per applicare le modifiche.