chrome網頁長截圖(谷歌瀏覽器怎麼擷取網頁長圖)
Chrome 瀏覽器強大的地方之一在於支援相當豐富的擴充套件,碰到網頁截圖的情況,Awesome Screenshot、Nimbus Screenshot等已經是大家熟知的截圖擴充套件應用,而 Chrome 更吸引人的地方在於,產品本身保持簡潔,同時也內建了實用的功能,同樣使用者無需安裝任何擴充套件的前提下,利用 Chrome 原生工具也可以實現網頁截圖效果。
Chrome 原生的截圖功能隱藏在開發者工具中,Windows 平臺按下 F12
快速調出開發者除錯工具介面(macOS 系統快捷鍵為⌘Command ⌥Option I
)
接著按下 Ctrl Shift P
(macOS 版為⌘Command ⇧Shift P
)轉至搜尋命令工具條,或者游標移動至工具條按鈕 ┊,選擇Run command
,下面只需要在命令工具的輸入框中輸入對應的命令即可實現不同的截圖效果。
命令 | 功能 |
---|---|
Capture full size screenshot | 網頁長截圖 |
Capture screenshot | 擷取網頁可視區域 |
Capture area screenshot | 擷取選擇部分割槽域 |
Capture node screenshot | 擷取手機版網頁長圖 |
網頁長截圖。輸入命令Capture full size screenshot
實現整張網頁長截圖,Chrome 會自動將整個網頁內容擷取並儲存至本地電腦,整個擷取速度和效果上都有著不錯的表現。
擷取網頁可視區域。輸入命令Capture screenshot
將當前網頁顯示的區域自動截圖並儲存到本地。
擷取選擇部分割槽域。輸入命令Capture area screenshot
將擷取由使用者選擇的部分割槽域。
擷取選擇元素的內容。輸入命令Capture node screenshot
將擷取網頁中選定元素的內容。這一截圖命令特別之處在於,幫助使用者準確地擷取網頁中特定元素的內容,首先使用者選擇網頁中某個擷取元素,比如某張圖片、某個邊欄內容等,接著再執行Capture node screenshot
,這樣可以減少手動選擇截圖時的錯誤率。
最後,通過 Chrome 模擬移動裝置的功能,結合前面整張網頁長截圖的命令,即可生成一張不錯的手機版網頁長圖。首先選擇開發者工具條移動裝置的按鈕(Windows 系統快捷鍵 Ctrl Shift M
)開啟模擬裝置功能,Chrome 內建了多個裝置和解析度設定選項,接著輸入Capture screenshot
命令自動輸出一張手機版網頁的長截圖,下一步使用套殼工具就可以輸出一張美觀的展示圖。