Chrome的「開發人員工具」竟然可以截圖

前幾天才發現的一個Chrome特技吧！不曉得有多少人知道，Chrome瀏覽器的「開發人員工具」竟然可以截圖。

首先，要將你的 Google Chrome 瀏覽器更新升級到 59 或更高版本，接著以快捷鍵 F12 （Mac 為 Command + Option + I）開啟開發人員工具功能，如下圖會出現許多網頁開發者需要的相關工具。

開啟「開發人員工具」後隨即按下 Ctrl + Shift + P（Mac 為 Command + Shift + P），會出現可輸入指令列的工具，輸入開頭為「Capture」的關鍵字，就會出現有「Capture area screenshot」「Capture full size」「Catpture node screenshot」「Catpure screenshot」等截圖指令，選取適當的指令按下 Enter 後，就會進行截圖，指令意思分別為：

1. Capture area screenshot：擷取選取區域
2. Capture full size：擷取全部整個網頁
3. Catpture node screenshot：擷取網頁中你指定的物件(實際上我試不出來)
4. Catpure screenshot：擷取可視區域 (viewport)

• https://www.kocpc.com.tw/archives/175414
• https://jasperjn.github.io/blog/2017/07/17/chrome-build-in-screenshot/