如何在 Firefox 中截取包含網頁內滾動元素的螢幕截圖？

Question

我需要截取整個網頁的螢幕截圖。訣竅是我需要螢幕截圖來包含不適合螢幕的單一元素的全部內容。

它是一個單列表，由於其高度而具有滾動條。它不是 IFRAME（在其自己的選項卡中加載很簡單）。

該列包含格式化文字和一些小圖像。

對於滾動的長網頁，執行此任務很簡單。但是，當它在滾動的頁面中包含單一元素時，如何實現？

需要明確的是，我需要捕獲整個頁面，而不僅僅是元素本身。

我想在 Windows 上使用 Firefox 來完成此任務。

Answer 1

我的建議是使用Firefox 的內建功能它允許你截取單一 DOM 元素的螢幕截圖。

只需彈出開發者工具→找到元素→右鍵單擊並截圖

它在我的內部網站之一上不起作用，所以不能說它適用於所有人。

OP編輯後更新：

如果您打算記錄整個頁面以及整個 DOM 元素內容，如下所示，您應該即時編輯 DOM 元素的高度但…

它將把大量 DOM 元素推出視口和螢幕截圖，否則任何其他工具都無法捕捉它，我認為這超出了您的目的。

閱讀以下來自https://en.wikipedia.org/wiki/Screenshot

螢幕截圖、螢幕截圖、螢幕截圖、螢幕轉儲或螢幕抓圖是由人拍攝的影像，用於記錄使用中的監視器、電視或其他視覺輸出裝置上顯示的可見項目。

如果我真的必須按照你的方式去做，我要么創建一個 GIF，要么截取兩個屏幕截圖，一個完整的頁面，另一個僅 DOM 元素的屏幕截圖合併為一個。

Answer 2

2021 編輯

工具列已從 FF 中刪除。但您仍然可以透過在控制台中鍵入前綴為:.的命令來存取這些命令。所以對於螢幕截圖使用

:screenshot --fullpage fullpage.png

或者

:screenshot --selector #hot-network-questions fullpage.png

舊答案

您可以使用開發人員工具列中的螢幕截圖命令：

1. 按Shift+F2開啟工具列或從 Web 開發人員工具選單中選擇它。

2. 在工具列中，鍵入命令screenshot --fullpage fullpage.png。

若要擷取單一元素，您可以使用其 css 選擇器和 --selector 標誌，例如

screenshot --selector #hot-network-questions

會給你下面的圖片

Answer 3

使用火狐瀏覽器響應式設計模式，將寬度設定為正常值，將高度設定為足以包含整個頁面。然後點擊螢幕截圖按鈕（相機圖示）。

Answer 4

我用Screenpresso。它允許您拍攝滾動螢幕截圖。基本上，您拍攝螢幕截圖，向下滾動並拍攝另一個螢幕截圖，依此類推，然後 Screenpresso 將它們縫合在一起。 Screenpresso 也是免費的。

僅供參考，捲動截圖的快速鍵是WindowsKey+Shift+PrintScreen。然後，您需要點擊要捲動的視窗。當您到達下一部分進行螢幕截圖時，請右鍵單擊，向下滾動，右鍵單擊等等。完成後，左鍵單擊，它們就會縫合在一起。確保每個螢幕截圖都有一些重疊，以便拼接過程更好。