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

如何使用Google Chrome瀏覽器截屏

如果您是一家機構或公司,擁有要在線共享的網站或頁面的組合,那麼您可能會經歷嘗試獲取統一的痛苦。 截圖 每個站點。

我們正在與之合作的客戶之一 內聯網解決方案 可以在公司範圍內內部託管。 內聯網對於公司交流公司新聞,分發營銷信息,提供福利信息等非常有用。

我們幫助OnSemble將其Intranet解決方案移出了母公司的網站。 這是一個龐大的項目,其中包含了所有內容,包括建立新的社交資料,更新Marketo,然後分解他們過去為合併站點而進行的一些自定義開發。

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

您可能沒有意識到這一點,但是您可以使用Google Chrome內置的一組強大的開發人員工具來捕獲完美的屏幕截圖。 有趣的是,儘管它具有驚人的靈活性,但它並不是一個非常知名的功能。

這是一個快速視頻教程,介紹如何使用Google Chrome瀏覽器拍攝完美的,特定尺寸的網頁截圖:

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

Google Chrome的開發者工具可以選擇使用其設備工具欄預覽網站。 該工具的構建旨在使開發人員可以在不同設備上以不同的視口大小查看網站的外觀……但是,它恰好也是獲取完美尺寸的網頁截圖的理想方法。

在這種情況下,我們希望跨行業的每個重要客戶(已經建立了漂亮的Intranet網站)截取屏幕快照,以便我們可以在他們網站上的投資組合中顯示他們。 我們希望頁面的寬度為1200px,高度為800px。 要做到這一點:

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

Google Chrome開發人員工具菜單

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

Google Chrome開發人員工具

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

使用Google Chrome切換設備工具欄

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

響應式設備工具欄Google Chrome

  1. 在設備工具欄的右側,單擊導航按鈕(3個垂直點),然後選擇 捕捉截圖.

使用Google Chrome捕獲屏幕截圖

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

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

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

在Mac上的鍵盤快捷鍵:

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

Windows或Linux上的鍵盤快捷鍵:

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

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.