作者頭像

By Wanda Instagram icon / 2023/07/10更新

摘要:
  • Chrome網頁截圖主要透過開發人員工具中的一個指令來實現,簡單三步就可以實現4種不同方式的截圖,可以截取整個網頁和指定區域截圖等,相比專業截圖工具來說,Google截圖是完全免費的,屬於Google Chrome內建功能,簡單三步輕鬆掌握截圖秘笈。

  • Google Chrome網頁截圖教學

前言

Google Chrome是用戶使用最多的網路瀏覽器,Chrome有非常多的實用功能,但是大家估計很少用Chrome截圖功能,可能根本就不知道Chrome還可以截圖。其實Chrome有一個極其有用的擷取螢幕截圖的內建功能,是不需要用擴充程式,很靈活,很有效,用起來也特別方便。而且支援Windows和Mac二大主流作業系統,該功能比較隱蔽如果不用,您根本發現不了Google 截圖。可以在Chrome瀏覽器區域內截圖。

在網頁截圖Chrome瀏覽器中主要有下列4種方式:

  • 擷取完整大小的螢幕截圖——可以實現網頁內Chrome 長截圖。
  • 擷取指定區域的螢幕截圖
  • 擷取螢幕截圖——可以實現Chrome 螢幕截圖。
  • 當前節點螢幕截圖——可以實現純淨的網站截圖。

下面我們就來一起探索這四種Chrome 截圖方式是如何實現的吧!

Chrome截圖網頁透過內建功能指令Screenshot實現

這個Chrome瀏覽器截圖方法需要您開啟某些特殊區域,而一般人是不應該進入這些區域進行操作,該區域就是——開發人員工具區塊。顧名思義是開發人員使用的工具,裡面有很多高級的功能,如果您一不小心觸碰點擊到某些地方,可能就會導致您的瀏覽器出錯,不過您也別擔心,按照下列詳細步驟操作就可避免以外發生。

步驟1:首先,將您的Chrome瀏覽器更新到最新版本,開啟瀏覽器並在鍵盤上按下列組合快速鍵

  • Windows作業系統在鍵盤上按:Ctrl+Shift+I或者F12
  • Mac作業系統在鍵盤上按:Command+Option+I

此時會在Chrome瀏覽器頁面彈出開發人員工具區塊。

Chrome開發人員工具介面

步驟2:繼續在鍵盤上按快速鍵:

  • Windows作業系統在鍵盤上按:Ctrl+Shift+P
  • Mac作業系統在鍵盤上按:Command+Option+P

然後,會彈出一個執行指令輸入框,您只需要在輸入框中複製貼上以下Google網頁截圖字元:

截圖

!请注意:在有些Chrome版本中,可能輸入英文的Screenshot也會出現Chrome網頁截圖的各種選項,不過至少Chrome版本114之後,會區分中英文,在中文狀態下必須輸入指令:截圖這兩個字才有效。而英文狀態下必須輸入指令:Screenshot這個單字才有效,需要大家注意一下。

即可自動彈出下滑選單,選擇其中Chrome 網頁截圖的類型,並按Enter鍵,稍等片刻,會直接將截圖以PNG格式下載到預設的Chrome資料夾位置中。

Chrome開發人員工具指令輸入

溫馨提示:可能有用戶預設Chrome開發人員工具是英文版或其他語言版本,變更為繁體中文版教學:按F12開啟開發人員工具>按F1開啟偏好設定>找到語言區塊>將語言設定為中文(台灣)-Chinese(Taiwan)>關閉開發人員工具。當再次開啟時,您將會看到中文版本。

輸入截圖或Screenshot指令後,會有4種不同的網頁截圖方式:

  • 如果您想要截取加載完成的整個網頁,您就選擇擷取完整大小的螢幕截圖,並按Enter鍵進行Chrome網頁長截圖。
  • 如果您想截取網頁上的特定區域,您就選擇擷取指定區域的螢幕截圖,此時滑鼠游標會變成十字形,然後在您想要區域按住滑鼠左鍵不放移動滑鼠畫一個方框,滑鼠左鍵鬆開即可保存方框區域內的截圖。
  • 如果您截圖電腦螢幕顯示區域內的網頁,您就選擇擷取螢幕截圖,並按Enter鍵截圖。
  • 如果您只想截取當前網頁所顯示的內容,您就選擇當前節點螢幕截圖,這不包含瀏覽器外掛所附加的板塊,這是純淨版截取整個當前網頁的方式,這和截取整個網頁有微妙的差別。

下面我說明下差別在哪裡?比如我的Chrome安裝了SEOquake擴充程式外掛,該程式會在每個站點網頁上方顯示網站排名等訊息,會有一個浮動區塊。完整截圖會截取該浮動區塊,節點截圖(我稱為純淨版截圖)則不會截取該區域。

Chrome網頁截圖您需要特別注意的事情

利用Chrome截圖,只能截取瀏覽器區域內的頁面,所以我覺得一般需要使用Chrome截圖的人群可能使用截取當前節點螢幕截圖的方式偏多一些,如:發現很漂亮網頁就可以利用這種方式輕鬆截取。透過我對該功能的研究,Chrome網頁截圖還有很多需要改進或者說是BUG的地方,為了大家能完美的透過Chrome截取網頁,下列幾點在截圖前一定要遵循:

  • 長截圖 Chrome一定要讓網頁中的元素全部加載完成並顯示出來,如:圖像、背景圖像、視頻等,否則會出現截取的網頁全是方塊或網頁不完整。
  • 在截圖時,一定要讓網頁從最上方顯示,不能拖動網頁到頁面底部或中間區域,這是因為有些網頁導航分類區塊是浮動顯示,如果沒在頁面最上方截圖,浮動區塊在截圖時會錯亂顯示。
  • 如果使用當前節點螢幕截圖不能截取整個網頁,可能是網站本身HTML原始碼結構有問題,3.可使用完整螢幕截圖方式進行Chrome長截圖。

總結

Google Chrome截圖主要透過Screenshot內建指令實現,總體來說還是比較方便,一共三部,可稱之為Chrome截圖三步法,相對於電腦截圖或下載截圖軟體,還是稍微遜色一些,但是不用安裝截圖軟體是一大優勢,回想一下我們截圖絕大多數還是截取瀏覽器中的內容,所以還是蠻實用。

不過,Chrome瀏覽器內建功能的指定區域截圖可以使用連續截圖的方式會更好,這種方式應該可以透過程式來實現,當使用鼠標截取指定區域截圖後,十字游標再執行下一次指定區域截圖,如果用戶不想截圖,可以按一下滑鼠的右鍵退出當前指定區域截圖,我覺得這種方式更好一些。期待Chrome團隊能優化此功能,讓Google 網頁截圖變得更完美。

Chrome還有很多的隱藏功能,Chrome清除快取也有一個隱藏方法,它可以快速清除快取並強制重新載入網頁,趕快點擊連結來試一試吧!

如對文章有任何疑問和建議請發送電子郵件到wanda.mytech@gmail.com,我會不定期更新文章內容,希望幫助更多的人解決問題。

 

本篇文章於最近更新修正過,以保證文章內容的有效性和全面性。

您可能還想知道

[教學]Chrome下載位置在哪,如何變更資料夾位置?
Chrome下載位置在哪裡?我下載的檔案去哪裡了?您也許和我有同樣的困擾,本文將簡潔講解Chrome瀏覽器下載位置,以及如何變更Chrome下載資料夾位置,包括手機行動裝置版Chrome下載檔案位置所在,下面將詳細透過圖文方式講解。
[免費]Chrome下載速度提高的11個解決方法
Chrome下載速度是使用Google Chrome用戶所關心的事情,如果大家能在瀏覽器上快速的下載檔案,我想絕不會再使用第三方下載應用程式。但是在瀏覽器上下載一般都比較慢包括Chrome也是一樣慢,所以我在網路上蒐集了一些使Chrome下載加速的辦法,僅供大家參考使用。
[教學]教您如何正確使用Google Chrome下載檔案功能
本篇文章圍繞Google Chrome下載檔案功能該如何正確使用而展開,講解了該如何正確設定Chrome下載檔案的位置;如何查看Google瀏覽器下載的檔案;設定網站允許一次下載多個檔案;以及如何正確下載各種類型檔案。文章以圖文結合形式進行的編輯,閱讀更輕鬆。
[最全]Google Chrome沒聲音的9種解決方法
Chrome沒聲音的解決方案可以分為四大類,第一類:調整Chrome網站上的音訊設定;第二類:調整Windows系統相關的音訊配置;第三類:直接下載Chrome Canary構建版來使用;第四類:屬於其他方法都解決不了問題時使用,復原或重新安裝Windows系統。
[教學]Google Chrome清除Cookie檔案的正確操作方法
Google Chrome清除Cookie檔案的方法主要有2種:第一種:傳統透過進入設定介面清除Cookie檔,可以設定清除的時間範圍;第二種:在當前網站透過操作清除當前網站的Cookie和快取,具有針對性,不會影響其他網站Cookie。二種方法各盡其用,大家各取所需。
[必學]Chrome快速鍵大全:Chrome書籤快捷鍵您不知道的用法
本篇文章主要介紹Chrome快速鍵的使用方法,講解了Chrome視窗和分頁的區別,列舉了不同分類的快速鍵,包括Chrome分頁與視窗、功能、網址列和網頁快速鍵,這些分類的最後以表格形式列出所有快速鍵,註明了Window和Mac系統的操作方法,透過GIF動態圖片,演示一些常用快捷鍵的操作過程。希望能幫助大家更了解Chrome瀏覽器。