• 網(wǎng)頁長截圖

Chrome 開發(fā)者工具中其實自帶了截圖命令，要想使用截圖功能，你需要首先確保 Chrome 已升級至 59 或更高版本。在想要截圖的網(wǎng)頁中，首先按下

Mac OS ?Command + ?Option + I
Windows F12

快捷鍵，召喚出調(diào)試界面。

image.png

隨后，按下

Mac OS ?Command + ?Shift + P
Windows Ctrl + Shift + P

image.png

輸入命令 （只輸前幾個字母就能找到）

Capture full size screenshot

敲下回車，Chrome 就會自動截取整個網(wǎng)頁內(nèi)容并保存至本地。由于是渲染引擎直接輸出，其比普通擴展速度更快，分辨率也更高。

image.png

• 網(wǎng)頁截取手機屏大小截圖

除了普通長截圖以外，你還可以利用這一功能截取手機版網(wǎng)頁長圖<在上圖界面中調(diào)用>

Mac OS ?Command + ?Shift + M
Windows Ctrl + Shift + M

模擬移動設(shè)備，再按剛才的方法運行命令就可以了。在頂部的工具欄中，你可以選擇要模擬的設(shè)備和分辨率等設(shè)置。

• 截取網(wǎng)頁某一部分截圖

如果你想準確截取網(wǎng)頁的某一部分，可以按下

Mac OS ?Command + ?Shift + C
Windows Ctrl + Shift + C

嗅探元素,選中想要的部分后，再運行

Capture node screenshot

image.png

• 截取當前網(wǎng)頁的可視部分

Capture screenshot