想要截圖長網頁?原來用 Chrome 內建工具就可以辦到,免安裝任何軟體!

有時候因為工作上的需要會要把整個網頁擷取成一張圖檔,例如,上了新網頁要放到報告中,或是要把預覽網頁截圖下來給合作夥伴看…等,以往都得要額外安裝軟體,最近發現原來 Chrome 就內建這種功能了,真是太方便啦!

不過這功能的路徑藏得有點深,一般情況下應該是找不到,但其實很簡單,跟著宅爸做一次就會了。

🗣 寫這篇文章時所用的 Chrome 版本為 85.0.4183.102 (正式版本)。

使用教學

步驟一:打開 Chrome 的開發人員工具

有兩種方法:

  1. 點右上角的海帶條打開選單 → 點「更多工具」 → 點「開發人員工具」。
  2. Window 可直接按快捷鍵 Ctrl + Shift + I 或直接按 F12(我手邊沒 Mac 可以試)
開啟「開發人員工具」的步驟

步驟二:打開 device toolbar 面板

一樣有兩種方法:

  1. 點開發者工具面板左上角左邊數來第二個 Icon。
  2. Window 可按快捷鍵 Ctrl + Shift + M
開啟「device tool」的步驟

步驟三:設定解析度

在 device toolbar 中,可設定要用哪種裝置的螢幕解析度來截圖,內建已經有一些手機型號,也包含 iPad,若沒有中意的裝置,可以按裝置選單最下方的 Edit 去新增。

我通常是直接選 Responsive,然後手動設定長寬,也可以直接用滑鼠拉右下角的截角去快速調整。

解析度右邊可以設定網頁顯示比例,但若沒特別需求不必去動它。

調整截圖所模擬的螢幕解析度

步驟四:截圖

點 device toolbar 面板右上角海帶條打開選單 → 點「 Capture full size screenshot」即可產生圖檔囉!

按下去就大功告成囉!

常見問題

截下來的圖檔放在哪裡?

就存放在你 Chrome 所設定的下載位置,可以去「設定」➝「進階」➝「下載」➝「位置」做變更。