在工作中，我們難免需要給一些網(wǎng)頁(yè)截圖。也許你嘗試過(guò)各種插件，或者是使用過(guò)一些截圖工具，但其實(shí)，Chrome 本身就帶有截圖特性，功能還很豐富。它不僅可以截取瀏覽器窗口，還可以截取網(wǎng)頁(yè)全圖，截取移動(dòng)端顯示效果，甚至帶殼截圖。

那么 Chrome 的截圖該怎么用呢？讓我給你詳細(xì)地介紹一下吧。

截圖指令

Chrome 的截圖功能藏在開(kāi)發(fā)者工具中，所以在截圖之前你需要先打開(kāi)開(kāi)發(fā)者工具。我們可以直接在頁(yè)面上按下鼠標(biāo)右鍵，選擇「檢查」（或「審查元素」），也可以按下 Cmd+Option+I（Windows 下是 Ctrl+Shift+I），來(lái)打開(kāi)開(kāi)發(fā)者工具。

在瀏覽器窗口底部彈出的面板就是開(kāi)發(fā)者工具啦。此時(shí)，我們繼續(xù)按下 Cmd+Shift+P（Windows 下是 Ctrl+Shift+P）打開(kāi)指令輸入框，在里面輸入 screenshot，就可以看到四個(gè)截圖相關(guān)的指令了。

這四個(gè)指令分別對(duì)應(yīng)著：

• Capture area screenshot：區(qū)域截圖，截取網(wǎng)頁(yè)的一個(gè)區(qū)域。
• Capture full size screenshot：全網(wǎng)頁(yè)截圖，截取整個(gè)網(wǎng)頁(yè)。
• Capture node screenshot：節(jié)點(diǎn)截圖，截取網(wǎng)頁(yè)中的一個(gè)元素節(jié)點(diǎn)。
• Capture screenshot：窗口截圖，截取當(dāng)前瀏覽器窗口顯示的內(nèi)容。

區(qū)域截圖

我們按上下方向鍵選取第一個(gè)指令（Capture area screenshot）并回車(chē)，此時(shí)移動(dòng)鼠標(biāo)至網(wǎng)頁(yè)中，光標(biāo)變?yōu)槭中巍４藭r(shí)，你就可以在網(wǎng)頁(yè)中劃出一個(gè)區(qū)域來(lái)進(jìn)行截圖了。當(dāng)你劃完范圍松開(kāi)鼠標(biāo)時(shí)，Chrome 就會(huì)自動(dòng)保存剛才的截取的區(qū)域圖片了。

全網(wǎng)頁(yè)截圖

全網(wǎng)頁(yè)截圖，是指 Chrome 會(huì)截取網(wǎng)頁(yè)一直滾動(dòng)到底部的整個(gè)畫(huà)面。不過(guò)因?yàn)榻厝∪W(wǎng)頁(yè)需要自動(dòng)滾動(dòng)（隱藏式的），所以如果網(wǎng)頁(yè)很長(zhǎng)的話需要的時(shí)間可能比較久，會(huì)看到卡頓。同時(shí)，因?yàn)橛行╉?yè)面設(shè)置的滾動(dòng)比較復(fù)雜（比如一些管理后臺(tái)頁(yè)面多區(qū)域可滾動(dòng)），可能會(huì)截取失敗，只能截取到一小部分。

我們按上下方向鍵選取第二個(gè)指令（Capture full size screenshot）并回車(chē)，就可以截取網(wǎng)頁(yè)全圖啦。

節(jié)點(diǎn)截圖

節(jié)點(diǎn)截圖是我比較喜歡的一個(gè)功能，我一般用它來(lái)做表情。所謂節(jié)點(diǎn)截圖，就是截取網(wǎng)頁(yè)的某一個(gè)元素節(jié)點(diǎn)。網(wǎng)頁(yè)都是由 HTML 元素組成的，比如說(shuō)一個(gè)圖片是 <img>，一段文字是 <p>，一個(gè)標(biāo)題可能是 <h1>，等等。

我們可以在頂部菜單欄中選取第一個(gè)菜單，即 Elements（元素），這時(shí)候就能在下面看到整個(gè)網(wǎng)頁(yè)的節(jié)點(diǎn)了。這些節(jié)點(diǎn)一層又一層，當(dāng)我們點(diǎn)擊左邊的三角形時(shí)可以展開(kāi)它們，點(diǎn)擊某一行時(shí)可以看到網(wǎng)頁(yè)中對(duì)應(yīng)的元素被一層藍(lán)色覆蓋。

當(dāng)然，這樣在復(fù)雜的 HTML 代碼中找到想要的頁(yè)面元素太耗費(fèi)時(shí)間了。我們可以點(diǎn)擊開(kāi)發(fā)者工具左上角的元素選擇箭頭，就可以移動(dòng)鼠標(biāo)到頁(yè)面中直接選取需要的節(jié)點(diǎn)了。

此時(shí)我們已經(jīng)選中了這個(gè)節(jié)點(diǎn)，按 Cmd+Shift+P（Windows 下是 Ctrl+Shift+P）打開(kāi)指令輸入框，輸入 screenshot 選擇 Capture node screenshot，回車(chē)就可以把這個(gè)節(jié)點(diǎn)截取保存下來(lái)啦。

我喜歡在截取之前，先改變一下節(jié)點(diǎn)中的文字，這樣就可以做出一些奇怪的表情包。你可以繼續(xù)展開(kāi)節(jié)點(diǎn)，找到文字并雙擊，就可以編輯文字內(nèi)容了。

編輯完成之后，再選中前面選的外層一點(diǎn)的節(jié)點(diǎn)，按上面的方式截取這個(gè)節(jié)點(diǎn)，就能夠下載一個(gè)表情包素材了。

窗口截圖

所謂窗口截圖，就是直接截取瀏覽器的整個(gè)窗口。我們按上下方向鍵選取第四個(gè)指令（Capture screenshot）并回車(chē)，就可以截取瀏覽器窗口中的網(wǎng)頁(yè)啦。

其他設(shè)備尺寸截圖

Chrome 開(kāi)發(fā)者工具本身可以模擬各種設(shè)備的尺寸，比如說(shuō)模擬手機(jī)上的顯示效果，或者是寬屏顯示器上的顯示效果。借助這個(gè)功能，我們可以輕松在電腦上截取其它設(shè)備尺寸的圖片。

在此之前，我們需要先點(diǎn)擊開(kāi)發(fā)者工具的左上角的設(shè)備切換按鈕，進(jìn)入到設(shè)備模擬模式?？梢钥吹?，此時(shí)網(wǎng)頁(yè)會(huì)以移動(dòng)端模式顯示，在最上方可以切換設(shè)備（截圖中選的是 iPhone X）、顯示比例等，最右邊還有一個(gè)更多操作的按鈕，我們后面所講的操作都在這里。

移動(dòng)端截圖

點(diǎn)擊上面所說(shuō)的更多操作按鈕，可以看到菜單中有「Capture screenshot」和「Capture full size screenshot」兩個(gè)截圖操作。第一個(gè)就是截取當(dāng)前窗口，第二個(gè)就是截取整個(gè)網(wǎng)頁(yè)長(zhǎng)圖，這樣我們就能在電腦上截取移動(dòng)端或其他設(shè)備的圖片了。

帶殼截圖

有時(shí)候我們想更加個(gè)性化一點(diǎn)，截圖能帶個(gè)手機(jī)外形，就可以點(diǎn)擊更多操作中的「Show device frame」。此時(shí)預(yù)覽窗口周?chē)蜁?huì)顯示你選的手機(jī)模型，此時(shí)再使用剛才那個(gè)「Capture screenshot」操作進(jìn)行截圖，就可以帶著手機(jī)模型一起截取下來(lái)啦。不過(guò)遺憾的是，只有少數(shù)幾個(gè)設(shè)備才有模型。

自定義屏幕尺寸

也許可選設(shè)備列表里面的設(shè)備沒(méi)有你想要的，或者你想自定義一個(gè)特殊的尺寸，這時(shí)候就可以點(diǎn)擊可選設(shè)備列表下面的「Edit」菜單，來(lái)編輯設(shè)備列表。

此時(shí)，在下方的開(kāi)發(fā)者工具中就會(huì)出現(xiàn)設(shè)備編輯面板?？梢钥吹剑泻芏嘣O(shè)備都沒(méi)有勾選，也就是說(shuō)它們不會(huì)在頂部設(shè)備列表中出現(xiàn)。你可以選擇自己喜歡的設(shè)備，這樣下次就可以在頂部切換了。

如果你想自定義一個(gè)尺寸，可以點(diǎn)擊最上面的「Add custom device」，這樣就可以自己添加一個(gè)特殊的尺寸了。甚至，你還可以設(shè)置它是移動(dòng)設(shè)備還是桌面設(shè)備，以及設(shè)備像素比等屬性。

怎么樣？有沒(méi)有想打開(kāi)你的 Chrome 試試呢？