コマンドラインでFirefoxを使用してページ全体のスクリーンショットを撮る


224

VPSのXvfbでFirefoxを実行しています。私がしたいことは、ページのスクリーンショット全体を撮ることです。

Firefoxを使用して特定のページにリダイレクトできます

firefox http://google.com

ImageMagickを使用してスクリーンショット(X内)を撮ります

import root -window output.jpg

問題は、ほとんどのページでスクロールが必要で、事前に高さがわからないことです。

もう1つの方法は、非常に大きな高さ(4000pxなど)を選択し、画像を処理して不要な部分を削除することです。しかし、それは不必要な処理です。

多くのFirefoxアドオンを見つけましたが、シェルコマンドラインを使用してプログラムできるソリューションを探しています。

編集:私はこれを行うために自分のFireFox拡張機能を作成することになりました。


1
スクリーンショットを撮るためのwebkit cliツールをいくつか見ましたが、名前を覚えていません。
Rufo El Magufo 2013

回答:


480

開発者ツールバーGCLIとShift+ F2ショートカットがFirefoxバージョン60で除去しました。60以降でスクリーンショットを撮るには:

  • Ctrl+ Shift+ Kを押して開発者コンソールを開きます(macOSでは⌥ Option+ ⌘ Command+ K
  • タイプ:screenshotまたは:screenshot --fullpage

スクリーンショットやその他の機能に関する詳細をご覧ください


Firefoxバージョン<60の場合:

Shift+を押すF2か、[ ツール]> [ウェブ開発者]> [開発者ツールバー]に移動して、コマンドラインを開きます。書く:

screenshot

Enterキーを押しますスクリーンショットを撮るためにます。

質問に完全に答えるために、ページの表示部分だけでなく、ページ全体を保存することもできます。

screenshot --fullpage

スクリーンショットをクリップボードにコピーするには、--clipboardオプションを使用します:

screenshot --clipboard --fullpage

Firefox 18、引数がコマンドに渡される方法が変更されています。その前に「-」を追加する必要があります。

ここに、いくつかのドキュメントとコマンドの完全なリストがあります。

PS。スクリーンショットは、デフォルトでダウンロードディレクトリに保存されます。


4
スクリーンショットをクリップボードに直接コピーしたい場合は、スクリーンショットを使用してください--clipboard --fullpage
mbokil

2
このコマンドはJavaScriptコンソールでは機能しないので、このツールバーに関する詳細情報へのリンクはありますか?他に何ができますか?
2014

5
参考までに、インスペクタを使用してDOMノートを選択してから、right-click> を選択することもできますscreenshot node。これは、ページのセクションのスクリーンショットを撮るときに非常に役立ちます。
Tom

5
クリップボードへの全ページのスクリーンショット- screenshot --clipboard --fullpage特定のノードのスクリーンショット(IDによる)screenshot --clipboard --selector #elementId
Mohnish

3
私は使用する必要がありました:screenshot --clipboard --fullpage(コロンを気にしてください)
18

134

2018-07-23を更新

コメントで指摘したように、この質問はコマンドラインからスクリーンショット取得することに関するものでした。すみません、読んだだけです。だからここに正しい答えがあります:

Firefox 57以降では、次のようなヘッドレスモードでスクリーンショットを作成できます。

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

詳細については、ドキュメントをご覧ください。

2017年6月15日更新

Firefox 55以降、より柔軟な代替手段としてFirefoxスクリーンショットがあります。Firefox 57以降、スクリーンショットでもページ全体をキャプチャできます。

元の答え

Firefox 32以降、開発者ツール(F12)に全ページのスクリーンショットボタンもあります。有効になっていない場合は、開発ツールの設定(ギアボタン)に移動し、[利用可能なツールボックスボタン]セクションで[全画面のスクリーンショットを撮る]を選択します。

開発ツールツールバー ソース:developer.mozilla.org

デフォルトでは、スクリーンショットはダウンロードディレクトリに保存されます。これscreenshot --fullpageは、ツールバーと同様に機能します。


7
F12でFirebugを開いている場合、開発者ツールはCtrl + Shift + KまたはCtrl + Shift + Iで利用できます。ただ...念のために...誰かが以前にそれらを使用したことがない。
Kir Kanos 2014年

これらのキーボードショートカットはMacでは機能しません。[ツール]> [Web開発]> [ツールの切り替え]を使用します。そして、はい、スクリーンショットボタンデフォルト無効になっています。設定アイコンをクリックして有効にします。
Snowcrash 2015年

Macでは、cmd++ alt+i
achairapartで

Firefoxスクリーンショットは、Mozillaのサーバーに取得したスクリーンショットをアップロードします。彼らはこれを私が事前に気付くのに十分なほど不快にさせませんでした。幸い、私の場合の画像は内部のものでしたが、それほど敏感ではありませんでした。警告されます。
Hammer Bro。

1
「Firefoxのアドオンをたくさん見つけましたが、シェルコマンドラインを使用してプログラムできるソリューションを探しています。」
クエンティン

9

これを行うカスタムソリューション(Firefox拡張機能)をコーディングしてしまいました。私が開発したときには、enreasで言及されているコマンドラインは存在していなかったと思います。

Firefox拡張機能はCmdShotsです。です。スクリーンショットを撮るプロセスをより詳細に制御する必要がある場合(または、HTML / JSの変更と画像処理を行う場合)は、このオプションが適しています。

あなたはそれを使用し、乱用することができます。私はそれを無免許に保つことに決めたので、あなたは好きなようにそれを自由に遊ぶことができます。


20
うーん、それは「ライセンスなし」が意味するものではありません。それは実際には、いかなる使用の許可も与えないことを意味します。そのまさにその文章では、使用、乱用、そしてあなたと同じようにそれをすることも許されると言っているので、明らかにそうではありません。欲しいです。おそらく、CC0のようなものが必要ですか?
SamB 2014

「ライセンスされていない」ものについては、私はこれを好みます:wtfpl.net法的なBSなしで何が許可されるかを明確に示しています。
KAP

@SamB私はあなたのコメントにランダムにつまずきました。ええ、私は3年後知っています。問題は、私がライセンスを書くと、すでに複雑なことです。NOLICENSEのアプローチは、単純なものです。
Omar Abid 2017

3
カスタムライセンスを使用しないでください。自分のライセンスを書いて法的なナンセンスを避けようとする人がいることは知っていますが、カスタムライセンスが実際に何を意味するのかを理解しようとすると、逆に法的な頭痛の種を引き起こします。choosealicense.comを参照してください
Flimm 2018

@SamB-「unlicensed」は明示的に「公式ライセンス」ではありませんが、「The Unlicense」は実際にライセンスであり、OPがコードの使用目的として記述しているものにかなり近いようです。参照:choosealicense.com/licenses/unlicense
Will Ediger

8

私は、あなたが探していることは、あなたが保存することができるユーティリティだと思う完全な PNGファイルにブラウザで開いたページを。おそらくあなたはcommandlineprint2のようなユーティリティを探しているでしょう。

拡張機能をインストールしたら、次のコマンドを入力するだけです。

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

1

Firefoxスクリーンショットは、Firefoxに付属する新しいツールです。これは開発者ツールではなく、ブラウザのエンドユーザーを対象としています。

スクリーンショットを撮るには、アドレスバーのページアクションメニューをクリックし、[スクリーンショットを撮る]をクリックします。次に「ページ全体を保存」をクリックすると、スクロールしてページ全体が保存されます。


(ソース:mozilla.net


3
「Firefoxのアドオンをたくさん見つけましたが、シェルコマンドラインを使用してプログラムできるソリューションを探しています。」
クエンティン

-1

Firefox用のセレンとWebドライバーを使用できます。

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')
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.