Google Chrome 瀏覽器內建螢幕截圖,抓取網頁畫面免安裝擴充功能

Google Chrome 瀏覽器內建螢幕截圖,抓取網頁畫面免安裝擴充功能

一般來說我比較習慣使用 Mac 內建的截圖功能,只要熟記快捷鍵就能快速擷取特定範圍、視窗畫面或整個螢幕,之前寫過「變更 Mac 內建拍攝截圖功能格式、儲存路徑和螢幕快照檔名」教學搭配使用就能將螢幕擷圖功能發揮到最大、最完整,跟 Windows 內建截圖功能有異曲同工之妙,不過如果平常偶爾才擷取網頁特定畫面、上傳雲端圖片空間或傳給朋友,其實 Google Chrome 瀏覽器也內建螢幕截圖工具,接下來就教大家怎麼把這項功能打開吧!

FireShot 免費網頁截圖工具推薦,可捕捉完整網頁畫面或可見範圍

FireShot 免費網頁截圖工具推薦,可捕捉完整網頁畫面或可見範圍

想要抓取電腦螢幕畫面方法很多,除了使用系統內建的擷圖功能,也有不少擷圖軟體或瀏覽器擴充功能可用,當然現在還有線上螢幕錄影工具,只要打開瀏覽器就能進行桌面錄影或攝影機影像錄製,還能搭配上麥克風或其他聲音輸入,對於要製作教學或素材就變得很有用。順帶一提,上個月介紹的 Dropbox Capture 是我覺得非常便捷的螢幕擷取軟體,截圖錄影後可立即產生分享鏈結。

ILoveAdaptive 線上測試回應式網頁設計在不同裝置呈現效果

ILoveAdaptive 線上測試回應式網頁設計在不同裝置呈現效果

現在製作網站、部落格或網路服務時都會考慮到行動裝置用戶,因為智慧型手機已經普及,很多人在工作以外的時間甚至很少使用電腦,讓不同螢幕大小的裝置都能正常瀏覽非常重要。以往會將網站區分為電腦版或手機版,使用不同的版型設計,好處是開發上比較簡單,這幾年流行使用回應式網頁設計(Responsive Web Design,簡稱 RWD),讓網頁在不同裝置上瀏覽時可以對應不同解析度而有適合的閱讀效果。

Microsoft Edge 內建網頁擷取功能,快速截圖加入附註標示匯出 Jpeg

Microsoft Edge 內建網頁擷取功能,快速截圖加入附註標示匯出 Jpeg

因為工作需要我每天都會用到螢幕擷取工具,以前多半是使用 TechSmith 的 Jing 做為首要選擇(後來已經以 TechSmith Screencast 替代),搭配上 Skitch 進行標註或是馬賽克處理,後來對 Mac 更熟悉就改用內建的擷取功能,內建的拍攝截圖工具可以變更預設檔案儲存格式自動儲存路徑和快照檔名,搭配上 iCloud 或是其他同步工具就能在多台電腦間進行寫作。如果你平常比較沒有擷圖需求,但偶爾又需要保存網頁畫面的話,可以參考接下來要介紹的瀏覽器內建擷圖工具。

在 iPhone 和 iPad 使用 Safari 瀏覽器擷取完整網頁

在 iPhone 和 iPad 使用 Safari 瀏覽器擷取完整網頁畫面

因為工作需要平時在 iPhone 手機最常用到的功能之一大概就是螢幕截圖吧!相信許多朋友對於手機、平板電腦擷取畫面並不陌生,而且很多時候要暫存資料也會用到,像我在搜尋想寫的主題時除了直接把資料丟進 Pocket 稍後閱讀,也會透過擷圖方式把資料儲存起來,除此之外,手機拍攝截圖也經常用於分享內容,例如從 Facebook、Twitter 看到的資訊想貼到其他平台可能很多人會選擇使用截圖呈現。

Snippyly 擷取網頁畫面、編輯並產生可編輯分享鏈結(Chrome 擴充功能)

Snippyly 擷取網頁畫面、編輯並產生可編輯分享鏈結(Chrome 擴充功能)

如果要跟同事或朋友說明網站上某個功能的位置,用文字可能容易有誤差或找不到,通常會直接擷取網頁、標註框線或加入文字描述,這個流程使用手機操作並不會太難,若是要在電腦前進行就必須要知道如何擷圖、編輯圖片甚至是上傳到圖片空間,有些瀏覽器擴充功能就解決這一系列麻煩,像是 Smartshot 可以快速擷取網頁畫面、對圖片裁切或加上框線、標記箭頭;qSnap 一鍵將網頁轉圖片,可編輯後上傳產生分享鏈結。

變更 Mac 內建拍攝截圖功能格式、儲存路徑和螢幕快照檔名

變更 Mac 內建拍攝截圖功能格式、儲存路徑和螢幕快照檔名

在免費資源網路社群寫文章已經是維持十多年的習慣,既然每篇文章都是文字搭配圖片的教學文,擷圖就是我每天都會用到的工具,較早以前我是使用 Jing(在 Windows 時代是使用 WinSnap),後來因為 Catalina 不再支援 32 位元應用程式,開發商就決定推出全新 TechSmith Screenshot 取代原有的 Jing,而付費的 Snagit 真的用不習慣,經過幾次試用後依然無法順利上手。

PrintFriendly 讓網頁適合列印或轉 PDF,移除側邊欄或廣告更省紙張墨水

PrintFriendly

如果你在工作上會時常需要將網頁列印出來,或是轉為 PDF 格式保存,可能會發現一般網頁列印效果很差,而且可能會帶入許多不必要的資訊(例如導覽列、廣告或其他功能),無形中耗費許多紙張和墨水。比較好的作法是先用瀏覽器的閱讀模式,僅保留最重要的部分,再將內容輸出會好很多;若你想要維持看到的網頁樣式,亦可利用瀏覽器的「開發人員工具」先手動移除不必要的部分,就能讓列印的範圍縮小,也能減少不必要的浪費。

everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果

everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果

現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive ViewerScreenDump 或是 Responsive Screenshots

Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形

Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形

網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(Responsive web design,簡稱 RWD),可自動調整為最適合閱讀的大小,但這些開發過程可能都得借助於測試工具幫忙,例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式,或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。