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

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

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

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

如果你只想要擷取頁面內容,又不想要在截圖後多一步裁剪圖片的動作,那開發人員工具一定能滿足你的要求。

你可以點選選單或是快捷鍵來使用開發人員工具。

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

點選 Run command 後輸入「screenshot(截圖)」,你會看到以下四個選項。

  1. 滾動選單並選擇你想要的截圖方式。

 

Chrome 開發者截圖選項

點選 Capture area screenshot 自選區域截圖,可以自行選擇截圖區域。使用滑鼠鼠標在所要截圖之區域拖移出方塊即可截圖。

若是要整個完整網頁的截圖,選擇 Capture full size screenshot 全螢幕截圖。使用長截圖可讓你取得完整網頁的圖像,不受當下頁面的限制。

根據我們的測試,在不同網頁中選擇不同選項會有不盡相同的結果。

若你是要一般的截圖,點選 Capture screenshot 一般截圖,便會擷取當下螢幕顯示的頁面。

最後,若你只要擷取 HTML 內容,那就要選擇 Capture node screenshot 節點截圖。

在你成功截圖之後,會看到儲存的對話框。選擇儲存的資料夾並且將截圖命名。另外,所有使用開發者工具擷取的截圖也可以於 Chrome 的下載管理器中查找。

相關文章

推薦文章