實用小技巧---如何給全部網頁截圖

相信大家在平時學習和工作的時候，都少不了要對網頁截圖。可是，如果使用一般傳統的截圖方法：QQ截圖或者微信截圖，很難做到對一個網頁的全部頁面截圖。如下圖：

因爲這些截圖方法，只能對電腦屏幕現在展示出來的內容截圖。所以，今天我就來給大家分享一個：給全部網頁截圖的方法。

方便又快捷。

理論學習

我們使用谷歌瀏覽器，來做全網頁截圖的工具。接下來，我們來選取我們截圖目標網頁：

http://peekpa.com/detail/202006306403/

如果單獨截屏的話，只能一張一張的截圖：

如果想要截整張網頁，請記住以下步驟：

1. 打開開發者工具；
2. 按Shift + Ctrl + P 或者 Shift + Command + P，進入輸入命令頁面；
3. 輸入screenshot即可。

接下來，我們通過實戰來演示一下怎麼實戰操作。

實戰演練

我們的目標網頁地址：

http://peekpa.com/detail/202006306403/

第一步，我們打開開發者工具。

這裏有兩種方法可以打開谷歌瀏覽器的開發者工具：

1. 通過頁面頂端右側的菜單按鈕 -> 更多工具 -> 開發者工具路徑打開：

2. 按快捷鍵Shift + Ctrl + I 或者 Option + Command + I打開：

下面紅框就是傳說中的開發者工具。

第二步，打開命令輸入欄。

當我們打開了開發者工具，可以直接按Shift + Ctrl + P 或者 Shift + Command + P，進入輸入命令頁面：

這個紅色的框框就是命令輸入框。

第三步，輸入命令。

第三步，直接輸入screenshot，我們就會看到：

可以發現，這裏有四個screenshot命令：

• Capture area screenshot：選取範圍截圖

最後截圖就是選中的那一塊：

• Capture full size screenshot:截圖全部頁面

• Capture node screenshot:截取手機版網頁長圖
• Capture screenshot:截取網頁可視區域

這樣，我們如果要截取全部頁面的話，就只需要使用Capture full size screenshot命令就可以了。是不是很方便。

技術總結

最後，我們總結一下如何使用Chrome瀏覽器截圖網頁全圖：

1. 打開開發者工具；
2. 按Shift + Ctrl + P 或者 Shift + Command + P，進入輸入命令頁面；
3. 輸入screenshot即可；
4. 選擇Capture full size screenshot命令就是網頁全圖；
5. 完畢。

最後安利一個小事，就是『皮爺擼碼』官方網站Peekpa.com已經上線了，而且歷史文章中還有詳細的記錄，教你怎麼用Python的Django開發Peekpa.com。還不趕緊學起來？

想要知道更多，就去Peekpa.com