Terminale DevTools è una nuova estensione di Chrome DevTools che porta la potenza del terminale al browser. Se ti capitasse di passare da un contesto a un altro da Chrome alla riga di comando per attività come la rimozione di asset, utilizzando git, grunt, wget o persino vim, questa estensione potrebbe esserti utile per risparmiare tempo.
Perché utilizzare un terminale nel browser?
Durante lo sviluppo, probabilmente sei abituato a lavorare con alcuni strumenti diversi: l'editor di testo per la creazione, un browser per il test e il debug e il terminale per l'aggiornamento dei pacchetti, le intestazioni di curling o persino un processo di compilazione con Grunt.
Cambiare contesto da uno strumento all'altro durante lo sviluppo può essere fonte di distrazione e portare a inefficienza. In precedenza abbiamo parlato di come (per determinati tipi di progetti) sia possibile eseguire il debug e creare il codice direttamente in Chrome DevTools utilizzando Aree di lavoro senza uscire dal browser.
Il terminale DevTools (di Dmitry Filimonov) completa questa storia, permettendo di programmare, eseguire il debug e creare dall'interno della stessa finestra. Puoi accedere ai colori Tab, Ctrl e Git per farti sentire familiare con il terminale che hai sempre usato nel tuo flusso di lavoro quotidiano.
Flusso di lavoro
Il mio flusso di lavoro personale per la creazione in Chrome ora ha il seguente aspetto:
- Il terminale di DevTools lo utilizza per
git cloneun repository GitHub,touchun nuovo file o eseguireyo (yeoman)per creare un'app. Se voglio, posso avviare un nuovo server anche per visualizzare l'anteprima dell'app - Aree di lavoro: modifica ed esegui il debug della mia app web in Chrome. Se ho avviato un server in precedenza, posso mappare il mio progetto locale ai miei file di rete. Posso utilizzare Sass o Meno e fare in modo che le modifiche del preprocessore CSS vengano mappate ai miei file CSS.
- Terminale DevTools: ora posso impegnarmi a controllare il codice sorgente, utilizzare un gestore di pacchetti (npm, bower) per scaricare le dipendenze o eseguire il processo di compilazione (grunt, make) per generare una versione ottimizzata della stessa app.
- Anche se può volerci un po' di tempo per abituarsi alla disposizione delle finestre, è piacevole poter ottenere la maggior parte di ciò di cui ho bisogno direttamente nel browser.
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 completare la 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. Apri quindi 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
DevTools presenta alcune limitazioni degne di nota. A differenza di Terminal.app o iTerm2 sui 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 del terminale DevTools. Questa operazione può essere eseguita dalla schermata App di Chrome:
Questa estensione attualmente si basa su NPAPI, che verrà gradualmente eliminato nel corso del prossimo anno a favore dell'API Native Messaging. L'autore del terminale DevTools Dmitry Fillimonov prevede di abbandonare NPAPI a favore di questa API o dell'API Native Client nel prossimo futuro.
Conclusioni
Il terminale DevTools (e estensioni simili, come Auxilio) possono aiutarti a evitare di passare continuamente dall'editor, dal browser e dalla riga di comando durante lo sviluppo. Sebbene un terminale integrato nel browser possa non essere adatto a tutti, potresti trovare questa estensione un'utile integrazione al tuo flusso di lavoro e ti invitiamo a provarla e a vedere come ti piace.