無需軟件，教你用 Chrome 原生工具給網頁長截圖

一般咱們會使用系統的截圖工具或者瀏覽器擴展給網頁截圖，然而實際上Chrome和Safari都已經內置了網頁截圖功能，並且支持長圖效果。

雖然這個方法也不是完美的，但也是一個觸手可得的方案，讓你不借助額外工具截圖。

打開檢查工具

按下F12會彈出開發者工具。

選擇命令

而後按下快捷鍵⌘Command + ⇧Shift + P(Windows爲Ctrl + Shift + P)，在輸入框輸入screenshot便可看到如下幾個選項：

• Capture area screenshot - 截取選擇部分區域截圖
• Capture full size screenshot - 網頁長截圖
• Capture node screenshot - 截取指定節點截圖
• Capture screenshot - 截取可視區域截圖

截圖默認會放到瀏覽器下載目錄中。

當在檢查工具裏點擊右鍵時其實也能看到截圖功能，不過目前只有Capture node screenshot，但願之後能支持更多截圖功能。

手機端截圖

此外，你還能截取手機效果的長圖，首先按下快捷鍵⌘Command + ⇧Shift + M(Windows爲Ctrl + Shift + M)進入手機端瀏覽模式。

也能夠點擊下面按鈕切換模式：

而後按照前文的截圖命令，便可生成你想要的手機長圖。

提示：瀏覽器也在附近菜單添加了選項，見下圖紅框位置。

另外這裏支持常見的多種設備訪問效果，也能夠自定義其餘設備尺寸。

贈送小技巧：關於 macOS 截圖快捷鍵

全屏截圖

⇧Shift + ⌘Command + 3

選定區域截圖

⇧Shift + ⌘Command + 4

拖移十字線

以選擇要捕捉的屏幕區域。要移動所選區域，請在拖移時按住空格鍵。要取消拍攝截屏，請按下 Esc 鍵。

捕捉窗口或菜單

⇧Shift + ⌘Command + 4 + 空格

1. 先按⌘Command + ⇧Shift + 4，而後放開
2. 接着再按空格鍵
3. 要去除窗口陰影效果，請在點按時按 ⌥Option 不放
4. 點擊想要截圖的窗口

在 macOS Mojave 或更高版本中，還能夠經過「截屏」App 來設定計時器以及選取截屏的存儲位置。要打開這個 App，請同時按住如下三個按鍵：Shift、Command 和 5。

關於「截屏」App和Windows上截圖快捷鍵的介紹，敬請期待下篇文章。

文章首發：

無需軟件，教你用 Chrome 原生工具給網頁長截圖