溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

發(fā)布時間:2020-08-10 02:25:10 來源:ITPUB博客 閱讀:200 作者:i042416 欄目:web開發(fā)

提升程序員工作效率的工具/技巧推薦系列

  1. 推薦一個功能強大的文件搜索工具SearchMyFiles

  2. 介紹一個好用的免費流程圖和UML繪制軟件-Diagram Designer

  3. 介紹Windows任務(wù)管理器的替代者-Process Explorer

  4. 介紹一個強大的磁盤空間檢測工具Space Sniffer

  5. 如何在電腦上比較兩個相似文件的差異

  6. 程序員工作效率提升系列-推薦一個JSON文件查看和修改的小工具

  7. 將Chrome調(diào)試器里的JavaScript變量保存成本地JSON文件

  8. 分享一個開源的JavaScript統(tǒng)計圖表庫,40行代碼實現(xiàn)專業(yè)統(tǒng)計圖表

  9. 推薦一個短小精悍的Chrome緩存管理工具-ChromeCacheView

  10. 給程序員的福利-分享一個將代碼轉(zhuǎn)換成圖片的在線網(wǎng)站

前端開發(fā)人員經(jīng)常需要將當前的網(wǎng)頁截圖發(fā)給產(chǎn)品經(jīng)理討論。如果網(wǎng)頁很長,一個屏幕顯示不下,那么操作系統(tǒng)自帶的截圖功能就沒有辦法截取整個屏幕了。

最近我找到一個辦法,通過Chrome開發(fā)者工具自帶的截圖功能可以截取超過一個屏幕的完整網(wǎng)頁視圖。

下面分享給大家。

打開要截取完整屏幕的網(wǎng)頁,打開Chrome開發(fā)者工具,按住快捷鍵Ctrl+Shift+P,會看到很多可用命令,

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

在命令提示符里輸入“full”,會看到只有一個可用選項:Capture full size screenshot:

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

點擊這個命令,Chrome就自動截取當前網(wǎng)頁的完整圖片,并且提示我們另存到本地。

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

大家可以看看這個效果:

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

是不是非常方便?大家從Chrome開發(fā)者工具的命令行里還能發(fā)現(xiàn)很多其他有用的功能,比如只截取網(wǎng)頁上指定元素。

假設(shè)我想只截取bing搜索結(jié)果頁面里id為b_content的元素對應(yīng)的內(nèi)容,

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

在命令里選擇Capture node screenshot即可:

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

下圖就是只截取b_content元素對應(yīng)的截圖結(jié)果:

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

要獲取更多Jerry的原創(chuàng)技術(shù)文章,請關(guān)注公眾號"汪子熙"或者掃描下面二維碼:


如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁

如何用Chrome自帶的截屏功能截取超過一個屏幕的網(wǎng)頁


向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI