Faites une capture d'écran pleine page avec Firefox en ligne de commande

224

J'utilise Firefox sur un Xvfb dans un VPS. Ce que je veux faire, c'est faire une capture d'écran pleine page de la page.

Je peux rediriger Firefox vers une page particulière en utilisant

firefox http://google.com

et prendre une capture d'écran (à l'intérieur de X) en utilisant ImageMagick

import root -window output.jpg

Le problème est que la plupart de la page doit défiler et je ne peux pas connaître la hauteur à l'avance.

L'autre façon est de choisir une très grande hauteur (comme 4000px), puis de traiter l'image et de supprimer la partie inutile. Mais c'est un traitement inutile.

J'ai trouvé de nombreux modules complémentaires pour Firefox, mais je suis à la recherche d'une solution qui peut être programmée à l'aide de la ligne de commande Shell.

Edit: j'ai fini par écrire ma propre extension FireFox pour ce faire.

shell firefox command-line screenshot Omar Abid
la source
1
J'ai vu quelques outils webkit cli pour prendre des captures d'écran mais je ne me souviens pas des noms.
Rufo El Magufo

Réponses:

480

La barre d'outils du développeur GCLI et le raccourci Shift+ F2ont été supprimés dans Firefox version 60 . Pour prendre une capture d'écran en 60 ou plus récent:

  • appuyez sur Ctrl+ Shift+ Kpour ouvrir la console développeur ( ⌥ Option+ ⌘ Command+ Ksur macOS)
  • tapez :screenshotou:screenshot --fullpage

En savoir plus sur les captures d'écran et autres fonctionnalités

Pour les versions de Firefox <60:

Appuyez sur Shift+ F2ou accédez à Outils> Développeur Web> Barre d' outils développeur pour ouvrir une ligne de commande. Écrire:

screenshot

et appuyez sur Entrée pour prendre une capture d'écran.

Pour répondre pleinement à la question, vous pouvez même enregistrer la page entière, pas seulement la partie visible:

screenshot --fullpage

Et pour copier la capture d'écran dans le presse-papiers, utilisez l' --clipboardoption:

screenshot --clipboard --fullpage

Firefox 18 change la façon dont les arguments sont passés aux commandes, vous devez ajouter "-" avant eux.

Vous pouvez trouver de la documentation et la liste complète des commandes ici .

PS. Les captures d'écran sont enregistrées par défaut dans le répertoire des téléchargements .

enreas
la source
4
Si vous voulez simplement copier la capture d'écran dans votre presse-papiers, utilisez directement screenshot --clipboard --fullpage
mbokil
2
Cette commande ne fonctionne pas dans une console javascript, y a-t-il donc un lien vers plus d'informations sur cette barre d'outils? Que puis-je faire d'autre?
tremby
5
Pour info, vous pouvez également sélectionner des notes DOM via l'inspecteur, puis right-click-> screenshot node. Ceci est très utile lorsque vous souhaitez faire une capture d'écran d'une section d'une page.
Tom
5
screenshot --clipboard --fullpageCapture d'écran pleine page dans le presse-papiers - Capture d'écran d'un nœud particulier (par Id) -screenshot --clipboard --selector #elementId
Mohnish
3
Je devais utiliser :screenshot --clipboard --fullpage(attention aux deux points)
quelqu'un
134

Mise à jour 2018-07-23

Comme cela vient d'être souligné dans les commentaires, cette question concernait l'obtention d'une capture d' écran à partir de la ligne de commande . Désolé, je viens de relire cela. Voici donc la bonne réponse:

Depuis Firefox 57, vous pouvez créer une capture d'écran en mode sans tête comme ceci:

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

En savoir plus dans la documentation .

Mise à jour 2017-06-15

À partir de Firefox 55, il existe des captures d' écran de Firefox comme alternative plus flexible. À partir de Firefox 57, les captures d'écran peuvent également capturer une page entière.

Réponse originale

Depuis Firefox 32, il existe également un bouton de capture d'écran pleine page dans les outils de développement (F12). S'il n'est pas activé, accédez aux paramètres des outils de développement (bouton d'engrenage) et choisissez «Prendre une capture d'écran pleine page» dans la section «Boutons de la boîte à outils disponibles».

barre d'outils des outils de développement source: developer.mozilla.org

Par défaut, les captures d'écran sont enregistrées dans le répertoire de téléchargement. Cela fonctionne de la même manière que screenshot --fullpagedans la barre d'outils.

Mouagip
la source
7
Pour ceux qui ont Firebug ouvrant sur F12, les outils de développement sont disponibles avec Ctrl + Shift + K ou Ctrl + Shift + I. Juste ... au cas o someone quelqu'un ne les aurait jamais utilisés auparavant.
Kir Kanos
Ces raccourcis clavier ne fonctionnent pas sur le Mac. Utilisez Outils> Développeur Web> Basculer les outils. Et, oui, le bouton de capture d'écran est désactivé par défaut. Cliquez sur l'icône Paramètres pour l'activer.
Snowcrash
sur Mac, vous pouvez ouvrir les outils de développement avec cmd+ alt+i
achairapart
Firefox Screenshots télécharge des captures d'écran prises sur les serveurs de Mozilla. Ils n'ont pas rendu cela assez évident pour que je le remarque à l'avance. Heureusement, l'image dans mon cas n'était pas trop sensible, bien qu'elle soit interne. Être averti.
Marteau Bro.
1
De la question: "J'ai trouvé de nombreux modules complémentaires pour Firefox, mais je recherche une solution qui peut être programmée à l'aide de la ligne de commande Shell."
Quentin
9

J'ai fini par coder une solution personnalisée (extension Firefox) qui le fait. Je pense qu'au moment où je l'ai développé, la ligne de commande mentionnée dans enreas n'était pas là.

L'extension Firefox est CmdShots . C'est une bonne option si vous avez besoin d'un contrôle plus fin du processus de capture d'écran (ou si vous souhaitez effectuer des modifications HTML / JS et un traitement d'image).

Vous pouvez l'utiliser et en abuser. J'ai décidé de le garder sans licence, vous êtes donc libre de jouer avec comme vous le souhaitez.

Omar Abid
la source
20
Hmm, ce n'est pas ce que signifie "sans licence": cela signifie en fait que vous ne donnez aucune autorisation pour toute utilisation, ce qui n'est clairement pas vrai, car dans cette même phrase, vous dites également que vous pouvez l'utiliser, abuser et jouer avec comme vous vouloir. Peut-être que vous voulez quelque chose comme le CC0 ?
SamB
Pour ces choses "sans licence", je préfère ceci: wtfpl.net Il indique clairement ce qui est autorisé sans BS légal.
kap
@SamB Je suis tombé au hasard sur votre commentaire. Ouais, je sais 3 ans plus tard. Le problème est que si j'écris une licence, j'ai déjà compliqué les choses. L'approche NOLICENSE consiste à simplement bourrer.
Omar Abid
3
Veuillez ne pas utiliser de licence personnalisée. Je sais que les gens essaient d'éviter les bêtises juridiques en écrivant leur propre licence, mais ils finissent par faire le contraire, provoquant des maux de tête légaux pour les gens qui essaient de comprendre ce que signifie réellement la licence personnalisée. Voir choosealicense.com
Flimm
@SamB - alors que "sans licence" n'est pas explicitement une "licence officielle", "The Unlicense" est en fait une licence, et semble être assez proche de ce que l'OP décrit comme son intention d'utiliser son code. Voir: choosealicense.com/licenses/unlicense
Will Ediger
8

Je pense que ce que vous cherchez est un utilitaire qui vous permet d'enregistrer une page complète ouverte dans votre navigateur dans un fichier png. Vous recherchez probablement un utilitaire comme commandlineprint2 .

Après avoir installé l'extension, il vous suffit de taper la commande:

firefox -print http://google.com -printfile ~/foo.png
Nehal J Wani
la source
1

Firefox Screenshots est un nouvel outil fourni avec Firefox. Ce n'est pas un outil de développement, il est destiné aux utilisateurs finaux du navigateur.

Pour prendre une capture d'écran, cliquez sur le menu des actions de la page dans la barre d'adresse, puis cliquez sur "prendre une capture d'écran". Si vous cliquez ensuite sur "Enregistrer la page entière", il enregistrera la page entière en défilant pour vous.


(source: mozilla.net )

Flimm
la source
3
De la question: "J'ai trouvé de nombreux modules complémentaires pour Firefox, mais je recherche une solution qui peut être programmée à l'aide de la ligne de commande Shell."
Quentin
-1

Vous pouvez utiliser le sélénium et le pilote Web pour 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
la source