相信很多同學都有截圖的需求，有時候一個網頁的內容很多，根本沒法把所有內容都截取在同一張圖片上，有同學可能會把每頁截圖再重新拼接起來。

其實，我們可以使用工具和瀏覽器開發者工具來實現網頁長圖的截取。

以前我分享過一些工具，來實現抓取整個網頁的信息內容。

但是這些工具截取出來的圖片質量沒有很高，在清晰度方面始終有些不足。

并且有些截圖工具使用起來會比較麻煩。

所以，今天教大家怎么使用Chrome瀏覽器的開發者工具命令來截取網頁的長圖。

比如我現在想截取quora網站上的這個首頁長圖，從動圖可以看到，這個首頁的信息還是比較多的。

現在我們使用快捷鍵F12調出開發者工具，你也可以右擊鼠標，然后找到檢查元素，進入開發者工具

然后使用快捷組合鍵Ctrl+shift+P，打開一個可以輸入命令查找文件的窗口

然后輸入：Capture full size screenshot，意思是抓取全網頁面的截圖

然后Chrome瀏覽器就會自動抓取網頁的截圖，然后把這個網頁截圖保存到本地了

如果你只想截圖當頁面的內容，那么你可以直接輸入：Capture screenshot，就可以截取屏幕當頁的內容信息

如果你想再電腦端模擬手機版的截圖，那么你可以在開發者工具的左上角，點擊那個圖標切換設備，你也可以使用快捷鍵Ctrl + Shift + M

當你點擊之后，頁面顯示就會從網頁版就會切換為手機版

如下動圖

并且我們可以設置為不同手機的大小，模仿不同手機來截取長圖，然后截取手機版的長圖跟上面的方法一樣

輸入Capture full size screenshot，就可以了

總結

以上是生活随笔為你收集整理的HTML开发者工具抓取所有图片,利用开发者工具，截取网页高清长图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。