In questa guida imparerai come utilizzare gli strumenti per sviluppatori di Chrome per personalizzare stili e script senza apportare modifiche al codice originale. Ti verrà mostrato come effettuare test ed aggiustamenti estesi al tuo sito web utilizzando Overrides e lo spazio di lavoro di Chrome, senza dover toccare il file server originale.
Conoscenze fondamentali
- Utilizzando gli Overrides è possibile sovrascrivere file in locale per effettuare test e personalizzazioni.
- Lo spazio di lavoro ti permette di collegare la cartella di sviluppo locale agli strumenti per sviluppatori di Chrome per apportare modifiche direttamente.
- Queste due funzionalità sono estremamente utili per risolvere i problemi nell'ambiente di produzione senza influenzare il codice server originale.
Guida passo passo
Per utilizzare efficacemente gli strumenti per sviluppatori di Chrome, segui questi passaggi:
1. Utilizzo di Overrides
Per prima cosa vogliamo utilizzare la funzione Overrides di Chrome. Seleziona un file JavaScript, ad esempio main.js, che viene caricato dal server.
Fai clic destro sul file e seleziona "Sovrascrivi contenuto" dal menu contestuale.
Si aprirà una finestra di dialogo in cui potrai selezionare la posizione del file locale. Assicurati di aver già creato una cartella in cui desideri memorizzare i file di sovrascrittura.
Scegli la cartella desiderata e fai clic su "Seleziona cartella". In questo modo verrà stabilito il collegamento tra il file originale e il tuo file locale.
Ora devi concedere al browser l'accesso a questa directory. Fai nuovamente clic sul menu Overrides e assicurati che l'autorizzazione per accedere alla directory desiderata sia attivata.
2. Creazione di un file locale
Ora puoi creare un nuovo file nella cartella Overrides. Apri il file e scrivi ad esempio uno script alert() semplice al suo interno.
Puoi personalizzare il contenuto secondo le tue esigenze. Salva il file e ricarica la pagina per vedere apparire la finestra di alert, anziché il file originariamente caricato dal server.
3. Verifica dell'attività di rete
Per assicurarti che il file non venga più caricato dal server, apri la scheda Rete negli Strumenti per sviluppatori. Dovresti vedere che il file main.js non viene più richiamato dal server, ma invece vengono visualizzati i contenuti sovrascritti in locale.
Se desideri aggiungere ulteriori Overrides o eliminare quelli esistenti, vai all'area degli Overrides dove avrai una panoramica di tutti gli Overrides attivi.
4. Lavorare con lo spazio di lavoro
Successivamente, vogliamo configurare lo spazio di lavoro. Puoi collegare la cartella di sviluppo locale agli Strumenti per sviluppatori di Chrome. Vai nelle impostazioni degli Strumenti per sviluppatori e cerca l'opzione "Spazio di lavoro".
Scegli la cartella in cui si trovano i tuoi progetti. Anche qui Chrome richiede l'autorizzazione per accedere a questa cartella, quindi assicurati di aver concesso le autorizzazioni necessarie.
5. Modifiche al codice
Ora puoi lavorare direttamente nello spazio di lavoro. Ad esempio, apri il tuo file main.js, apporta le modifiche e salva il file. Il codice sarà quindi ricaricato automaticamente dal server e potrai vedere immediatamente come l'adattamento influisce sul tuo sito web.
6. Debugging nello spazio di lavoro
Un vantaggio pratico dello spazio di lavoro è che puoi impostare dei breakpoint per debuggare il tuo codice in modo efficiente. Imposta i breakpoint nelle righe del tuo codice, quindi ricarica la pagina per interrompere l'esecuzione e controllare lo stato attuale delle variabili.
7. Vantaggi e svantaggi
Anche se lo spazio di lavoro è utile, molti sviluppatori consigliano di apportare modifiche direttamente in un editor di codice come Visual Studio Code e di salvare i file lì. Questo consente di vedere meglio quale versione dei file viene utilizzata. Utilizzando lo spazio di lavoro, la situazione può diventare confusa, specialmente se il collegamento ai file originali non è chiaro.
Tuttavia, se stai modificando solo file CSS semplici o codice non transpilato, lo spazio di lavoro può essere una buona opzione.
Riepilogo
In questa guida hai imparato come lavorare con gli override e lo spazio di lavoro in Chrome Developer Tools per adattare stili e script senza toccare il file originale sul server. Gli override ti consentono di apportare rapidamente modifiche, mentre lo spazio di lavoro ti permette di lavorare direttamente con la cartella di sviluppo.
Domande frequenti
Posso utilizzare gli override anche per i file CSS?Sì, puoi utilizzare gli override anche per i file CSS. Semplicemente seleziona il file CSS desiderato e attiva l'override.
Come disattivo gli override?Puoi disattivare gli override andando nelle Developer Tools agli override e disattivandoli o rimuovendoli da lì.
Esistono delle limitazioni per lo spazio di lavoro?Sì, a volte può essere problematico identificare lo spazio di lavoro corretto, specialmente con il codice transpilato.
Perché dovrei utilizzare gli override anziché lo spazio di lavoro?Gli override offrono un modo più chiaro per apportare modifiche senza confondersi con diverse versioni dei file. Sono spesso più facili da gestire se non desideri modificare direttamente i file originali.
