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.
• Crea un prototipo di nuovi design dell'interfaccia utente se conosci già le strutture di dati che verranno utilizzate dal backend.
• 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 gli override 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 contenuti dal menu a discesa.
2. Se non hai ancora configurato le sostituzioni 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 configurati e attivati gli override locali, a seconda di ciò che stai per eseguire l'override, DevTools ti reindirizza a:

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

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 tutte le sostituzioni in una cartella, fai clic con il tasto destro del mouse sul file o sulla cartella in Origini > Sostituzioni, seleziona Elimina e poi fai clic su Ok nella finestra di dialogo. Questa azione non può essere annullata e dovrai ricreare manualmente le sostituzioni eliminate.

Per visualizzare rapidamente tutte le sostituzioni, 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 il CSS in Elementi > Stili, a meno che il CSS non si trovi nei file HTML.

Strumenti per gli sviluppatori salva i file modificati, li elenca in Origini > Sostituzioni e mostra l'icona accanto ai file sostituiti nei riquadri e nei riquadri pertinenti: Elementi > Stili, Rete e Origini > Sostituzioni.

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.

Sostituisci le richieste XHR o 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 in tempo reale:

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:

Monitorare le modifiche locali

Puoi tenere traccia di tutte le modifiche apportate ai contenuti web in un unico posto, ovvero nella scheda del riquadro 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 le sostituzioni delle intestazioni di risposta, puoi creare prototipi locali delle correzioni per varie intestazioni, tra cui, a titolo esemplificativo:

• Intestazioni di Cross-Origin Resource Sharing (CORS)
• Intestazioni Permissions-Policy
• 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 reindirizza 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 risposta, passa il mouse sopra un valore dell'intestazione di 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 o più richieste a cui applicarle.

     Nota: puoi utilizzare i caratteri jolly per specificare più richieste contemporaneamente. Designa 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 dell'intestazione, rimuovi un'intestazione o una regola aggiunta, passaci il mouse sopra e fai clic su .

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

4. Aggiorna la pagina per applicare le modifiche.