Chrome 自帶截圖工具

在瀏覽器頁面測試中，常常會用到截圖保存記錄，大多數都用的第三方的截圖功能，例如Windows截圖工具，微信/qq的截圖功能，其實徹底不必藉助外在的，在 Chrome 瀏覽器中存在原生的截圖功能。支持四種方式的截圖。自選區域、整個網頁、整個網頁和當前屏幕。

• Capture area screenshot：自選區域截圖
• Capture full size screenshot：全網頁截圖，包括滾動條沒有滾動到，未顯示的區域
• Capture node screenshot：當前節點截圖
• Capture screenshot：當前屏幕截圖

 

使用步驟：

首先按下 ⌘Command + Option + I（Windows 爲 F12）快捷鍵，掉出調試界面。

隨後，按下 ⌘Command + ⇧Shift + P（Windows 爲 Ctrl + Shift + P），輸入 Capture 則可看到四種類型截圖命令。

選擇須要的截圖方式，直接按下回車鍵即可進行操做。例如使用Capture full size screenshot進行截圖。截出來的圖質量仍是能夠的。

此工具針對模擬手機端的網站也一樣適用。