Terminale DevTools

Addy Osmani

Terminale DevTools è una nuova estensione di Chrome DevTools che porta la potenza del terminale nel tuo browser. Se ti dovesse capitare di passare da Chrome alla riga di comando e viceversa per attività come il pull di asset, l'utilizzo di git, grunt, wget o persino vim, potresti trovare questa estensione che ti fa risparmiare tempo.

Il terminale DevTools è utile per apportare rapide modifiche alla riga di comando all'interno di Chrome mentre lavori sulla tua app web.

Dopo aver utilizzato Copia come cURL nel riquadro Network, posso incollare facilmente il comando completo nel terminale DevTools ed eseguirlo.

Perché usare un terminale nel browser?

Durante lo sviluppo, probabilmente sei abituato a lavorare con alcuni strumenti diversi: il tuo editor di testo per la creazione, un browser per i test e il debug e il terminale per l'aggiornamento dei pacchetti, il curling delle intestazioni o persino un processo di compilazione utilizzando Grunt.

Eseguire attività di build con Grunt senza dover uscire dal browser.

Passare da un contesto all'altro durante lo sviluppo può distrarre e portare a inefficienza. Abbiamo già parlato di come, per alcuni tipi di progetti, sia possibile eseguire il debug e creare il codice direttamente in Chrome DevTools utilizzando Aree di lavoro senza uscire dal browser.

È anche possibile un flusso di lavoro Git completo. Ideale per git diff dopo la creazione in un'area di lavoro.

Il terminale DevTools (di Dmitry Filimonov) completa la storia, permettendo di programmare, eseguire il debug e creare dalla stessa finestra. Puoi utilizzare i colori Tab, Ctrl e persino Git, per risultare familiare con il terminale che usi abitualmente nel tuo flusso di lavoro quotidiano.

Flusso di lavoro

Avvia nuovi progetti con un git clone, yeoman o qualsiasi altro strumento accessibile tramite il terminale.

Il mio flusso di lavoro personale per la creazione in Chrome ora ha un aspetto simile al seguente:

• DevTools Terminal lo usa per git clone un repository GitHub, touch un nuovo file o eseguire yo (yeoman) per creare un'app. Se voglio, posso avviare un nuovo server per visualizzare l'anteprima anche dell'app.
• Aree di lavoro:modifica ed esegui il debug dell'app web in Chrome. Se ho avviato un server in precedenza, posso mappare il mio progetto locale ai file di rete. Posso utilizzare Sass o Less e mappare le modifiche del preprocessore CSS ai miei file CSS.
• Terminale DevOps: ora posso impegnarmi con il controllo del codice sorgente, usare un gestore di pacchetti (npm, bower) per scaricare le dipendenze o eseguire il mio processo di build (grugnito, make) per generare una versione ottimizzata della stessa app.
• Anche se può volerci un po' per abituarsi alla disposizione delle finestre, è piacevole poter ottenere la maggior parte di ciò che mi serve dall'interno del browser.

Elenca i nomi file nella directory di lavoro attuale utilizzando ls. Ideale per visualizzare le directory al di fuori di Workspace.

Installazione

Il terminale DevTools può essere installato dal Chrome Web Store. Se sei un utente Mac o Linux, dopo averlo aggiunto a Chrome, puoi semplicemente "Ispezionare elemento" o Ctrl + Shift + I per aprire DevTools e potrai accedervi tramite la nuova scheda "Terminale". Gli utenti Windows dovranno connettere l'estensione al terminale di sistema utilizzando un proxy Node.js. Per ottenere questa configurazione, installa il modulo devtools-terminal da npm: npm install -g devtools-terminal

Poi apri una nuova finestra della riga di comando ed esegui devtools-terminal. Successivamente, apri DevTools e nella scheda "Terminale", connettiti al server utilizzando le opzioni di configurazione predefinite. Se necessario, potrai personalizzare ulteriormente la porta e l'indirizzo.

Limitazioni

Il terminale DevTools presenta alcune limitazioni degne di nota. A differenza di Terminal.app o iTerm2 su Mac, non supporta ancora schede, più finestre o la riproduzione della cronologia. Tuttavia, puoi aprire tutte le nuove schede di Chrome che vuoi, ognuna delle quali può avere la propria istanza del terminale DevTools. Questa operazione può essere eseguita dalla schermata App di Chrome:

Al momento, l'estensione supporta sia il tema chiaro predefinito sia uno scuro.

Attualmente questa estensione si basa su NPAPI, che verrà gradualmente eliminato nel corso del prossimo anno in favore dell'API Native Messaging. L'autore del terminale DevTools Dmitry Fillimonov ha in programma di abbandonare NPAPI a favore di questa API o dell'API Native Client nel prossimo futuro.

Conclusioni

Il terminale DevTools (e le estensioni simili, come Auxilio) possono aiutarti a evitare di spostarsi tra l'editor, il browser e la riga di comando durante lo sviluppo. Sebbene un terminale integrato nel browser possa non essere adatto a tutti, potresti trovare l'estensione un utile complemento del tuo flusso di lavoro e ti invitiamo a provarla e a capire come ti piace.