`
JerryWang_SAP
  • 瀏覽: 575751 次
  • 性別: Icon_minigender_1
  • 來自: 西安
文章分類
社區版塊
存檔分類
最新評論

如何用Chrome自帶的截屏功能截取超過一個屏幕的網頁

閱讀更多

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

  1. 推薦一個功能強大的文件搜索工具SearchMyFiles
  2. 介紹一個好用的免費流程圖和UML繪制軟件-Diagram Designer
  3. 介紹Windows任務管理器的替代者-Process Explorer
  4. 介紹一個強大的磁盤空間檢測工具Space Sniffer
  5. 如何在電腦上比較兩個相似文件的差異
  6. 程序員工作效率提升系列-推薦一個JSON文件查看和修改的小工具
  7. 將Chrome調試器里的JavaScript變量保存成本地JSON文件
  8. 分享一個開源的JavaScript統計圖表庫,40行代碼實現專業統計圖表
  9. 推薦一個短小精悍的Chrome緩存管理工具-ChromeCacheView
  10. 給程序員的福利-分享一個將代碼轉換成圖片的在線網站

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

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

下面分享給大家。

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

如何用Chrome自帶的截屏功能截取超過一個屏幕的網頁

?

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

如何用Chrome自帶的截屏功能截取超過一個屏幕的網頁

?

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

如何用Chrome自帶的截屏功能截取超過一個屏幕的網頁

?

大家可以看看這個效果:

如何用Chrome自帶的截屏功能截取超過一個屏幕的網頁

?

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

假設我想只截取bing搜索結果頁面里id為b_content的元素對應的內容,

如何用Chrome自帶的截屏功能截取超過一個屏幕的網頁

?

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

如何用Chrome自帶的截屏功能截取超過一個屏幕的網頁

?

下圖就是只截取b_content元素對應的截圖結果:

如何用Chrome自帶的截屏功能截取超過一個屏幕的網頁
0
0
分享到:
評論
Global site tag (gtag.js) - Google Analytics 开心农场种蔬菜赚钱 股票白糖的股票行情今天大盘 安徽11选5直选2 怎么能快速的推广赌博 十五选五开奖结果 电子投注单怎么付款 上期平码下期特肖公式 期货配资平台是什么意思 湖北快三快三一定牛 广州十一选五推选计划 江西多乐彩11选五开奖时间 各人销售辽宁11选五 韩国1.5分彩开奖结果 浙江6+1开奖号码双色球 河北快三走势图牛 九达通配资 内蒙体育彩票11选五