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

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 vari file, ad esempio intestazioni delle risposte HTTP e contenuti web, incluse 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.

Inoltre, gli override locali ti consentono di mantenere le modifiche apportate in DevTools durante il caricamento 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 pubblica il file locale modificato, anziché la risorsa di rete.

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

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 codice CSS nel riquadro Stili e la sua origine è un file HTML, DevTools non salverà la modifica.

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

Configura override locali

Puoi eseguire subito l'override dei contenuti web o delle intestazioni delle risposte 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, DevTools nella barra delle azioni in alto 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 degli override locali ma sono disattivati, DevTools li attiva automaticamente.

4. Una volta configurati e abilitati gli override locali, a seconda dell'operazione che stai per eseguire, DevTools ti porta a:

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

Per disattivare temporaneamente gli override locali o eliminare tutti i file di override, vai a Origini > Override e deseleziona la casella di controllo check_box_outline_blank Attiva override locali o fai clic rispettivamente su block 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 tutte le sostituzioni, nel riquadro Rete fai clic con il tasto destro del mouse su una richiesta e seleziona Mostra tutte le sostituzioni. In DevTools, vai a Origini > Sostituzioni.

Sostituire i contenuti web

Per eseguire l'override dei contenuti web:

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

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

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

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 gli override locali, non è necessario accedere al backend e non è necessario attendere che supporti le modifiche. Simula ed esegui esperimenti in tempo reale:

1. Configura 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. refresh Aggiorna la pagina e osserva le modifiche applicate.

Per informazioni su 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, 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. Viene aperta la cartella selezionata durante l'override della configurazione. da qui puoi modificare i file con il tuo editor di codice preferito.

Esegui l'override delle intestazioni delle risposte 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 relative alle autorizzazioni e alle norme
• Intestazioni di isolamento multiorigine

Per sostituire un'intestazione della risposta:

1. Configura override locali ed esamina, 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 della risposta e fai clic su Modifica Modifica.

4. Modifica o aggiungi una nuova intestazione.

   

   • Fai clic su un valore di intestazione per modificarlo.
   • Per aggiungere una nuova intestazione, fai clic su add Aggiungi intestazione.
   • Per rimuovere una sostituzione di intestazione, fai clic sulla delete accanto all'intestazione. 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 gli override rimossi in rosso e barrati. Inoltre, la scheda Intestazioni mostra un'icona a forma di punto viola con una descrizione comando per informarti che le intestazioni sono sostituite.

5. refresh Aggiorna la pagina per applicare le modifiche.

Modifica tutti gli override delle intestazioni delle risposte

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

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

   

   DevTools ti rimanda al file .headers corrispondente in Origini > Override:

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.

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

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

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

4. refresh Aggiorna la pagina per applicare le modifiche.