Terminal do DevTools

Addy Osmani

Twitter GitHub

O DevTools Terminal é uma nova extensão do Chrome DevTools que leva a potência do terminal para seu navegador. Se você precisar alternar entre o contexto do Chrome e a linha de comando para realizar tarefas como extrair recursos, usar git, grunt, wget ou até mesmo vim, talvez essa extensão seja útil para economizar tempo.

O terminal do DevTools é útil para fazer ajustes rápidos na linha de comando do Chrome enquanto 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, você provavelmente está acostumado a trabalhar com algumas ferramentas diferentes: seu editor de texto para a autoria, um navegador para testes e depuração e o terminal para atualizar pacotes, cabeçalhos de curling ou até mesmo um processo de compilação usando o Grunt.

Como executar tarefas de build com o Grunt sem precisar sair do navegador

A necessidade de alternar contextos entre ferramentas durante o desenvolvimento pode distrair e levar à ineficiência. Já falamos sobre como (para determinados tipos de projetos) você pode depurar e criar código diretamente no Chrome DevTools usando espaços de trabalho sem sair do navegador.

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

O DevTools Terminal (de Dmitry Filimonov) termina essa história, possibilitando a codificação, a depuração e a compilação dentro da mesma janela. Você tem acesso a cores tab, ctrl e até mesmo Git, que se acostumam com o terminal que você costumava usar no 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 é mais ou menos assim:

• O Terminal do DevTools usa git clone para um repositório do GitHub, touch para um novo arquivo ou executa 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 tiver iniciado um servidor anteriormente, posso mapear meu projeto local para os arquivos de rede. Posso usar Sass ou Less e fazer com que as alterações do pré-processador CSS sejam mapeadas de volta para os arquivos CSS.
• Terminal do DevTools:agora posso me comprometer com o controle de origem, usar um gerenciador de pacotes (npm, bower) para extrair dependências ou executar meu processo de compilação (incorreto, de marca) para gerar uma versão otimizada do mesmo app.
• Embora possa levar algum tempo para me acostumar com a disposição das janelas, é agradável poder fazer a maior parte do que preciso dentro do navegador.

Liste os nomes de arquivos no diretório de trabalho atual usando ls. É uma ótima opção para visualizar diretórios fora do seu Workspace.

Instalação

O DevTools Terminal pode ser instalado na Chrome Web Store. Se você for usuário de Mac ou Linux, depois de adicioná-lo 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ê vai poder personalizar mais a portabilidade e o endereço, se necessário.

Limitações

O Terminal do DevTools tem algumas limitações importantes. Diferentemente do Terminal.app ou do iTerm2 no Mac, ele ainda não tem suporte a guias, várias janelas ou a reprodução de histórico. No entanto, é possível abrir quantas guias novas do Chrome você quiser, e cada uma delas pode ter sua própria instância do DevTools Terminal. Isso pode ser feito na tela "Apps do Chrome":

No momento, a extensão oferece suporte para o tema claro padrão e um tema escuro.

No momento, essa extensão depende da NPAPI, que será descontinuada ao longo do próximo ano em favor da API Native Messaging. O autor do terminal do DevTools, Dmitry Fillimonov, planeja deixar a NPAPI em favor dessa API ou da API Native Client em breve.

Conclusões

O Terminal do DevTools (e extensões semelhantes, como o Auxilio) pode ajudar você a não alternar entre o editor, o navegador e a linha de comando durante o desenvolvimento. Embora um terminal no navegador possa não ser a xícara de chá de todos, você pode achar a extensão um complemento útil para seu fluxo de trabalho. Incentivamos você a testá-la e ver se gosta.