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

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

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

方便又快捷。

理論學習

我們使用谷歌瀏覽器:

來做全網頁截圖的工具。接下來，我們來選取我們截圖目標網頁：

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

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

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

打開開發者工具；

按Shift + Ctrl + P 或者 Shift + Command + P，進入輸入命令頁面；

輸入screenshot即可。

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

實戰演練

我們的目標網頁地址：

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

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

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

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

003

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

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

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

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

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

第三步，輸入命令。

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

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

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

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

技術總結

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

打開開發者工具；

按Shift + Ctrl + P 或者 Shift + Command + P，進入輸入命令頁面；

輸入screenshot即可；

選擇Capture full size screenshot命令就是網頁全圖；

完畢。

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

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

好看，轉發，讚賞乃人間三大真情