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.

shell firefox command-line screenshot Omar Abid
fuente
1
He visto algunas herramientas cli de webkit para tomar capturas de pantalla, pero no recuerdo los nombres.
Rufo El Magufo

Respuestas:

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