提升程式設計師工作效率的工具/技巧推薦系列

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的原創技術文章，請關注公眾號”汪子熙”或者掃描下面二維碼: