因為工作需要我每天都會用到螢幕擷取工具,以前多半是使用 TechSmith 的 Jing 做為首要選擇(後來已經以 TechSmith Screencast 替代),搭配上 Skitch 進行標註或是馬賽克處理,後來對 Mac 更熟悉就改用內建的擷取功能,內建的拍攝截圖工具可以變更預設檔案儲存格式、自動儲存路徑和快照檔名,搭配上 iCloud 或是其他同步工具就能在多台電腦間進行寫作。如果你平常比較沒有擷圖需求,但偶爾又需要保存網頁畫面的話,可以參考接下來要介紹的瀏覽器內建擷圖工具。
網頁截圖
在 iPhone 和 iPad 使用 Safari 瀏覽器擷取完整網頁
Snippyly 擷取網頁畫面、編輯並產生可編輯分享鏈結(Chrome 擴充功能)
變更 Mac 內建拍攝截圖功能格式、儲存路徑和螢幕快照檔名
在免費資源網路社群寫文章已經是維持十多年的習慣,既然每篇文章都是文字搭配圖片的教學文,擷圖就是我每天都會用到的工具,較早以前我是使用 Jing(在 Windows 時代是使用 WinSnap),後來因為 Catalina 不再支援 32 位元應用程式,開發商就決定推出全新 TechSmith Screenshot 取代原有的 Jing,而付費的 Snagit 真的用不習慣,經過幾次試用後依然無法順利上手。
everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果
現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。
Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形
網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(Responsive web design,簡稱 RWD),可自動調整為最適合閱讀的大小,但這些開發過程可能都得借助於測試工具幫忙,例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式,或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。
Full Page Screen Capture 快速擷取完整網頁畫面,轉為圖片或 PDF 格式(Chrome 擴充功能)
對於可以保存網頁畫面的截圖工具相信大家都不陌生,像是 WinSnap、FastStone Capture 或 Mac 系統很好用的 Jing(現在是 TechSmith Screencast)都能達到類似效果,或是透過瀏覽器擴充功能和線上工具也能做到,通常保存下來的都是靜態圖片格式。如果你想要完整保存某個網頁在某個時間點的樣貌,透過第三方建立更具公信力的網頁備份可能是更好的選擇,我曾介紹過 Wayback Machine 網頁時光機就能讓使用者將頁面完整保存在線上,以便隨時回溯到特定時間:
Archiveror 快速備份、永久保存當前看到的網頁內容(Chrome、Firefox)

現在放到網路上的任何資料都可能被永久保存,即使編輯或刪除頁面內容依然無解,大家都知道搜尋引擎 Google 或 Bing 會索引頁面,短時間內就會快取內容,但我之前曾經提到過的網頁時光機 Wayback Machine 可以完整備份網頁畫面及相關檔案,提供可永久引用的來源,如果某個網站營運時間夠長,重要性很高,甚至能夠回溯到更早以前某個時間點畫面。因此網路上的足跡是很難被抹除的,要將任何文字圖片放上網路時務必要更謹慎小心。
Save To The Wayback Machine 一鍵備份網頁內容,查詢已存檔頁面版本(Chrome 擴充功能)
前幾天剛寫完「使用 Wayback Machine 完整備份網頁畫面,建立可永久使用的引用來源」教學,現在大家都知道 Internet Archive 網際網路檔案庫是可以用來備份網頁、查看不同時間網頁樣貌的工具,還能比較不同時間的內容差異。有時候如果要引用某個時間點的內容,透過 Wayback Machine 產生的網址可以永久使用而不必擔心失效,至少無法竄改內容,若是直接擷圖可能難以標示時間,也不能確保內容客觀性。
Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具
免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot Guru、Full Page Screen Capture 都能透過瀏覽器建立網頁擷圖。