Terminale DevTools

Addy Osmani

DevTools Terminal è una nuova estensione di Chrome DevTools che porta la potenza del terminale nel browser. Se ti capita di dover cambiare contesto tra Chrome e la riga di comando per attività come il download di asset, l'utilizzo di git, grunt, wget o persino vim, questa estensione potrebbe farti risparmiare tempo.

Il terminale di DevTools è ideale per modifiche rapide della riga di comando.
Il terminale di DevTools è utile per apportare rapide modifiche alla riga di comando da Chrome mentre lavori sulla tua web app.
Utilizzo di cURL nel terminale di DevTools.
Dopo aver utilizzato Copia come cURL nel riquadro della rete, posso incollare facilmente il comando completo nel terminale di DevTools ed eseguirlo.

Perché utilizzare un terminale nel browser?

Durante lo sviluppo, probabilmente sei abituato a utilizzare diversi strumenti: un editor di testo per la creazione, un browser per i test e il debug e il terminale per aggiornare i pacchetti, le intestazioni di Curling o persino un processo di compilazione utilizzando Grunt.

Esegui Grunt nel terminale di DevTools.
Esegui attività di compilazione con Grunt senza dover uscire dal browser.

Dover cambiare contesto tra gli strumenti durante lo sviluppo può essere fonte di distrazione e può portare a inefficienza. In precedenza abbiamo parlato di come (per determinati tipi di progetti) puoi eseguire il debug e scrivere codice direttamente all'interno di Chrome DevTools utilizzando Spazi di lavoro senza uscire dal browser.

Flusso di lavoro Git.
È possibile anche un flusso di lavoro Git completo. Ottimo per un diff di Git dopo la scrittura in uno spazio di lavoro.

Il terminale di DevTools (di Dmitry Filimonov) completa la storia, rendendo possibile scrivere codice, eseguire il debug e compilare dall'interno della stessa finestra. Hai accesso a Tab, Ctrl e persino ai colori di Git, per un'esperienza simile a quella del terminale che utilizzi nel tuo flusso di lavoro quotidiano.

Flusso di lavoro

Flusso di lavoro di creazione.
Inizia nuovi progetti con git clone, yeoman o qualsiasi altro strumento accessibile tramite il terminale.

Il mio flusso di lavoro personale per la creazione di contenuti in Chrome ora è il seguente:

  • DevTools Terminal per git clone un repository GitHub, touch un nuovo file o eseguire yo (yeoman) per creare un'app. Se voglio, posso anche avviare un nuovo server per visualizzare l'anteprima dell'app
  • Spazi di lavoro:modifica e debug della mia web app in Chrome. Se ho lanciato un server in precedenza, posso mappare il mio progetto locale ai file di rete. Posso utilizzare Sass o Less e mappare le modifiche del pre-processore CSS ai miei file CSS.
  • Terminale DevTools: ora posso eseguire il commit nel controllo del codice sorgente, utilizzare un gestore dei pacchetti (npm, bower) per scaricare le dipendenze o eseguire il mio processo di compilazione (grunt, make) per generare una versione ottimizzata della stessa app.
  • Anche se può essere necessario un po' di tempo per abituarsi alla disposizione delle finestre, è piacevole poter ottenere la maggior parte di ciò che mi serve dal browser.
Utilizza ls nel terminale.
Elenca i nomi file nella directory di lavoro corrente utilizzando ls. Ideale per visualizzare le directory esterne a Workspace.

Installazione

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

Quindi, apri una nuova finestra della riga di comando ed esegui devtools-terminal. A questo punto, 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.

Terminal di DevTools supporta la personalizzazione dei dettagli di connessione durante la configurazione.

Limitazioni

Il terminale DevTools presenta alcune limitazioni da tenere presenti. A differenza di Terminal.app o iTerm2 su Mac, non supporta ancora le 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 di Terminale di DevTools. Puoi farlo dalla schermata App di Chrome:

Il terminale di DevTools supporta sia un tema chiaro sia uno scuro.
Al momento, l'estensione supporta sia il tema chiaro predefinito sia un tema scuro.

Al momento questa estensione si basa su NPAPI, che verrà eliminata gradualmente nel corso del prossimo anno a favore dell'API Native Messaging. Dmitry Fillimonov, autore di DevTools Terminal, prevede di abbandonare NPAPI in favore di questa API o dell'API Native Client nel prossimo futuro.

Conclusioni

Il terminale di DevTools (e le estensioni simili, come Auxilio) può aiutarti a evitare di passare dall'editor al browser e alla riga di comando e viceversa durante lo sviluppo. Anche se un terminale in-browser potrebbe non essere adatto a tutti, potresti trovare l'estensione un utile complemento per il tuo flusso di lavoro. Ti invitiamo a provarla e a scoprire se fa al caso tuo.