Con gli override locali, puoi sbloccare il flusso di lavoro eseguendo la prototipazione e testando le modifiche e le correzioni senza dover attendere il supporto di backend, terze parti o API.
Utilizza gli override locali per simulare le risorse remote, anche se non puoi accedervi. Puoi simulare le risposte alle richieste e su vari file, ad esempio intestazioni delle risposte HTTP e contenuti web, incluse richieste XHR e di recupero.
Ad esempio, gli override locali possono essere utili nei seguenti casi d'uso:
- API simulata e test delle correzioni dell'API prima che vengano effettivamente passate in produzione.
- Prototipare nuovi progetti di UI se conosci già le strutture di dati che il backend utilizzerà.
- Testa le correzioni delle prestazioni, ad esempio elimina la metrica CLS per assicurarti in anticipo che siano significative.
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.
Puoi anche salvare le modifiche direttamente nei file di origine. Vedi Modificare e salvare file con gli spazi di lavoro.
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:
- 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.
- Se non hai ancora configurato gli override locali, nella barra delle azioni in alto, DevTools ti chiede di:
- Seleziona una cartella in cui archiviare i file di override.
- Fai clic su Consenti per concedere a DevTools i diritti di accesso.
- Se hai configurato override locali ma disattivati, DevTools attiva automaticamente gli override.
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
oppure fai clic rispettivamente 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 > 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:
- Configura le sostituzioni locali.
- 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:
- Configura le sostituzioni locali.
- 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.
- Apporta le modifiche ai dati recuperati e salva il file.
- 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.
Inoltre, in Origini > Sostituzioni, puoi fare clic con il tasto destro del mouse sul file salvato e selezionare Apri in una cartella contenitore dal menu contestuale. Si apre la cartella selezionata durante la overrides setup. Qui puoi modificare i file con il tuo editor di codice preferito.
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:
- Configura le sostituzioni locali ed esamina, ad esempio, questa pagina demo.
- 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.
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 Modifica Modifica.
Modifica o aggiungi una nuova intestazione.
- Fai clic su un valore di intestazione per modificarlo.
- Per aggiungere una nuova intestazione, fai clic su Aggiungi intestazione.
- Per rimuovere l'override di un'intestazione, fai clic sulla 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.
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:
Fai clic su .headers accanto alla sezione Intestazioni della risposta.
DevTools ti rimanda al file
.headers
corrispondente in Origini > Override.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
.Per ripristinare un valore di intestazione, rimuovi un'intestazione o una regola aggiunta, passaci il mouse sopra e fai clic su
.
Salva il file
.headers
con Comando / Ctrl + S.Aggiorna la pagina per applicare le modifiche.