Muitas vezes necessitamos realizar ações ou executar tarefas em nossos web browser e acabamos usando complementos ou extensões que, apesar de resolverem as coisas de uma maneira objetiva, oneram a memória de nossas máquinas, já que precisam ser instaladas nos browsers.

Vamos pensar.

Temos a comodidade de instalar algo que vai realizar a tarefa que precisamos automaticamente. Isso é bom, porém, temos outros caminhos para conseguir esses resultados.

É o que vai ser tratado aqui nesse artigo: Como utilizar recursos de nossos navegadores sem ter que instalar complementos, e, de quebra, livrar nosso browser de consumir mais memória.

Em se tratando de navegadores modernos, temos uma gama de complementos(addons) que possívelmente vão nos atender satisfatoriamente. E eles realmente dão conta de várias dessas necessidades e são realmente úteis. Muitos deles são extensões à serviços incríveis como o Pocket por exemplo!

Porém, muitas features que são tranformadas em addons, podemos conseguir usando recursos nativos do próprio navegador, sem que precisemos instalar qualquer coisa.

É aí que entra a Barra do Desenvolvedor(Developer tollbar) do Firefox.

Leia a descrição do próprio site da Developer Tollbar

The Developer Toolbar gives you command-line access to a number of developer tools from within Firefox. The Developer Toolbar is a Graphical Command Line Interpreter: it has the power and conciseness of a command line, but provides integrated help for its commands and can display rich output. It’s also extensible: you can add your own local commands and even convert them to add-ons so other people can install them too.

Vamos então listar aqui alguns comandos que podem nos trazer resultados interessantes através do command line da barra do desenvolvedor.

Primeiro vamos abrí-la:
Vá em Ferramentas > Desenvolvedor Web > Barra do desenvolvedor ou tecle shift+F2.

Digite help, dê enter e serão listados os comando que temos à disposição no GCLI(Graphical Command Line Interpreter).
Ao digitarmos help teremos [search] como um parâmetro de busca. Podemos buscar algum comando já de cara, se quisermos. Mas vamos comentar alguns…

Comandos:

console Comandos para controlar o console. Dê enter e verá as opções para este comando. (clear, close, open).

export Exporta o html da página

eyedropper Abre um painel que amplia uma área da página para inspecionar pixels e copiar valores de cores

folder Abre pastas, aceita como parâmetro um caminho para alguma pasta ex: folder open [path]

highlight Realça nós.
Parâmentros [–hideguides] [–showinfobar] [–showall] [–region …] [–fill …] [–keep]

Realça os nós que correspondem a um seletor na página

Opções:

<selector> (nodelist, obrigatório)
Seletor CSS usado para selecionar nós na página
[--hideguides] (boolean, obrigatório) Oculta guias ao redor do nó realçado
[--showinfobar] (boolean, obrigatório) Exibe a barra de propriedades acima do nó realçado (a barra exibe o nome da tag, atributos e dimensões)
[--showall] (boolean, obrigatório) Se houver muitos nós que correspondam ao seletor, apenas as primeiras 100 ocorrências serão mostradas para evitar que a página fique muito lenta. Use esta opção para exibir todas as correspondências
[--region ...] (selection, helpManOptional) Que região da caixa deve ser realçada: “content”, “padding”, “border” ou “margin”
[--fill ...] (string, helpManOptional) Substitui o estilo de preenchimento de região padrão por uma cor personalizada
[--keep] (boolean, obrigatório) Por padrão, realçamentos existentes são ocultos ao executar o comando, a menos que esta opção esteja definida

inspect Inspeciona um nó

Examina as dimensões e propriedades de um elemento usando um seletor CSS para abrir a inspeção do DOM

Opções:

<selector> (node, obrigatório)
Um seletor CSS para uso com document.querySelector que identifica um elemento em particular

pagemod Efetua alterações na página

Subcomandos:

pagemod remove: Exclui elementos e atributos da página help pagemod remove
pagemod remove attribute: Exclui os atributos encontrados help pagemod remove attribute
pagemod remove element: Exclui elementos da página help pagemod remove element
pagemod replace: Localiza e substitui em elementos da página help pagemod replace

paintflashing Realça regiões atualizadas

Subcomandos:

paintflashing off: Desativa o realce de regiões atualizadas help paintflashing off
paintflashing on: Ativa o realce de regiões atualizadas help paintflashing on

resize Controla o modo de design adaptável

Subcomandos:

resize off: Sai do modo de design adaptável help resize off
resize on: Entra no modo de design adaptável help resize on
resize to: Modifica o tamanho da página help resize to
resize toggle: Entra ou sai do modo de design adaptável help resize toggle

restart Reinicia o Firefox

screenshot Salva uma imagem PNG de toda a janela visível (opcionalmente após um atraso)

Opções:

[filename] (string, helpManOptional)
O nome do arquivo (deve possuir a extensão “.png”) no qual será salva a imagem da página.
[--clipboard] (boolean, obrigatório)
True se você deseja copiar a imagem da página em vez de salvá-la em um arquivo.
[--chrome] (boolean, obrigatório)
True se você deseja que a imagem seja da janela do Firefox em vez do conteúdo da página.
[--delay ...] (number, helpManOptional)
O tempo a aguardar (em segundos) antes que imagem da página seja efetuada
[--fullpage] (boolean, obrigatório)
“true” se a imagem da página deve incluir as partes fora dos limites da janela
[--selector ...] (node, helpManOptional)
Um seletor CSS para uso com document.querySelector que identifica um elemento em particular

unhighlight Desrealça todos os nós anteriormente realçados com o comando highlight

Essas são só algumas dicas de tarefas que podemos realizar no dia a dia. A barra do desenvolvedor tem muitos outros comando que não foram explorados aqui.

Num próximo post podemos falar de mais comandos e abordar algo realmente incrível: como criar nossos próprios comandos :D
Mas fica pra uma próxima!

Até mais!

Abraços