Google Chrome 的開發人員工具中早已有內建網頁擷圖功能，僅打一行指令就能輸出區域影像、長截圖或螢幕範圍內的網頁畫面，完全不需要依賴其他軟體或擴充功能。雖然它不像「一鍵式」的軟體那樣懶人，但習慣操作後其實還是很方便的。
擷圖很好了解，那長截圖到底是什麼？
前一陣子 LINE 有新增一個也叫「截圖」的功能，它能將其中一段的訊息紀錄擷取成一張很長很長的圖，這就是長截圖。另外有些設計公司的產品型錄中也會看到一張圖能讓你預覽整個作品的東西，那個也是長截圖。
那我們到底要怎麼擷呢？馬上進入主題：
開啟 Chrome 開發人員工具
啟動 Chrome 瀏覽器後，先進入你想要擷取的網頁，再按下鍵盤上的 F12 來打開 開發人員工具。
然而預設的開發人員工具是合併在主視窗中，可能會在右邊或下面，會影響到待會擷圖的品質。
所以請按下右上角的 more_vert，並選擇 filter_none 將它改成獨立視窗。
輸入 Screenshot 命令與選擇擷圖模式
接下來按下組合鍵 Ctrl + Shift + P 開啟指令框，直接輸入「screenshot」後它會顯示四種擷圖模式讓你選擇，各模式說明我用個列表來說明：
- Capture area screenshot：區域擷圖，選擇後你的滑鼠指標會變成 add，用它在網頁中框選出一個範圍即可擷圖。
- Capture full size screenshot：長截圖，延遲一秒左右後將會自動完成擷圖，就是這麼簡單。
- Capture node screenshot：節點擷圖，它類似長擷圖，但只有螢幕有顯示到的地方有影像，其餘都是空白。在文章後段我們會放預覽圖讓你比較一下差異。
- Capture screenshot：普通擷圖，會自動擷取視窗看得到的網頁。如果剛剛沒有讓開發者工具變成獨立視窗的話，這邊的擷圖結果就會被影響。
檢視結果
完成擷圖後它會以下載的方式來存檔，如果沒有特別設定的話檔案應該都會在「下載」資料夾中。
最後我們來檢視一下各擷圖模式出圖後的樣子：
區域擷圖 Area screenshot
你框哪它就擷哪，直觀的操作。
長截圖與節點擷圖 Full size screenshot ＆ Node screenshot
長截圖太長了，請努力往下滑。兩者的差別就是一個會把目前看不到的區域擷進去，一個不會…
普通擷圖 Screenshot
最後就是最普通也是最常用到的擷圖功能，它不會擷到網址列和瀏覽器邊框，非常讚。
會用 DevTools 的都是怪咖…