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

Sofia Emelianova

Con gli override locali, puoi eseguire l'override delle intestazioni delle risposte HTTP e dei contenuti web, incluse le richieste XHR e di recupero, per simulare le risorse remote anche se non puoi accedervi. In questo modo puoi creare un prototipo di modifiche senza attendere che il backend le supporti. Gli override locali ti consentono inoltre di mantenere le modifiche apportate in DevTools durante i caricamenti delle pagine.

Come funziona:

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

Limitazioni

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

• La cache è disabilitata se sono abilitati gli override locali.
• DevTools non salva le modifiche apportate nella struttura DOM del riquadro Elementi.
• Se modifichi il CSS nel riquadro Stili e l'origine di questo CSS è un file HTML, DevTools non salverà la modifica.

Puoi però modificare i file HTML nel riquadro Origini.

Configurare le sostituzioni locali

Puoi sostituire immediatamente le intestazioni delle risposte o dei contenuti web nel riquadro Rete:

1. Apri DevTools, vai al riquadro Rete, fai clic con il tasto destro del mouse sulla richiesta di cui vuoi eseguire l'override, scegli Sostituisci intestazioni o Esegui l'override dei 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 a DevTools i diritti di accesso.
3. Se hai configurato override locali ma disattivati, DevTools attiva automaticamente gli override.

4. Dopo aver configurato e attivato gli override locali, a seconda di ciò che stai per eseguire l'override, DevTools ti indirizza a:

   • Il riquadro Origini per modificare i contenuti web.
   • L'editor in Rete > Intestazioni > Intestazioni delle risposte consente di apportare modifiche alle intestazioni delle risposte.

Per disattivare temporaneamente le sostituzioni locali o eliminare tutti i file di override, vai a Origini > Sostituzioni e deseleziona la casella di controllo Attiva sostituzioni locali di check_box_outline_blank oppure fai clic rispettivamente su block 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 > Sostituzioni, seleziona Elimina, poi 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. DevTools ti reindirizzerà a Origini > Override.

Esegui l'override dei contenuti web

Per eseguire l'override dei contenuti web:

1. Configura le sostituzioni locali.
2. Apporta modifiche ai file e salvale in DevTools.

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

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

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 delle richieste XHR o di recupero per simulare le risorse remote

Con gli override locali, non è necessario accedere al backend e non devi attendere che supportino le modifiche. Simulazione e sperimentazione al volo:

1. Configura le sostituzioni locali.
2. In Rete, filtra le richieste XHR/fetch, trova quella che ti serve, fai clic con il tasto destro del mouse e seleziona Esegui override contenuti.
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: la scheda a scomparsa Modifiche.

Esegui l'override delle intestazioni delle risposte HTTP

Dal riquadro Rete, puoi ignorare le intestazioni delle risposte HTTP senza accedere al server web.

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

• Intestazioni della condivisione delle risorse tra origini (CORS)
• Intestazioni dei criteri di autorizzazione
• Intestazioni di isolamento multiorigine

Per eseguire l'override dell'intestazione di una risposta:

1. Configura le sostituzioni locali ed esamina, ad esempio, questa pagina demo.
2. Vai a Rete, trova una richiesta, fai clic con il tasto destro del mouse e seleziona Sostituisci intestazioni. DevTools porta all'editor Intestazioni > Intestazioni delle risposte.

3. Passa il mouse sopra il valore dell'intestazione di una risposta e posiziona il cursore al suo interno.

   

   In alternativa, per attivare l'editor Intestazioni delle risposte, passa il mouse sopra il valore dell'intestazione di una risposta e fai clic su edit 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 l'override di un'intestazione, fai clic sulla delete accanto all'intestazione. Questa operazione rimuove le intestazioni che hai aggiunto o ripristina i valori modificati 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 con un punto viola con una descrizione comando che indica che le intestazioni sono sostituite.

5. refresh Aggiorna la pagina per applicare le modifiche.

Modifica tutti gli override dell'intestazione delle risposte

Per modificare tutte le sostituzioni di intestazioni 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 in questo caso è un insieme di intestazioni e valori e una 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, passaci il mouse sopra e fai clic su delete.

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

4. refresh Aggiorna la pagina per applicare le modifiche.