Convenhamos que nós, desenvolvedores front-end, teríamos uma vida bem triste se não existisse o dev tools nos navegadores; nosso grande aliado no dia a dia. Olharíamos para uma página web sem saber por que uma tal imagem não é carregada, os elementos não se alinham, uma função não é chamada, entre outras coisas mais complexas; e não teríamos a menor ideia do que está acontecendo.

Eu, particularmente, sempre gostei muito do Chrome Dev Tools, porém, com as atualizações recentes do Firefox, admito que fiquei impressionada com a quantidade de recursos escondidos no Firefox Dev Tools e comecei a usá-lo. Acredito que você irá gostar bastante também.

Agora sem mais delongas, conheça as 10 funcionalidades mais interessantes do Firefox e decida se realmente vale a pena trocá-lo pelo Chrome na sua vida de desenvolvedor.

1 – Captura de tela: é possível ativar o botão de captura de tela nas configurações do Firefox Dev Tools e pressionar o botão com o símbolo de câmara que irá ser ativado ao lado do ícone de configurações, para criar uma imagem que contenha a captura da tela. A imagem será salva na pasta de downloads padrão no seu computador, usando a largura na página atual.

2 – Capture somente o elemento selecionado: selecione o elemento que queira capturar, clique sobre ele com o botão direito e selecione a opção Screenshot Node. Após isso, clique no botão com o símbolo de câmara. A imagem criada também será salva na pasta de downloads padrão.

3 – Remova ou adicione uma classe diretamente no elemento inspecionado: ao selecionar o elemento, clique no botão .cls no canto superior direito do painel Rules. Você verá a lista de todas as classes que o elemento contém, poderá desativá-las e ativá-las facilmente, e visualizar qual classe está introduzindo um determinado atributo ao estilo.

Classe ativa:

Classe desativada:

4 – Arraste e solte elementos selecionados no painel de Elementos: é possível arrastar e soltar qualquer elemento HTML e alterar a sua posição na página, no próprio painel de Elementos.

5 – Referencie elementos selecionados diretamente no console: depois de selecionar um elemento no painel de Elementos, digite $0 no console para referenciá-lo.

6 – Atalho para a API de seletores: os atalhos para a API de seletores, são:

$( ) -> atalho para document.queySelector( )
$( ) -> atalho para document.querySelectorAll( )

7 – Use o valor da última operação no console: para referenciar o valor de retorno da operação anterior executada no console, digite $_:

Você poderá também fazer referência a qualquer elemento no console; basta selecionar o elemento, clicar com o botão direito e escolher a opção: UseinConsole. O elemento será atribuído a uma variável temporária.

8 – Depuração de JavaScript: é possível definir pontos de interrupção nos arquivos JS no painel Debugger e definir qualquer expressão JS a ser observada.

Quando a página for recarregada, os pontos de interrupção e as configurações de expressão de exibição são mantidas intactas e o script será interrompido na posição desejada.

9 – Descubra qual fonte é usada: no font-family podemos definir uma lista de fontes para ser usada,  e caso a primeira definida não seja encontrada, ela usa a segunda, e assim por diante. Para saber exatamente qual fonte foi aplicada na página, repare na fonte sublinhada na página de Rules.

10 – Inspecione a CSS grid: é possível inspecionar o novo recurso do CSS de uma forma bem interessante. Selecionando o container da grid e indo ao painel Layout, é possível ver o grid montado e inspecionar cada elemento separadamente:

Essas são somente as 10 funcionalidades mais interessantes do Firefox Dev Tools. E ai? O que achou? Vale a pena começar a usar o Firefox no seu dia a dia de desenvolvedor? Nos conte nos comentários.