如何使用Google Chrome瀏覽器截取特定尺寸的網站截圖

如果您是一家代理機構或公司，擁有一系列希望在線共享的網站或頁面，您可能已經經歷過嘗試捕獲每個網站的統一屏幕截圖的痛苦。

與我們合作的一位客戶構建了可以在公司範圍內進行內部託管的託管 Intranet 解決方案。 內部網對於公司傳播公司新聞、分發營銷信息、提供福利信息等非常有幫助。

我們幫助該客戶從其母公司的網站遷移了他們的 Intranet 解決方案產品。 這是一個廣泛的項目，包含了從構建新的社交資料、更新 Marketo 到分解他們為合併站點所做的一些自定義開發的所有內容。

一個關鍵步驟是確保我們在他們的新網站上突出顯示他們客戶的內部網站的精美產品照片。 我們希望確保每個屏幕截圖在整個網站上的寬度和高度始終相同。 這可能很困難……除非您使用的是 Google Chrome。

使用Google Chrome瀏覽器的客戶端屏幕截圖

您可能沒有意識到這一點，但您可以使用 Google Chrome 內置的一組強大的開發人員工具捕獲完美的屏幕截圖。 有趣的是，儘管它具有驚人的靈活性，但它並不是一個非常知名的功能。 該功能還允許您針對特定尺寸和屏幕尺寸拍攝響應式網站。

這是一個快速視頻教程，介紹如何使用 Google Chrome 截取完美的、特定大小的網頁屏幕截圖：

使用Google Chrome瀏覽器截圖的步驟

Google Chrome 的開發人員工具可以使用其設備工具欄預覽網站。 該工具的構建是為了讓開發人員可以看到網站在不同設備上的不同視口尺寸下的外觀……但它也恰好是獲得完美尺寸的網頁屏幕截圖的完美方式。

在這種情況下，我們希望客戶的每個行業的關鍵客戶都建立了漂亮的 Intranet 站點來截取屏幕截圖，以便我們可以將它們全部顯示在他們網站上的投資組合中。 我們希望頁面正好是 1200 像素寬乘以 800 像素高。 要做到這一點：

1. 在最右邊的導航按鈕（3個垂直點）中，選擇 自定義和控制菜單.

2. 選擇 更多工具>開發人員工具

3. 切換 設備工具欄 提出設備選項和尺寸。

4. 將第一個選項設置為 響應，然後將尺寸設置為1200 x 800，然後按Enter。 現在，頁面將顯示這些尺寸。

4. 在設備工具欄的右側，單擊導航按鈕（3個垂直點），然後選擇 捕捉截圖.

4. Google Chrome瀏覽器將獲得完美的屏幕截圖並將其放入您的 下載 您可以在其中附加並通過電子郵件發送的文件夾。 確保不要選擇全尺寸屏幕截圖，因為這會佔據整個頁面長度並忽略您的高度限制。

Google Chrome瀏覽器鍵盤快捷鍵的屏幕截圖

如果您是鍵盤快捷鍵高手，您可以使用這些快捷鍵截取整頁屏幕截圖。 我不喜歡這種方法，因為我無法設置視口的最大高度……但如果您需要整個頁面的屏幕截圖，它會派上用場。

1. Alt + Command + I 
2. Command + Shift + P

1. Ctrl + Shift + I 
2. Ctrl + Shift + P