Faça uma captura de tela de um elemento específico de uma página da web no Firefox

Eu gostaria de compartilhar com vocês um truque legal para o Mozilla Firefox que pode aumentar sua produtividade e economizar seu tempo. Enquanto navega na web, às vezes você deseja compartilhar algo com seus amigos, tirando uma captura de tela disso. Mas são necessários vários passos para fazer uma captura de tela de toda a página, salvá-la, recortá-la etc. Neste artigo, veremos como tirar diretamente uma captura de tela de um elemento específico em uma página da web sem usar add-ons.

Quando uma página da web é carregada, o navegador da web cria um modelo de objeto de documento da página. O DOM é construído como uma estrutura de árvore em que cada nó é um objeto que representa uma parte do documento.

Vamos ver como você pode usar isso para capturar apenas um elemento específico em sua captura de tela.

Para faça uma captura de tela de um elemento específico da página da web no Firefox, execute as seguintes etapas:

1. Abra a página desejada no Firefox e clique com o botão direito no elemento que deseja capturar.
2. No menu de contexto, selecione "Inspecionar elemento":
3. A ferramenta de inspeção será aberta. Observe que ele tem um controle de localização atual para os nós da árvore DOM:
4. Lá, você pode clicar com o botão direito em qualquer elemento e escolher Nó de captura de tela no menu de contexto:Isso é exatamente o que precisamos.

A vantagem desse recurso é que ele também captura elementos longos, incluindo a maioria dos elementos que exigem rolagem. No meu caso, esta é a aparência da captura de tela:

Como alternativa, você pode usar o integrado captura de tela comando. Anteriormente, eu escrevi Como fazer uma captura de tela da página aberta no Firefox. No artigo mencionado, usamos o comando "screenshot" embutido do Firefox para capturar a página inteira. A mesma funcionalidade pode ser usada para capturar a tela de um elemento específico na página aberta.

1. Abra o Firefox e pressione Shift + F2 no teclado. O Firefox abrirá um console / linha de comando na parte inferior da tela.
2. Digite o seguinte comando dentro dele:

   captura de tela --seletor "nome"

   Substitua o nome "porção" pelo nome do seletor apropriado. No meu caso, deveria ser

   captura de tela --seletor "# widget-apps> .iconlist> .iconlist-content> ul"

O segundo método é útil para desenvolvedores da web que conhecem o caminho exato do elemento DOM. O usuário médio obviamente preferirá o primeiro método para fazer a captura de tela de um elemento específico da página da web.