如何利用 Chrome 瀏覽器實現滾動截屏

摘要：本文會告訴你如何在不安裝第三方軟件的狀況下如何實現完美截屏

做爲前端工程師，有時須要將作到一半的網頁發送給 PM 和 Designer 來得到他們的反饋。Mac 自帶的截屏功能只能截取顯示在屏幕上的內容，可是網頁長度經常會超出屏幕高度，只依靠這個截圖軟件沒法實現一次性的截取整個網頁。

對這個問題，最簡單粗暴的方法是手動滑動頁面來截取多個圖片，根據圖片順序命名文件。可是這樣做的話 PM 和 Designer 須要一張張打開，並且他們看到的也不是一個總體的效果。因此，這樣作只是間接的把問題推給了別人，而並無從根本上解決它。一個合格的工程師，應該探索下更好的解決方案。

在遇到這類問題時，個人思路是依次探索：原生解決方案 > 對現有工具的組合 > 安裝瀏覽器插件或 App。

因爲原生的 Mac 截屏功能沒法解決問題，我試着對現有工具組合：用 photoshop 將多張截圖拼接到一塊兒後再發送。可是的缺點是很耗時間，尤爲時頁面仍是半成品的狀況下，經常須要反覆改動，好比下圖是 PM 的反饋。改動後，又須要從新使用 photoshop 拼接一次，這不只低效，並且是在作重複性的工做。軟件工程師都不喜歡重複性的工做。

「Hackers (and creative people in general) should never be bored or have to drudge at stupid repetitive work」 How To Become A Hacker

因爲方案二耗時太多，我便開始考慮方案三，安裝瀏覽器插件或 App。簡單搜索後，發現這類產品很是多，選擇成本很高。

因而，便回到繼續探索原生解決方案的思路上。這時，發現 Chrome 瀏覽器在近期發佈的版本中添加了截圖的功能。下面以獲取 LinkedIn 整個首頁爲例來介紹下具體的操做方法。

利用 Chrome 瀏覽器的開發者工具截取整個頁面

1. 打開 Chrome 瀏覽器，進入須要截圖的網站頁面

2. 等待頁面加載完畢後，經過下面方法打開開發者工具

• 在頁面任何地方點擊鼠標右鍵，在彈出菜單中選擇「檢查（Inspect）」選項
• 或者使用快捷鍵組合：Alt + Command + I (Mac) | Ctrl + Shift + I (Windows)

3. 使用快捷鍵組合來打開命令行（command palette）：Command + Shift + P (Mac) | Ctrl + Shift + P (Windows)

4. 在命令行中輸入「Screen」，這時自動補齊功能會顯示出一些包含 "Screen" 關鍵字的命令。移動方向鍵到「Capture full size screenshot」並回車（或直接用鼠標點擊這個選項）

文章末尾有動圖演示操做步驟

在此以後，Chrome會將截圖下載到電腦設定的下載區域。

擴展應用場景一

因爲自適應網頁設計（Responsive Web Design）的興起，不少網站在手機瀏覽器的顯示效果和電腦上是不同的，利用 Chrome 的開發者工具，還能夠實現對不一樣型號手機整個頁面的截圖：

1. 進入須要截圖的網站頁面，打開開發者工具（方法和上面兩步相同）
2. 點擊開發者工具左上角的視圖轉換按鈕，這時瀏覽器中的頁面會呈現出手機視圖。同時，在瀏覽器中還能夠選擇不一樣的的手機或者平板型號來對比不一樣硬件上觀看頁面的不一樣效果
3. 從新加載頁面
4. 打開命令行，進行截圖命令（方法和上面第四步相同）

擴展應用場景二

若是並不想截取整個頁面，而是截取頁面中的一些元素，也能夠利用開發者工具實現。下面以截取 LinkedIn 網站中的用戶身份信息爲例：

1. 進入須要截圖的網站頁面，打開開發者工具（方法和上面兩步相同）
2. 點擊開發者工具左上角的「選取元素」按鈕，在網頁中點擊要截圖的元素
3. 因爲 HTML 父子元素的嵌套，可能選中的是須要截圖元素的子元素。這時，須要在開發者工具中對所選取的元素進行調整：因爲選取的是子元素，因此只須要在「選取元素」按鈕，旁邊的"Elements Tab"裏邊按照嵌套關係，找到合適的父元素就能夠了。這時，點擊選中該父元素。
4. 打開命令行，進行截圖命令（方法和上面第四步相似）。不過須要注意這時在包含 "Screen" 關鍵字的命令中選取「Capture node screenshot」而非「Capture full size screenshot」。

後記

在開始寫這一篇文章時，我最初的思路是寫成相似百度經驗或是 wiki how to 那種形式的說明性文章。可是，發如今介紹一個問題的解決方案時，更有價值的是介紹下解決問題的思路，這樣讀者在之後遇到相似問題時，能夠用類似的思路去探索問題的答案。另外，也想給你們分享下程序員是如何思惟和工做的。上文引用的 How To Become A Hacker 原文很是值得一讀，中文連接：如何成爲黑客。

若是您以爲這篇文章對您或身邊的人有幫助。歡迎您點贊、留言、轉發或者關注我，這些行爲都是對我繼續寫做的巨大鼓勵！

做者介紹：LinkedIn Web 前端工程師，座標紐約。科技和人文交叉路口的活躍份子。更多信息，請關注新浪微博：@流浪的拉多

Chrome 相關功能的兩次更新：

• What's New In DevTools (Chrome 59)

• What's New In DevTools (Chrome 62)

---

爲了避免影響閱讀體驗，將​動圖放在文末：