如何利用 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 — From How To Become A Hacker

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

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

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

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

等待頁面加載完畢後，經過下面方法打開開發者工具：在頁面任何地方點擊鼠標右鍵，在彈出菜單中選擇「檢查（Inspect）」選項。或者使用快捷鍵組合：Alt + Command+ I (Mac) 或 Ctrl + Shift + I (Windows)

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

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

擴展應用場景一

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

進入須要截圖的網站頁面，打開開發者工具（方法和上面兩步相同）

點擊開發者工具左上角的視圖轉換按鈕，這時瀏覽器中的頁面會呈現出手機視圖。同時，在瀏覽器中還能夠選擇不一樣的的手機或者平板型號來對比不一樣硬件上觀看頁面的不一樣效果從新加載頁面

打開命令行，進行截圖命令（方法和上面第四步相同）

截取移動端頁面

擴展應用場景二

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

進入須要截圖的網站頁面，打開開發者工具（方法和上面兩步相同）

點擊開發者工具左上角的「選取元素」按鈕，在網頁中點擊要截圖的元素

因爲 HTML 父子元素的嵌套，可能選中的是須要截圖元素的子元素。這時，須要在開發者工具中對所選取的元素進行調整：因爲選取的是子元素，因此只須要在「選取元素」按鈕，旁邊的」Elements Tab」裏邊按照嵌套關係，找到合適的父元素就能夠了。這時，點擊選中該父元素。

打開命令行，進行截圖命令（方法和上面第四步相似）。不過須要注意這時在包含 「Screen」 關鍵字的命令中選取「Capture node screenshot」而非「Capture full size screenshot」。

後記

在開始寫這一篇文章時，我最初的思路是寫成相似百度經驗或是 wiki how to 那種形式的說明性文章。可是，發如今介紹一個問題的解決方案時，更有價值的是介紹下解決問題的思路，這樣讀者在之後遇到相似問題時，能夠用類似的思路去探索問題的答案。