如何用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，會看到不少可用命令，

在命令提示符裏輸入「full」，會看到只有一個可用選項：Capture full size screenshot：

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

你們能夠看看這個效果：

是否是很是方便？你們從Chrome開發者工具的命令行裏還能發現不少其餘有用的功能，好比只截取網頁上指定元素。

假設我想只截取bing搜索結果頁面裏id爲b_content的元素對應的內容，

在命令裏選擇Capture node screenshot便可：

下圖就是隻截取b_content元素對應的截圖結果：

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: