Tomar una captura de pantalla de un elemento específico de la página web en Firefox

Me gustaría compartir con ustedes un truco genial para Mozilla Firefox que puede aumentar su productividad y ahorrar su tiempo. Mientras navega por la web, a veces desea compartir algo con sus amigos tomando una captura de pantalla. Pero se necesitan varios pasos para tomar una captura de pantalla de toda la página, guardarla, recortarla, etc. En este artículo, veremos cómo tomar directamente una captura de pantalla de un elemento específico en una página web sin usar complementos.

Cuando se carga una página web, su navegador web crea un modelo de objetos de documento de la página. El DOM se construye como una estructura de árbol en la que cada nodo es un objeto que representa una parte del documento.

Veamos cómo puede usar esto para capturar solo un elemento específico en su captura de pantalla.

Para tomar una captura de pantalla de un elemento específico de la página web en Firefox, siga los siguientes pasos:

1. Abra la página deseada en Firefox y haga clic derecho en el elemento que desea capturar.
2. En el menú contextual, seleccione "Inspeccionar elemento":
3. Se abrirá la herramienta del inspector. Tenga en cuenta que tiene un control de ruta de navegación para los nodos del árbol DOM:
4. Allí, puede hacer clic derecho en cualquier elemento y elegir Nodo de captura de pantalla desde el menú contextual:Esto es exactamente lo que necesitamos.

Lo mejor de esta función es que también captura elementos largos, incluida la mayoría de los elementos que requieren desplazamiento. En mi caso, así es como se ve la captura de pantalla:

Alternativamente, puede utilizar el integrado captura de pantalla mando. Antes, escribí Cómo tomar una captura de pantalla de la página abierta en Firefox. En el artículo mencionado, usamos el comando integrado "captura de pantalla" de Firefox para capturar toda la página. La misma funcionalidad se puede utilizar para hacer una captura de pantalla de un elemento específico en la página abierta.

1. Abre Firefox y presiona Mayús + F2 en el teclado. Firefox abrirá una consola / línea de comando en la parte inferior de la pantalla.
2. Escriba el siguiente comando dentro de él:

   captura de pantalla --selector "nombre"

   Reemplace el nombre "porción" con el nombre del selector apropiado. En mi caso, debería ser

   captura de pantalla --selector "# widget-apps> .iconlist> .iconlist-content> ul"

El segundo método es útil para los desarrolladores web que conocen la ruta exacta del elemento DOM. El usuario promedio obviamente preferirá el primer método para tomar la captura de pantalla de un elemento específico de la página web.