【Chrome｜網頁長截圖】使用 Chrome 瀏覽器內建的隱藏功能漂亮擷取長網頁

一個長期使用 Chrome 瀏覽器的使用者，應該都接觸過不少關於「長網頁」截圖的套件（Plugins），但結果都是令人失望的，即便依靠各種工具還是無法快速且完整無缺的把長網頁擷取下來，是吧？今天我不死心又搜尋了一次，總算找到非常好的資訊！原來～Chrome 本身就內建這功能了，真是眾裡尋他千百度，驀然回首～那人卻在燈火闌珊處。
由於不少地方都已經有這樣的資訊，我就純當記錄之用，簡單用文字寫下，不再額外截過程圖了，如果你看不懂，可以參考我最底下擺的連結。

█ 注意 █
1.使用此功能必須確保 Chrome 版本在 59 或以上
2.本文僅列出 Windows 系統所需，Mac 系統請自尋

一、使用 Chrome 內建功能擷取電腦上的「長網頁」

電腦長網頁擷取效果圖

⓵ 開啟想要擷取的網頁
⓶ 按下鍵盤上的「Ctrl」+「Shift」+「I」（或只按「F12」也可以）打開「開發人員工具」
建議盡量將除錯介面右縮，免得擷取時擠壓到網頁空間還是會使擷取效果產生位移
⓷ 再按鍵盤上的「Ctrl」+「Shift」+「P」
⓸ 輸入指令「Capture full size screenshot」（片段輸入也會自動出現完整的命令串）
⓹ 最後按下「Enter」就會開始擷取了
由於我這裡大多數的文章都是短篇形式的紀錄文及超級長篇的攻略文，擷取起來不是太短就是長到沒天理，所以只好以首頁做示範圖，請多見諒。

二、使用 Chrome 內建功能擷取電腦瀏覽器「目前的段落畫面」

電腦上目前段落效果圖

⓵ 開啟想要擷取的網頁
⓶ 按下鍵盤上的「Ctrl」+「Shift」+「I」（或只按「F12」也可以）打開「開發人員工具」
建議盡量將除錯介面右縮，免得擷取時擠壓到網頁空間還是會使擷取效果產生位移
⓷ 再按鍵盤上的「Ctrl」+「Shift」+「P」
⓸ 輸入指令「Capture screenshot」（片段輸入也會自動出現完整的命令串）
⓹ 最後按下「Enter」就會開始擷取了

三、使用 Chrome 內建功能模擬並擷取手機上的「長網頁」

模擬手機畫面的長網頁效果圖

⓵ 開啟想要擷取的網頁
⓶ 按下鍵盤上的「Ctrl」+「Shift」+「I」（或只按「F12」也可以）打開「開發人員工具」
⓷ 再按鍵盤上的「Ctrl」+「Shift」+「M」（模擬行動裝置瀏覽畫面，若需要恢復電腦瀏覽狀態再按一次「Ctrl」+「Shift」+「M」就可以了）
⓸ 再按鍵盤上的「Ctrl」+「Shift」+「P」
⓹ 輸入指令「Capture full size screenshot」（片段輸入也會自動出現完整的命令串）
⓺ 最後按下「Enter」就會開始擷取了

四、使用 Chrome 內建功能擷取電腦上的「指定的網頁片段」
這個功能一般應該很少會用到，實用性不高，但好奇可以玩玩看囉！

指定畫面的效果圖

⓵ 開啟想要擷取的網頁
⓶ 按下鍵盤上的「Ctrl」+「Shift」+「I」（或只按「F12」也可以）打開「開發人員工具」
⓷ 再按鍵盤上的「Ctrl」+「Shift」+「C」（移動滑鼠選取想要擷取的部分）
⓸ 再按鍵盤上的「Ctrl」+「Shift」+「P」
⓹ 輸入指令「Capture node screenshot」（片段輸入也會自動出現完整的命令串）
⓺ 最後按下「Enter」就會開始擷取了

參考文章
1.阿達-免外掛 Chrome 內建功能即可實現高解析網頁 長截圖
2.利用 Chrome 原生工具進行網頁長截圖

⇩　分　享　本　文　⇩