Questo articolo popolare è stato aggiornato nel 2020. Per ulteriori informazioni sul miglioramento del flusso di lavoro di sviluppo con gli strumenti, leggi Developer Essentials: Strumenti su SitePoint Premium.
Giorno tipico di uno sviluppatore web comporta la creazione di pagine web HTML con CSS e JavaScript associati nel loro editor preferito. Il flusso di lavoro:
- Aprire la pagina ospitata localmente in un browser.
- Giura.
- Aprire DevTools per indagare i problemi di layout e funzionalità.,
- Modifica gli elementi HTML, le proprietà CSS e il codice JavaScript per risolvere i problemi.
- Copia queste modifiche nell’editor e torna al passaggio # 1.
Mentre strumenti come live reloading hanno reso questo processo più facile, molti sviluppatori continuano a modificare il codice sia in DevTools e il loro editor.
Tuttavia, è possibile aprire e modificare i file sorgente direttamente in Chrome. Tutte le modifiche apportate vengono salvate nel file system e aggiornate all’interno dell’editor (presumendo che si aggiorni quando si verificano modifiche ai file).,
Passo 1: Avvia Strumenti di sviluppo
Apri Chrome, carica una pagina dal tuo file system/server locale e apri Strumenti di sviluppo dal menu Altri strumenti o premi F12 o Ctrl / Cmd + Maiusc + I a seconda del tuo sistema. Passare alla scheda Sorgenti per esaminare il file explorer:
È possibile aprire e modificare i file CSS e JavaScript in questa vista, ma eventuali modifiche andranno perse non appena si aggiorna la pagina.
Passo 2: Associare una cartella all’area di lavoro
Fare clic sulla scheda Filesystem, quindi fare clic su + Aggiungi cartella all’area di lavoro., Ti verrà richiesto di individuare la cartella di lavoro e Chrome vi chiederà di confermare che si consente l’accesso. L’esploratore mostra i file sul sistema che possono essere aperti con un solo clic:
Passo 3: Modifica e salva il tuo codice
Ora puoi saltare e modificare il tuo codice. Le modifiche non salvate sono contrassegnate con un asterisco nella scheda file.
Le modifiche CSS vengono aggiornate istantaneamente ma, nel caso di HTML e JavaScript, normalmente è necessario premere Ctrl / Cmd + S per salvare il file nel file system e quindi aggiornare il browser.,
Si noti che è anche possibile fare clic destro sulla scheda file e selezionare Salva con nome… per salvare una copia del file altrove.
Passo 4: Rivedere e annullare le modifiche
Per rivedere le modifiche, fare clic destro su una scheda file e scegliere Modifiche locali… dal menu contestuale:
Viene visualizzata una vista diff-like. L’icona a forma di freccia in basso a sinistra del riquadro annullerà tutte le modifiche e ripristinerà il file allo stato originale.,
Strumenti di sviluppo di Chrome non sarà mai un sostituto completo per il vostro editor preferito, ma può essere utile quando si sta facendo modifiche rapide o di lavoro da un altro PC in cui l’editor non può essere installato.