O terminal do DevTools é uma nova extensão do Chrome DevTools que traz a potência do terminal para o navegador. Se você precisar alternar o contexto entre o Chrome e a linha de comando para tarefas como: baixar recursos, usar git, grunt, wget ou até mesmo vim, essa extensão pode ser útil para economizar tempo.
Por que usar um terminal no navegador?
Durante o desenvolvimento, você provavelmente está acostumado a trabalhar com algumas ferramentas diferentes: seu editor de texto para criação, um navegador para testes e depuração e o terminal para atualizar pacotes, encabeçamentos de curling ou até mesmo um processo de build usando o Grunt.
Ter que alternar entre contextos durante o desenvolvimento pode ser uma distração e levar à ineficiência. Já falamos sobre como depurar e criar código diretamente no Chrome DevTools usando Espaços de trabalho (link em inglês) sem sair do navegador para determinados tipos de projetos.
O terminal do DevTools (de Dmitry Filimonov) completa essa história, permitindo programar, depurar e criar na mesma janela. Você tem acesso a guias, Ctrl e até cores do Git, o que torna o terminal familiar para você.
Fluxo de trabalho
Meu fluxo de trabalho pessoal para criação no Chrome agora é mais ou menos assim:
- O terminal do DevTools é usado para
git cloneum repositório do GitHub,touchum novo arquivo ou executaryo (yeoman)para criar um app. Se quiser, também posso iniciar um novo servidor para visualizar o app - Espaços de trabalho:edite e depure minha app Web no Chrome. Se eu tiver iniciado um servidor antes, posso mapear meu projeto local para meus arquivos de rede. Posso usar o Sass ou o Less e ter as mudanças do pré-processador de CSS mapeadas de volta para meus arquivos CSS.
- Terminal das Ferramentas do desenvolvedor:agora posso confirmar o controle de origem, usar um gerenciador de pacotes (npm, bower) para baixar dependências ou executar meu processo de build (grunt, make) para gerar uma versão otimizada do mesmo app.
- Embora possa levar um tempo para se acostumar com o arranjo de janelas, é agradável conseguir fazer a maioria das coisas que preciso no navegador.
Instalação
O terminal do DevTools pode ser instalado na Chrome Web Store. Se você for usuário do Mac ou Linux, depois de adicionar o Chrome, basta clicar em "Inspecionar elemento" ou Ctrl + Shift + I para abrir as ferramentas do desenvolvedor. Elas também podem ser acessadas pela nova guia "Terminal".
Os usuários do Windows precisam conectar a extensão ao terminal do sistema usando um proxy do Node.js. Para fazer essa configuração, instale o módulo devtools-terminal do npm:
npm install -g devtools-terminal
Em seguida, abra uma nova janela de linha de comando e execute devtools-terminal. Em seguida, abra o DevTools e, na guia "Terminal", conecte-se ao servidor usando as opções de configuração padrão. Você poderá personalizar ainda mais a porta e o endereço, se necessário.
Limitações
O terminal do DevTools tem algumas limitações. Ao contrário do Terminal.app ou do iTerm2 no Mac, ele ainda não oferece suporte a guias, várias janelas ou reprodução de histórico. No entanto, você pode abrir quantas guias novas do Chrome quiser, cada uma com a própria instância do terminal do DevTools. Isso pode ser feito na tela "Apps do Chrome":
No momento, essa extensão depende da NPAPI, que será desativada no próximo ano em favor da API Native Messaging. O autor do DevTools Terminal, Dmitry Fillimonov, planeja abandonar a NPAPI em favor desta API ou da API Native Client em breve.
Conclusões
O terminal do DevTools (e extensões semelhantes, como o Auxilio) pode ajudar a evitar a alternância entre o editor, o navegador e a linha de comando durante o desenvolvimento. Embora um terminal no navegador não seja a melhor opção para todo mundo, a extensão pode ser um complemento útil para seu fluxo de trabalho. Teste e veja se você gosta dela.