10 Firefox Dev Ferramentas de coisas que você talvez não saiba ainda

Eu sou um fã do Browser Dev Tools, a arma secreta de poder para todos os desenvolvedores web.

Sem eles, olharíamos para uma página da web em desespero, tentando descobrir por que os elementos não se alinham, uma imagem não é carregada, e não teríamos a menor ideia em outros cenários muito mais complexos.

Eu recentemente mudei para usar o Firefox para minha navegação diária, e percebi que sabia muito pouco sobre o Firefox Dev Tools. Além disso, percebi o quanto eles melhoraram nos últimos anos, e eu pensei – eles merecem muito mais buzz! Então, aqui está um post que mostra algumas das coisas que você pode fazer com eles, com alguns GIFs agradáveis ??para facilitar a compreensão rápida de cada tópico.

Truques de captura de tela

Tire uma captura de tela de toda a página

Ative o botão de captura de tela nas configurações e pressione-o para criar uma imagem que contenha a captura de tela da página. Ele será salvo na pasta de downloads padrão, usando a largura da página atual.

Tire uma captura de tela de um único nó

Selecione um elemento no Inspetor de Elementos, clique com o botão direito e selecione Nó de Captura :

Remover uma classe de um elemento

Às vezes, um elemento tem várias classes e você não pode descobrir imediatamente qual classe introduz um determinado atributo de estilo. Ao selecionar um elemento e clicar no botão .cls no canto superior direito do painel Regras, você pode ver uma lista de todas as classes e pode facilmente desativá-las / reativá-las.

A partir daí, você também pode adicionar uma nova classe ao elemento:

Arrastar e soltar no painel Elementos

No painel Elementos, você pode arrastar e soltar qualquer elemento HTML e alterar sua posição na página

Referenciar o elemento atualmente selecionado no console

Selecione um nó no painel Elementos e digite $0 no console para referenciá-lo.

Atalhos da API de seletores

Um recurso totalmente interessante do Firefox Dev Tools Console são os atalhos para a API do Selectors:

  • $() é um atalho para document.querySelector()
  • $$() é um atalho para document.querySelectorAll()

Use o valor da última operação no console

Use $_ para referenciar o valor de retorno da operação anterior executada no console

Faça referência a qualquer elemento do inspetor, no console

Clique com o botão direito em qualquer elemento e selecione Usar no console . Ele será atribuído a uma variável temporária.

Depuração de JavaScript

Você pode definir pontos de interrupção em seus arquivos de origem JavaScript no painel Depurador e pode definir qualquer expressão no arquivo JS a ser observado:

Recarregar a página, os pontos de interrupção e as configurações de expressão de exibição são mantidos intactos e o script será interrompido na posição desejada:

Descubra qual fonte é realmente usada

font-family em CSS permite que você defina uma lista de fontes para usar, caso a primeira não seja encontrada, ela volta para a segunda e assim por diante. Mas como você sabe qual fonte é realmente aplicada quando você olha para a página? É o único sublinhado:

Inspecione a grade CSS

CSS Grid é um novo recurso CSS recente e surpreendente.

O Firefox Dev Tools tem um ótimo inspetor que nos ajuda muito ao usar grades:

Se você usar áreas de modelo de grade , poderá exibi-las usando a caixa de seleção "Exibir nomes de áreas":