相信大家在平時學習和工作的時候,都少不了要對網頁截圖。可是,如果使用一般傳統的截圖方法:QQ截圖或者微信截圖,很難做到對一個網頁的全部頁面截圖。如下圖:
因爲這些截圖方法,只能對電腦屏幕現在展示出來的內容截圖。所以,今天我就來給大家分享一個:給全部網頁截圖的方法。
方便又快捷。
理論學習
我們使用谷歌瀏覽器,來做全網頁截圖的工具。接下來,我們來選取我們截圖目標網頁:
http://peekpa.com/detail/202006306403/
如果單獨截屏的話,只能一張一張的截圖:
如果想要截整張網頁,請記住以下步驟:
- 打開開發者工具;
- 按
Shift + Ctrl + P
或者Shift + Command + P
,進入輸入命令頁面; - 輸入
screenshot
即可。
接下來,我們通過實戰來演示一下怎麼實戰操作。
實戰演練
我們的目標網頁地址:
http://peekpa.com/detail/202006306403/
第一步,我們打開開發者工具。
這裏有兩種方法可以打開谷歌瀏覽器的開發者工具:
- 通過頁面頂端右側的
菜單按鈕 -> 更多工具 -> 開發者工具
路徑打開:
- 按快捷鍵
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瀏覽器截圖網頁全圖:
- 打開開發者工具;
- 按
Shift + Ctrl + P
或者Shift + Command + P
,進入輸入命令頁面; - 輸入
screenshot
即可; - 選擇
Capture full size screenshot
命令就是網頁全圖; - 完畢。
最後安利一個小事,就是『皮爺擼碼』官方網站Peekpa.com已經上線了,而且歷史文章中還有詳細的記錄,教你怎麼用Python的Django開發Peekpa.com。還不趕緊學起來?
想要知道更多,就去Peekpa.com