摘要：本文會告訴你如何在不安裝第三方軟體的情況下如何實現完美截圖
作為前端工程師，有時需要將做到一半的網頁傳送給 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 瀏覽器的開發者工具擷取整個頁面
-
開啟 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”並回車（或直接用滑鼠點選這個選項）
文章末尾有動圖演示操作步驟
在此之後，Chrome會將截圖下載到電腦設定的下載區域。
擴充套件應用場景一
由於自適應網頁設計（Responsive Web Design）的興起，很多網站在手機瀏覽器的顯示效果和電腦上是不一樣的，利用 Chrome 的開發者工具，還可以實現對不同型號手機整個頁面的截圖：
- 進入需要截圖的網站頁面，開啟開發者工具（方法和上面兩步相同）
- 點選開發者工具左上角的檢視轉換按鈕，這時瀏覽器中的頁面會呈現出手機檢視。同時，在瀏覽器中還可以選擇不同的的手機或者平板型號來對比不同硬體上觀看頁面的不同效果
- 重新載入頁面
- 開啟命令列，進行截圖命令（方法和上面第四步相同）
擴充套件應用場景二
如果並不想擷取整個頁面，而是擷取頁面中的一些元素，也可以利用開發者工具實現。下面以擷取 LinkedIn 網站中的使用者身份資訊為例：
- 進入需要截圖的網站頁面，開啟開發者工具（方法和上面兩步相同）
- 點選開發者工具左上角的“選取元素”按鈕，在網頁中點選要截圖的元素
- 由於 HTML 父子元素的巢狀，可能選中的是需要截圖元素的子元素。這時，需要在開發者工具中對所選取的元素進行調整：由於選取的是子元素，所以只需要在“選取元素”按鈕，旁邊的"Elements Tab"裡邊按照巢狀關係，找到合適的父元素就可以了。這時，點選選中該父元素。
- 開啟命令列，進行截圖命令（方法和上面第四步類似）。不過需要注意這時在包含 "Screen" 關鍵字的命令中選取“Capture node screenshot”而非“Capture full size screenshot”。
後記
在開始寫這一篇文章時，我最初的思路是寫成類似百度經驗或是 wiki how to 那種形式的說明性文章。但是，發現在介紹一個問題的解決方案時，更有價值的是介紹下解決問題的思路，這樣讀者在以後遇到類似問題時，可以用相似的思路去探索問題的答案。另外，也想給大家分享下程式設計師是如何思維和工作的。上文引用的 How To Become A Hacker 原文非常值得一讀，中文連結：如何成為黑客。
如果您覺得這篇文章對您或身邊的人有幫助。歡迎您點贊、留言、轉發或者關注我，這些行為都是對我繼續寫作的巨大鼓勵！
作者介紹：LinkedIn Web 前端工程師，座標紐約。科技和人文交叉路口的活躍份子。更多資訊，請關注新浪微博：@流浪的拉多
Chrome 相關功能的兩次更新：
為了不影響閱讀體驗，將動圖放在文末：