如何用Chrome自帶的截屏功能截取超過(guò)一個(gè)屏幕的網(wǎng)頁(yè)-創(chuàng)新互聯(lián)

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

  1. 推薦一個(gè)功能強(qiáng)大的文件搜索工具SearchMyFiles

    站在用戶(hù)的角度思考問(wèn)題,與客戶(hù)深入溝通,找到扶風(fēng)網(wǎng)站設(shè)計(jì)與扶風(fēng)網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品,建站類(lèi)型包括:網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋扶風(fēng)地區(qū)。
  2. 介紹一個(gè)好用的免費(fèi)流程圖和UML繪制軟件-Diagram Designer

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

  4. 介紹一個(gè)強(qiáng)大的磁盤(pán)空間檢測(cè)工具Space Sniffer

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

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

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

  8. 分享一個(gè)開(kāi)源的JavaScript統(tǒng)計(jì)圖表庫(kù),40行代碼實(shí)現(xiàn)專(zhuān)業(yè)統(tǒng)計(jì)圖表

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

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

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

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

下面分享給大家。

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

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

在命令提示符里輸入“full”,會(huì)看到只有一個(gè)可用選項(xiàng):Capture full size screenshot:

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

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

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

大家可以看看這個(gè)效果:

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

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

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

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

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

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

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

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

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

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

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

當(dāng)前名稱(chēng):如何用Chrome自帶的截屏功能截取超過(guò)一個(gè)屏幕的網(wǎng)頁(yè)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址:http://bm7419.com/article38/gjosp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化