O DevTools Terminal é uma nova extensão do Chrome DevTools que leva o poder do terminal para seu navegador. Se você precisar alternar de contexto entre o Chrome e a linha de comando para tarefas como: extrair recursos, usar git, grunt, wget ou até mesmo vim, essa extensão pode ajudar a economizar tempo.
Por que usar um terminal no navegador?
Durante o desenvolvimento, é provável que você esteja 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, curling cabeçalhos ou até mesmo um processo de compilação usando o Grunt.
Ter que alternar os contextos entre as ferramentas durante o desenvolvimento pode distrair e levar à ineficiência. Já falamos sobre como (para determinados tipos de projetos) é possível depurar e criar código diretamente no Chrome DevTools usando espaços de trabalho, sem sair do navegador.
O DevTools Terminal (de Dmitry Filimonov) completa essa história, tornando possível codificar, depurar e compilar dentro da mesma janela. Você tem acesso às cores tab, ctrl e até mesmo Git, o que faz parecer familiar ao terminal que você costuma usar em seu fluxo de trabalho diário.
Fluxo de trabalho
Meu fluxo de trabalho pessoal para criação no Chrome agora fica um pouco assim:
- O DevTools Terminal pode ser usado para
git cloneum repositório do GitHub,touchpara um novo arquivo ou executaryo (yeoman)para criar um app. Se eu quiser, posso iniciar um novo servidor para visualizar o app também - Espaços de trabalho:editar e depurar meu app da Web no Chrome Se eu lancei um servidor antes, poderei mapear meu projeto local para os arquivos de rede. Posso usar Sass ou Less e mapear as alterações do pré-processador de CSS nos arquivos CSS.
- Terminal DevTools:agora posso confirmar o controle de origem, usar um gerenciador de pacotes (npm, bower) para extrair 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 me acostumar com a disposição das janelas, é bom poder fazer a maior parte do que preciso no navegador.
Instalação
O Terminal do DevTools pode ser instalado pela Chrome Web Store. Se você usa Mac ou Linux, basta adicionar ao Chrome, basta "Inspecionar elemento" ou Ctrl + Shift + I para abrir o DevTools e acessá-lo pela nova guia "Terminal".
Os usuários do Windows precisarão conectar a extensão ao terminal do sistema usando um proxy 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 a porta e o endereço ainda mais, se necessário.
Limitações
O Terminal do DevTools tem algumas limitações que valem a pena destacar. Ao contrário do Terminal.app ou iTerm2 no Mac, ele ainda não suporta a reprodução de guias, múltiplas janelas ou histórico. No entanto, é possível abrir quantas guias novas do Chrome você quiser, e cada uma delas pode ter uma instância própria do DevTools Terminal. Isso pode ser feito na tela de Aplicativos do Google Chrome:
No momento, essa extensão usa o NPAPI, que será desativado no próximo ano em favor da API Native Messaging. O autor do terminal do DevTools, Dmitry Fillimonov, planeja deixar de usar a NPAPI para priorizar essa API ou a API de cliente nativo em um futuro próximo.
Conclusões
O Terminal do DevTools (e extensões semelhantes, como o Auxilio) pode ajudar você a evitar alternar entre o editor, o navegador e a linha de comando durante o desenvolvimento. Embora um terminal no navegador possa não agradar a todos, a extensão pode ser um complemento útil para seu fluxo de trabalho. Recomendamos que você teste e veja se gosta.