Terminal do DevTools

Addy Osmani

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.

O DevTools Terminal é útil para fazer ajustes rápidos na linha de comando dentro do Chrome enquanto você trabalha no seu app da Web.

Depois de usar a opção Copiar como cURL no painel "Rede", posso colar o comando completo no terminal do DevTools e executá-lo.

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.

Executar tarefas de build com o Grunt sem sair do navegador

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.

Também é possível ter um fluxo de trabalho git completo. Ótimo para um git diff após a criação em um espaço de trabalho.

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

Inicie novos projetos com um git clone, yeoman ou qualquer outra ferramenta acessível pelo terminal.

Meu fluxo de trabalho pessoal para criação no Chrome agora fica um pouco assim:

• O DevTools Terminal pode ser usado para git clone um repositório do GitHub, touch para um novo arquivo ou executar yo (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.

Liste nomes de arquivo no diretório de trabalho atual usando ls. Ótimo para visualizar diretórios fora do seu espaço de trabalho.

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, a extensão oferece suporte ao tema claro padrão e a um tema escuro.

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.