之前試用Firefox Quantum時，我最喜歡的功能之一就是其內建的截圖功能。它不僅可以自動檢測網頁元素邊界，還能輕鬆保存整個網頁，十分方便。

後來由於擴充及習慣等原因，我又換回了Chrome，但還是對該功能念念不忘。儘管商店裡也有許多截圖增強擴充，但在截取一些比較複雜的網頁時，往往會出現元素錯位、重複的現象。經過一番探索，我發現Chrome開發工具中其實自帶了截圖命令，效果也令人滿意，在這裡分享給大家。

eyJ0eXBlIjoiYWRzIiwibmFtZSI6IuW7o+WRiiIsInBsdWdpbiI6ZmFsc2UsImRhdGEiOm51bGx9

要想使用截圖功能，你需要首先確保Chrome已升級至59或更高版本。在想要截圖的網頁中，首先按下⌘Command + ⌥Option + I（Windows為F12）快捷鍵，召喚出調試界面。

請輸入圖片標題

隨後，按下⌘Command + ⇧Shift + P（Windows為Ctrl + Shift + P），輸入命令Capture full size screenshot（只輸前幾個字母就能找到），敲下Enter， Chrome就會自動截取整個網頁內容並保存至本機。由於是渲染引擎直接輸出，其比普通擴充工具速度更快，解析度也更高。

請輸入圖片標題

除了普通長截圖以外，你還可以利用這一功能截取手機版網頁長圖。只需要按下⌘Command + ⇧Shift + M （Windows為 Ctrl + Shift + M）模擬行動裝置，再按剛才的方法運行命令就可以了。在頂部的工具欄中，你可以選擇要模擬的設備和分辨率等設置。

請輸入圖片標題

eyJ0eXBlIjoiYWRzIiwibmFtZSI6IuW7o+WRiiIsInBsdWdpbiI6ZmFsc2UsImRhdGEiOm51bGx9

如果你想準確截取網頁的某一部分，可以按下⌘Command + ⇧Shift + C（Windows為 Ctrl + Shift + C）嗅探元素。選中想要的部分後，再運行Capture node screenshot命令，一張完美的選區截圖就誕生了。

請輸入圖片標題

此外，Capture screenshot命令可以讓你截取當前網頁的可視部分。我也會繼續發掘Chrome開發者工具的其他好玩用法，到時推薦給大家。

本文授權轉載自：少數派