在工作中，我們難免需要給一些網頁截圖。也許你嘗試過各種插件，或者是使用過一些截圖工具，但其實，Chrome 本身就帶有截圖特性，功能還很豐富。它不僅可以截取瀏覽器窗口，還可以截取網頁全圖，截取移動端顯示效果，甚至帶殼截圖。
那么 Chrome 的截圖該怎么用呢？讓我給你詳細地介紹一下吧。
截圖指令
Chrome 的截圖功能藏在開發者工具中，所以在截圖之前你需要先打開開發者工具。我們可以直接在頁面上按下鼠標右鍵，選擇「檢查」（或「審查元素」），也可以按下 Cmd+Option+I（Windows 下是 Ctrl+Shift+I），來打開開發者工具。
Chrome 開發者工具
在瀏覽器窗口底部彈出的面板就是開發者工具啦。此時，我們繼續按下 Cmd+Shift+P（Windows 下是 Ctrl+Shift+P）打開指令輸入框，在里面輸入 screenshot，就可以看到四個截圖相關的指令了。
指令輸入框
這四個指令分別對應着：
- Capture area screenshot：區域截圖，截取網頁的一個區域。
- Capture full size screenshot：全網頁截圖，截取整個網頁。
- Capture node screenshot：節點截圖，截取網頁中的一個元素節點。
- Capture screenshot：窗口截圖，截取當前瀏覽器窗口顯示的內容。
區域截圖
我們按上下方向鍵選取第一個指令（Capture area screenshot）並回車，此時移動鼠標至網頁中，光標變為十字形。此時，你就可以在網頁中划出一個區域來進行截圖了。當你划完范圍松開鼠標時，Chrome 就會自動保存剛才的截取的區域圖片了。
全網頁截圖
全網頁截圖，是指 Chrome 會截取網頁一直滾動到底部的整個畫面。不過因為截取全網頁需要自動滾動（隱藏式的），所以如果網頁很長的話需要的時間可能比較久，會看到卡頓。同時，因為有些頁面設置的滾動比較復雜（比如一些管理后台頁面多區域可滾動），可能會截取失敗，只能截取到一小部分。
我們按上下方向鍵選取第二個指令（Capture full size screenshot）並回車，就可以截取網頁全圖啦。
截取少數派首頁全圖
節點截圖
節點截圖是我比較喜歡的一個功能，我一般用它來做表情。所謂節點截圖，就是截取網頁的某一個元素節點。網頁都是由 HTML 元素組成的，比如說一個圖片是 <img>，一段文字是 <p>，一個標題可能是 <h1>，等等。
我們可以在頂部菜單欄中選取第一個菜單，即 Elements（元素），這時候就能在下面看到整個網頁的節點了。這些節點一層又一層，當我們點擊左邊的三角形時可以展開它們，點擊某一行時可以看到網頁中對應的元素被一層藍色覆蓋。
當然，這樣在復雜的 HTML 代碼中找到想要的頁面元素太耗費時間了。我們可以點擊開發者工具左上角的元素選擇箭頭，就可以移動鼠標到頁面中直接選取需要的節點了。
此時我們已經選中了這個節點，按 Cmd+Shift+P（Windows 下是 Ctrl+Shift+P）打開指令輸入框，輸入 screenshot 選擇 Capture node screenshot，回車就可以把這個節點截取保存下來啦。
我喜歡在截取之前，先改變一下節點中的文字，這樣就可以做出一些奇怪的表情包。你可以繼續展開節點，找到文字並雙擊，就可以編輯文字內容了。
編輯完成之后，再選中前面選的外層一點的節點，按上面的方式截取這個節點，就能夠下載一個表情包素材了。
表情完成圖
窗口截圖
所謂窗口截圖，就是直接截取瀏覽器的整個窗口。我們按上下方向鍵選取第四個指令（Capture screenshot）並回車，就可以截取瀏覽器窗口中的網頁啦。
其他設備尺寸截圖
Chrome 開發者工具本身可以模擬各種設備的尺寸，比如說模擬手機上的顯示效果，或者是寬屏顯示器上的顯示效果。借助這個功能，我們可以輕松在電腦上截取其它設備尺寸的圖片。
在此之前，我們需要先點擊開發者工具的左上角的設備切換按鈕，進入到設備模擬模式。可以看到，此時網頁會以移動端模式顯示，在最上方可以切換設備（截圖中選的是 iPhone X）、顯示比例等，最右邊還有一個更多操作的按鈕，我們后面所講的操作都在這里。
設備模擬模式
移動端截圖
點擊上面所說的更多操作按鈕，可以看到菜單中有「Capture screenshot」和「Capture full size screenshot」兩個截圖操作。第一個就是截取當前窗口，第二個就是截取整個網頁長圖，這樣我們就能在電腦上截取移動端或其他設備的圖片了。
截取移動端的圖
帶殼截圖
有時候我們想更加個性化一點，截圖能帶個手機外形，就可以點擊更多操作中的「Show device frame」。此時預覽窗口周圍就會顯示你選的手機模型，此時再使用剛才那個「Capture screenshot」操作進行截圖，就可以帶着手機模型一起截取下來啦。不過遺憾的是，只有少數幾個設備才有模型。
帶殼截圖
自定義屏幕尺寸
也許可選設備列表里面的設備沒有你想要的，或者你想自定義一個特殊的尺寸，這時候就可以點擊可選設備列表下面的「Edit」菜單，來編輯設備列表。
編輯設備列表
此時，在下方的開發者工具中就會出現設備編輯面板。可以看到，有很多設備都沒有勾選，也就是說它們不會在頂部設備列表中出現。你可以選擇自己喜歡的設備，這樣下次就可以在頂部切換了。
編輯設備列表
如果你想自定義一個尺寸，可以點擊最上面的「Add custom device」，這樣就可以自己添加一個特殊的尺寸了。甚至，你還可以設置它是移動設備還是桌面設備，以及設備像素比等屬性。
自定義屏幕尺寸
怎么樣？有沒有想打開你的 Chrome 試試呢？