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

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

下面分享給大家。

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

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

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

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

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

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

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

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

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號"汪子熙"