15 comandos Graphical Command Line (GCLI) no Firefox para desenvolvedores front-end

Não importa quantos botões e menus sofisticados tenhamos, sempre há programadores que apreciam acesso à linha de comando em seu ambiente de trabalho, especialmente quando elimina uma busca pelo botão ou menu certo que exibe a configuração necessária em nossa linha de visão.

O Firefox teve um Interpretador gráfico de linha de comando, ou em suma um GCLI por um tempo agora e expandindo seu comando ao longo do tempo. Os comandos GCLI fornecem aos desenvolvedores um acesso rápido a ferramentas de desenvolvimento e configuração. Ele também tem um recurso de preenchimento automático; se você pressionar Tab durante a digitação de qualquer comando, os comandos sugeridos pelo GCLI serão inseridos.

A barra de ferramentas

O Firefox GCLI também é conhecido como Barra de Ferramentas do Desenvolvedor. tem três caminhos para abri-lo:

1. Pressione o atalho de teclado Shift + F2.
2. Clique no “Abra o Menu” ícone (hambúrguer) no lado direito da barra de endereços (à direita do botão Início), depois clique no ícone Desenvolvedor> Developer Toolbar submenu.
3. Na barra de menu superior, marque a Ferramentas> Desenvolvedor da Web> Developer Toolbar opção.

Quando a barra de ferramentas do desenvolvedor estiver aberta, você poderá vê-la na parte inferior da janela do navegador. Se você decidiu trabalhar com o GCLI, Eu aconselharia a deixá-lo aberto o tempo todo enquanto trabalhava.

Agora vamos ver algumas tarefas úteis que você pode executar no Firefox usando seu GCLI.

1. Remover elementos da página

Comando: pagemod remove element

Quando você precisa dar uma olhada no layout de uma página da web com alguns elementos removidos, basta digitar o comando pagemod remove element na linha de comando do Firefox para remover esses elementos da página.

O valor de precisa ser um seletor CSS válido na página. Digamos, em uma página que você deseja remover todos os links (especificamente) da classe .btn, o comando é escrito como: pagemod remove element a.btn.

Geralmente, o comando pagemod é usado para modificando uma página, removendo ou substituindo elementos ou atributos escolhidos.

2. Medir elementos

Comando: a medida

Se você quiser conheça a medida de qualquer módulo visual em uma página da web, há uma ferramenta para isso. o “a medida” A ferramenta é acessível por meio do conjunto de ferramentas típico do desenvolvedor da Web e do GCLI.

Digite e digite o a medida comando na linha de comando e o cursor se transformar em uma cruz. As medições serão mostrado em pixels ao lado do cursor da cruz, e são do largura, altura e comprimento diagonal da área selecionada. Para desativar a ferramenta, execute novamente o a medida comando.

3. Edite arquivos rapidamente

Comando: editar

Começar editando os recursos da sua página com o editar comando. Ao digitar o comando, você verá o URIs de todos os recursos disponíveis a partir dessa página, que você pode navegar usando as teclas de seta para cima e para baixo. Depois de selecionar o recurso que você deseja editar, pressione Tab para completar automaticamente a sugestão e pressione Enter. ferramenta de edição do navegador será aberto com o arquivo escolhido.

4. Procure propriedades CSS desconhecidas

Comando: mdn css

Este é um comando muito legal - é uma espécie de dicionário pop-up para propriedades CSS. Se você encontrar uma propriedade CSS desconhecida e quiser verificar o que ela significa, execute o comando mdn css no GCLI com substituído pelo nome real dessa propriedade desconhecida.

Um pop-up aparecerá com o “definição” para essa propriedade CSS logo acima da barra de ferramentas. A definição é uma extrair da página oficial da Mozilla Developer Network (MDN) da propriedade dada. O glossário de propriedades CSS, elementos HTML e APIs da Web do MDN é altamente citado.

Se o texto mostrado no pop-up não for suficiente e você quer saber mais, você pode clicar no link Visite a página do MDN dentro do pop-up, e a respectiva página MDN para essa propriedade será aberta. Agora, este comando está disponível apenas para propriedades CSS.

5. Redimensionar página

Comando: redimensionar para

A ferramenta de redimensionamento permite ver como sua página fica redimensionado para dimensões específicas, que pode ser útil quando você quiser visualizar a aparência da sua página em dispositivos com dimensões diferentes daquelas em que você está trabalhando.

O Firefox também tem um atalho de teclado para abrir esta ferramenta: Ctrl + Shift + M (Cmd + Alt + M para Mac). Mas se você já conhece as dimensões exatas para ser usado para o redimensionamento, a maneira mais rápida é executar o redimensionar comando com as dimensões que você precisa.

As dimensões são interpretado em pixels. Quando o comando for executado, você verá a página redimensionada.

6. Reinicie o navegador

Comando: reiniciar

Esse comando é auto-evidente. Para reiniciar o Firefox, basta digitar reiniciar na linha de comando e pressione Enter - pode ser útil quando você instala complementos ou plugins que exigem uma reinicialização.

7. Abra sua pasta de perfil do Firefox

Comando: pasta openprofile

Todo usuário do Firefox recebe sua própria pasta de perfil local naquela armazena arquivos específicos do usuário, como marcadores e o /cromada pasta. Quando você personaliza o Firefox, pode ser necessário visualizar e modificar o conteúdo dessa pasta.

A maneira alternativa de abrir esta pasta é clicar no botão Mostrar Pasta no sobre: ​​suporte página. Ao executar o comando pasta openprofile na linha de comando do Firefox, você verá sua pasta de perfil aberto de uma só vez.

8. Copie os valores das cores

Comando: conta-gotas

Além do fato de que ele suporta apenas o formato hexadecimal, conta-gotas é uma ferramenta brilhante para copiando o valor da cor de qualquer matiz visível em uma página da web. Digite o comando conta-gotas no GCLI para alternar a operacionalidade da ferramenta.

9. Teste bibliotecas externas

Comando: injetar

Se você quiser testar algumas bibliotecas externas na sua página web, em vez de mergulhar no código-fonte para fazer as adições temporárias, basta usar o injetar comando para insira as bibliotecas. Por exemplo, para incluir apenas o tipo jQuery injetar jQuery.

Ao executar o comando, o recurso será importado para a página inserindo um > tag no seção do documento HTML.

10. Tire screenshots

Comando: screenshot

o ferramenta de captura de tela incorporada no Firefox é bastante poderoso. Por exemplo, você pode segmentar elementos individuais usando seletores CSS, usar um timer, aplicar um dpr. Você pode até tirar uma foto de apenas a parte cromada do navegador (área em torno do conteúdo do usuário) usando o captura de tela --chrome comando.

As capturas de tela são salvas no Pasta de download do navegador no formato PNG.

11. governantes abertas

Comando: governantes

Ainda outra ferramenta legal do Firefox que é facilmente acessível via GCLI. o governantes comando exibe réguas horizontais e verticais ao redor da página. As medições das réguas são em pixels. Execute o mesmo comando para desativar a régua.

12. Abra o console e o depurador

Comando: consola aberta e dbg aberto

Se o teclado encurtar para abrindo o console da web ou a ferramenta depurador escorregou na sua mente, não se preocupe, apenas digite o comando simples consola aberta ou dbg aberto na linha de comando do Firefox para abrir a respectiva ferramenta.

13. Contar elementos da página

Comando: qsa

Este comando bacana do GCLI faz um rápido censo de elementos em uma página da web que corresponde a qualquer seletor de CSS. Por exemplo, para obter a contagem de todos elementos em uma página, use o qsa a comando.

14. Ativar ou desativar complementos

Comando: lista de complementos

Se você precisar pesquisar e gerenciar seus complementos do Firefox, recomendo que você use os comandos GCLI em vez do menu Complementos porque a versão GCLI lista todos os complementos e plugins, incluindo os pré-instalados, que pode não estar listado no menu Complementos.

Você pode alternar o status do complemento no GCLI com o comando adicionar seguido pelo sub-comando relevante, seja habilitar ou desativar.

Na demonstração abaixo, você pode ver como desabilitar rapidamente o Pocket no Firefox.

15. Gerenciar configurações

Comando: pref show

Existem toneladas de configurações de personalização os usuários podem acessar via Firefox about: config página. As mesmas configurações podem ser visualizadas e modificadas usando o GCLI.

Usar o GCLI para acessar as configurações de personalização é a opção mais rápida se você já sabe qual configuração deseja visualizar ou alterar. Para definir um valor para uma configuração, use o conjunto pref comando e para redefinir uma configuração, tipo prefixo reset .

Na demonstração abaixo você pode ver como verifique o URI a injetar jQuery comando injetou na página (veja a seção # 9 neste artigo):