Tome una captura de pantalla de página completa con Firefox en la línea de comandos

224

Estoy ejecutando Firefox en un Xvfb en un VPS. Lo que quiero hacer es tomar una captura de pantalla completa de la página.

Puedo redirigir Firefox a una página en particular usando

firefox http://google.com

y tome una captura de pantalla (dentro de X) usando ImageMagick

import root -window output.jpg

El problema es que la mayoría de la página necesita desplazamiento y no puedo saber la altura de antemano.

La otra forma es elegir una altura muy grande (como 4000px) y luego procesar la imagen y eliminar la parte inútil. Pero eso es un procesamiento innecesario.

Encontré muchos complementos de Firefox, pero estoy buscando una solución que pueda programarse usando la línea de comandos de Shell.

Editar: Terminé escribiendo mi propia extensión FireFox para hacer esto.

— Omar Abid
fuente

1

He visto algunas herramientas cli de webkit para tomar capturas de pantalla, pero no recuerdo los nombres.

— Rufo El Magufo

480

El desarrollador Barra de herramientas y GCLI Shift+ F2atajo se retiraron en Firefox versión 60 . Para tomar una captura de pantalla en 60 o más reciente:

presione Ctrl+ Shift+ Kpara abrir la consola del desarrollador ( ⌥ Option+ ⌘ Command+ Ken macOS)
tipo :screenshoto:screenshot --fullpage

Obtenga más información sobre capturas de pantalla y otras funciones

Para versiones de Firefox <60:

Presione Shift+ F2o vaya a Herramientas> Desarrollador web> Barra de herramientas del desarrollador para abrir una línea de comando. Escribir:

screenshot

y presione Entrar para tomar una captura de pantalla.

Para responder completamente la pregunta, incluso puede guardar toda la página, no solo la parte visible de la misma:

screenshot --fullpage

Y para copiar la captura de pantalla al portapapeles, use la --clipboardopción:

screenshot --clipboard --fullpage

Firefox 18 cambia la forma en que se pasan los argumentos a los comandos, debe agregar "-" antes de ellos.

Puede encontrar documentación y la lista completa de comandos aquí .

_{PD. Las capturas de pantalla se guardan en el directorio de descargas de forma predeterminada.}

— enreas
fuente

44

Si solo desea copiar la captura de pantalla en su portapapeles, use la captura de pantalla --clipboard --fullpage

— mbokil

2

Ese comando no funciona en una consola javascript, entonces, ¿hay un enlace para obtener más información sobre esta barra de herramientas? Que mas puedo hacer?

— temblor

55

Solo para su información, también puede seleccionar notas DOM a través del inspector y luego right-click-> screenshot node. Esto es súper útil cuando desea capturar una sección de una página.

— Tom

55

Captura de pantalla de la página completa en el portapapeles - screenshot --clipboard --fullpageCaptura de pantalla de un nodo en particular (por Id) -screenshot --clipboard --selector #elementId

— Mohnish

3

Tuve que usar :screenshot --clipboard --fullpage(cuenta el colon)

— alguien el

134

Actualizar 2018-07-23

Como acabo de señalar en los comentarios, esta pregunta se trataba de obtener una captura de pantalla desde la línea de comandos . Lo siento, acabo de leer sobre eso. Entonces aquí está la respuesta correcta:

A partir de Firefox 57, puede crear una captura de pantalla en modo sin cabeza como este:

firefox -screenshot https://developer.mozilla.com

Lea más en la documentación .

Actualizar 2017-06-15

A partir de Firefox 55, hay capturas de pantalla de Firefox como una alternativa más flexible. A partir de Firefox 57, las capturas de pantalla también pueden capturar una página completa.

Respuesta original

Desde Firefox 32 también hay un botón de captura de pantalla de página completa en las herramientas de desarrollador (F12). Si no está habilitado, vaya a la configuración de herramientas de desarrollador (botón de engranaje) y elija "Tomar una captura de pantalla de página completa" en la sección "Botones de la caja de herramientas disponibles".

barra de herramientas de herramientas de desarrollador fuente: developer.mozilla.org

Por defecto, las capturas de pantalla se guardan en el directorio de descarga. Esto funciona de manera similar a screenshot --fullpageen la barra de herramientas.

— Mouagip
fuente

77

Para aquellos que tienen Firebug abriendo en F12, las herramientas de desarrollador están disponibles con Ctrl + Shift + K o Ctrl + Shift + I. Solo ... por si acaso ... alguien nunca los ha usado antes.

— Kir Kanos

Esos atajos de teclado no funcionan en la Mac. Use Herramientas> Desarrollador web> Herramientas de alternancia. Y sí, el botón de captura de pantalla está deshabilitado de forma predeterminada. Haga clic en el icono de Configuración para habilitar.

— Snowcrash

en Mac, puede abrir las herramientas de desarrollador con cmd+ alt+i

— achairapart

Firefox Screenshots carga capturas de pantalla tomadas a los servidores de Mozilla. No hicieron esto lo suficientemente obvio como para que me diera cuenta de antemano. Afortunadamente, la imagen en mi caso no era demasiado sensible, aunque era interna. Ten cuidado.

— Martillo hermano.

1

De la pregunta: "Encontré muchos complementos de Firefox, pero estoy buscando una solución que pueda programarse usando la línea de comandos de Shell".

— Quentin

9

Terminé codificando una solución personalizada (extensión de Firefox) que hace esto. Creo que cuando lo desarrollé, la línea de comandos mencionada en enreas no estaba allí.

La extensión de Firefox es CmdShots . Es una buena opción si necesita un mayor grado de control sobre el proceso de tomar la captura de pantalla (o si desea hacer algunas modificaciones HTML / JS y procesamiento de imágenes).

Puedes usarlo y abusar de él. Decidí mantenerlo sin licencia, para que puedas jugar con él como quieras.

— Omar Abid
fuente

20

Hmm, eso no es lo que significa "sin licencia": en realidad significa que no das ningún permiso para ningún uso, lo que claramente no es cierto ya que en esa misma oración también dices que está bien usarlo, abusar y jugar con él como tú querer. ¿Quizás quieres algo como el CC0 ?

— SamB

Para esas cosas "sin licencia" prefiero esto: wtfpl.net Establece claramente lo que está permitido sin BS legal.

— kap

@SamB Me topé al azar con tu comentario. Sí, lo sé 3 años después. El problema es que si escribo una licencia, ya complicaré las cosas. El enfoque de NOLICENSE es simplemente rellenar.

— Omar Abid

3

Amigos, no utilicen una licencia personalizada. Sé que las personas tratan de evitar tonterías legales escribiendo su propia licencia, pero terminan haciendo lo contrario, causando dolores de cabeza legales a las personas al tratar de descubrir qué significa realmente la licencia personalizada. Ver choosealicense.com

— Flimm

@SamB: mientras que "sin licencia" no es explícitamente una "licencia oficial", "The Unlicense" en realidad es una licencia, y parece estar bastante cerca de lo que el OP describe como su intención para el uso de su código. Ver: choosealicense.com/licenses/unlicense

— Will Ediger

8

Creo que lo que está buscando es una utilidad que le permita guardar una página completa abierta en su navegador en un archivo png. Lo más probable es que esté buscando una utilidad como commandlineprint2 .

Después de instalar la extensión, solo necesita escribir el comando:

firefox -print http://google.com -printfile ~/foo.png

— Nehal J Wani
fuente

1

Firefox Screenshots es una nueva herramienta que se incluye con Firefox. No es una herramienta de desarrollo, está dirigida a usuarios finales del navegador.

Para tomar una captura de pantalla, haga clic en el menú de acciones de la página en la barra de direcciones y haga clic en "tomar una captura de pantalla". Si luego hace clic en "Guardar página completa", guardará la página completa, desplazándose por usted.

_{(fuente: mozilla.net )}

— Flimm
fuente

3

De la pregunta: "Encontré muchos complementos de Firefox, pero estoy buscando una solución que pueda programarse usando la línea de comandos de Shell".

— Quentin

-1

Puede usar selenium y el controlador web para Firefox.

import selenium.webdriver
import selenium.common

options = selenium.webdriver.firefox.options.Options()
# options.headless = True
with selenium.webdriver.Firefox(options=options) as driver:
    driver.get('http://google.com')
    time.sleep(2)
    root=driver.find_element_by_tag_name('html')
    root.screenshot('whole page screenshot.png')

— Gqqnbig
fuente