你不知道的祕密：用Chrome截取整個網頁?

1. 一、首先，將你的 Google Chrome 瀏覽器更新、升級到 59 或更高版本，在我寫這篇文章時的版本爲 63，接著以快捷鍵 F12 （Mac 爲 ⌘Command + ⌥Option + I）開啓開發人員工具功能，以下圖會出現許多網頁開發者須要的相關工具。

二、打開開發者工具後隨即按下 Ctrl + Shift + P（Mac 爲 ⌘Command + ⇧Shift + P），會出現可輸入指令列的工具，輸入「Capture full size screenshot」（只要前幾個字應該就會自動搜尋並跳出該指令），按下 Enter 後 Google Chrome 就會自動截圖整個網頁從頭至尾的內容，直接輸出爲圖片並下載保存。

三、下圖就是我以 Chrome自帶的截圖功能截取完整尺寸截圖的圖片範例，由於是以瀏覽器自帶的渲染引擎直接輸出，速度很快，效果也很好！尤爲是解析度和精緻程度都很高。

五、若是你想截圖網頁在行動裝置例如手機的畫面截圖，可透過快速鍵 Ctrl + Shift + M（Mac 爲 ⌘Command + ⇧Shift + M）來開啓模擬工具，切換 iPhone、iPad、Nexus、Galaxy 等裝置開啓網頁的顯示情形，再搭配前面介紹的截圖功能抓取網頁在手機顯示的畫面截圖。

上圖就是我抓取的網頁截圖 iPhone 8 Plus 開啓的情形，由於使用響應式網頁設計（Responsive web design，RWD），當裝置寬度不夠時會自動隱藏側邊欄，同時將總體版型縮小到可容得下畫面，避免由於螢幕過小而在瀏覽時出現版型跑掉或必須滑動才能瀏覽內容等不便情形。有些網站會另外提供行動板網頁，這都是比較常見的解決方案。

六、最後，再介紹一個小功能，能夠截圖網頁中你選擇的元件，若是有使用過 Google Chrome 自帶的開發人員工具就知道，有個功能能夠選取網頁內容，而後顯示出該段落程式碼、CSS 及相關資訊，只要按下 Ctrl + Shift + C（Mac 爲 ⌘Command + ⇧Shift + C）就能開啓。選擇你要抓取的網頁部分，輸入「Capture node screenshot」指令就能截圖轉爲圖片。

推薦幾個擴展功能：

1. 全屏幕截取網頁編輯共享神器- Awesome Screenshot

2. 瀏覽器網頁截圖插件 FireShot：捕捉網頁截圖

3. 將網頁完整截取備份成圖片的擴展：Full Page Screen Capture

4. qSnap 瀏覽器抓圖工具，一鍵快速把網頁轉爲圖片、產生分享連接