Chrome下多屏、長頁面或者元素截圖

elvisxiao發表於2019-01-31

要想使用截圖功能,你需要首先確保 Chrome 已升級至 59 或更高版本。在想要截圖的網頁中,首先按下 Command + Option + I(Windows 為 F12)快捷鍵(或者右鍵-> 檢查),召喚出除錯介面。

高清滾動螢幕截圖:

隨後,按下 Command + Shift + P(Windows 為 Ctrl + Shift + P),輸入命令 Capture full size screenshot(只輸前幾個字母就能找到),敲下回車,Chrome 就會自動擷取整個網頁內容並儲存至本地。由於是渲染引擎直接輸出,其比普通擴充套件速度更快,解析度也更高。

模擬移動裝置截圖:

除了普通長截圖以外,你還可以利用這一功能擷取手機版網頁長圖。只需要按下 Command + Shift + M (Windows 為 Ctrl + Shift + M)模擬移動裝置,再按剛才的方法執行命令就可以了。在頂部的工具欄中,你可以選擇要模擬的裝置和解析度等設定。

指定區域(div)截圖:

如果你想準確擷取網頁的某一部分,可以按下 Command + Shift + C(Windows 為 Ctrl + Shift + C),選中你要擷取的元素。選中想要的部分後,再執行 Capture node screenshot 命令,一張完美的區域截圖就誕生了。

相關文章