logo.png
模範城市
2022-09-18

如何使用 Google Chrome 開發者工具截圖?

本篇文章將說明如何使用 Google Chrome 開發者工具擷取截圖。

如何使用 Chrome 開發者工具截圖?

與電腦內建的截圖螢幕鍵(PrtSc)不同的是,使用  Chrome 截圖工具不會擷取整個網頁的頁面,它只會擷取網頁內容。

如果你只想要擷取頁面內容,又不想要在截圖後多一步裁剪圖片的動作,那開發人員工具一定能滿足你的要求。 你可以點選選單或是快捷鍵來使用開發人員工具。

  1. 若是使用 PC 快捷鍵為 Ctrl + Shift + I ,MacOS 系統的快捷鍵則是 Command + Option + I。亦或是點選瀏覽器右上方「三個點」>更多工具>開發人員工具。點選後會打開開發人員選單,顯示出網頁的 HTML 原始碼。 
  2. 然後按下 Ctrl + Shift P (PC) 或是 Command + Shift P (Mac),或者點選開發人員選單右上方的「三個點」>Run Command(執行命令)(開發人員選單不支援中文)。 

若是要擷取完整畫面,在欲截圖的頁面右上方點選三個點,並選擇 Capture screenshot(一般截圖)或是 Capture full size screenshot長截圖)。

  1. 點選 Run command 後輸入「screenshot(截圖)」,你會看到以下四個選項。
  • Capture area screenshot:自選區域截圖
  • Capture full size screenshot:全螢幕截圖
  • Capture node screenshot:節點截圖
  • Capture screenshot:一般截圖
  1. 滾動選單並選擇你想要的截圖方式。

 

Chrome 開發者截圖選項

點選 Capture area screenshot 自選區域截圖,可以自行選擇截圖區域。使用滑鼠鼠標在所要截圖之區域拖移出方塊即可截圖。 若是要整個完整網頁的截圖,選擇 Capture full size screenshot 全螢幕截圖。使用長截圖可讓你取得完整網頁的圖像,不受當下頁面的限制。

根據我們的測試,在不同網頁中選擇不同選項會有不盡相同的結果。 若你是要一般的截圖,點選 Capture screenshot 一般截圖,便會擷取當下螢幕顯示的頁面。

最後,若你只要擷取 HTML 內容,那就要選擇 Capture node screenshot 節點截圖。 在你成功截圖之後,會看到儲存的對話框。選擇儲存的資料夾並且將截圖命名。另外,所有使用開發者工具擷取的截圖也可以於 Chrome 的下載管理器中查找。