作者頭像

By Wanda / 2022/03/03更新

摘要:

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

  • Google Chrome網頁截圖教學

前言

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

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

  • 擷取完整大小的熒幕截圖
  • 擷取指定區域的熒幕截圖
  • 擷取熒幕截圖
  • 當前節點熒幕截圖

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

 

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

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

Screenshot

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

Chrome開發人員工具指令輸入

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

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

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

 

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

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

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

總結

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

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

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

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