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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果

早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。

Scrola 建立自動捲動網站效果的影片,設計網頁或簡報都很好用

Scrola

儘管有很多可以建立網站擷圖的軟體或網路服務,卻很少有人工具能幫你製作出動態效果的網頁畫面,這是什麼意思呢?簡單來說,就像是使用者實際在瀏覽網頁的感覺,會透過捲動方式慢慢往下瀏覽頁面,將這段過程錄製為影片格式,可以在網頁設計或投影片簡報中作為範例,雖然以螢幕錄影工具可以做到,但免不了需要花點時間編輯後製,還好科技就是用來解決問題,而現在已經有網路服務能幫你製作出網站瀏覽影片。

ShotSherpa 利用全球各城市網路節點查看你的網站顯示效果

ShotSherpa 利用全球各城市網路節點查看你的網站顯示效果

如果想檢查網站在世界各大城市能否正常開啟,請當地朋友幫忙協助測試是最快最準確的方法,或者以代理伺服器(Proxy)、VPN 等方式跳板到該地區的網路節點也能模擬連線效果,但這可能需要一些成本租用服務或部署環境。另一種省錢的方法是找到可在不同國家連線到某個網址並顯示連線結果的線上工具,也有助於發現難以連線或無法正常連線的問題。