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

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

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

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

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

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

Cloudflare 和 Internet Archive 合作,當伺服器無法連線時提供網頁副本

Cloudflare 和 Internet Archive 合作,當伺服器無法連線時提供網頁副本

根據 Cloudflare 研究發現他們的用戶每天總共花費四年半時間來等待沒有回應的伺服器傳回錯誤訊息,對使用者來說沒人想看到錯誤頁面,如果在網站無法開啟時依然想看到內容,搜尋引擎提供的「頁庫存檔」功能其實很有用,可以查看搜尋引擎在爬行時索引儲存的頁面內容,當然相較於「新鮮」頁面來說可能會有時間差,不過還是能讓我們看到網頁內容,特別是一些文字資訊就能正常瀏覽,我很常在無法正常開啟的網頁使用這個技巧。

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

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

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

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

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

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

Full Page Screen Capture 快速擷取完整網頁畫面,轉為圖片或 PDF 格式(Chrome 擴充功能)

Full Page Screen Capture 快速擷取完整網頁畫面,轉為圖片或 PDF 格式(Chrome 擴充功能

對於可以保存網頁畫面的截圖工具相信大家都不陌生,像是 WinSnapFastStone Capture 或 Mac 系統很好用的 Jing(現在是 TechSmith Screencast)都能達到類似效果,或是透過瀏覽器擴充功能和線上工具也能做到,通常保存下來的都是靜態圖片格式。如果你想要完整保存某個網頁在某個時間點的樣貌,透過第三方建立更具公信力的網頁備份可能是更好的選擇,我曾介紹過 Wayback Machine 網頁時光機就能讓使用者將頁面完整保存在線上,以便隨時回溯到特定時間:

Archiveror 快速備份、永久保存當前看到的網頁內容(Chrome、Firefox)

Archiveror 快速備份、永久保存當前看到的網頁內容(Chrome、Firefox)
Copyright : rawpixel / 123RF Stock Photos

現在放到網路上的任何資料都可能被永久保存,即使編輯或刪除頁面內容依然無解,大家都知道搜尋引擎 Google 或 Bing 會索引頁面,短時間內就會快取內容,但我之前曾經提到過的網頁時光機 Wayback Machine 可以完整備份網頁畫面及相關檔案,提供可永久引用的來源,如果某個網站營運時間夠長,重要性很高,甚至能夠回溯到更早以前某個時間點畫面。因此網路上的足跡是很難被抹除的,要將任何文字圖片放上網路時務必要更謹慎小心。

Save To The Wayback Machine 一鍵備份網頁內容,查詢已存檔頁面版本(Chrome 擴充功能)

Save To The Wayback Machine 一鍵備份網頁內容,查詢已存檔頁面版本(Chrome 擴充功能)

前幾天剛寫完「使用 Wayback Machine 完整備份網頁畫面,建立可永久使用的引用來源」教學,現在大家都知道 Internet Archive 網際網路檔案庫是可以用來備份網頁、查看不同時間網頁樣貌的工具,還能比較不同時間的內容差異。有時候如果要引用某個時間點的內容,透過 Wayback Machine 產生的網址可以永久使用而不必擔心失效,至少無法竄改內容,若是直接擷圖可能難以標示時間,也不能確保內容客觀性。

Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具

Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具

免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot GuruFull Page Screen Capture 都能透過瀏覽器建立網頁擷圖。

使用 Wayback Machine 完整備份網頁畫面,建立可永久使用的引用來源

使用 Wayback Machine 完整備份網頁畫面,建立可永久使用的引用來源
Copyright : rawpixel / 123RF Stock Photos

幾天前我介紹了「以網頁時光機 Wayback Machine 比較不同時間點的網頁內容差異」,也就是大家很熟悉的 Internet Archive 最近推出的新功能,這項服務確實非常好用,除了可以回溯查看某個網站在不同時間點樣貌,對於已經被刪除或編輯後的網頁內容也有保存紀錄或回復的效果。順帶一提,記得之前還看過付費服務可以協助網站管理員從 Wayback Machine 將以前的網頁資料恢復(因為這些備份還是得經過處理才能變回一般網頁),若網頁放在虛擬主機又沒續費而被刪除是可以救回資料的方法。