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

最後更新於 2020 年 07 月 07 日

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

本文要介紹的「Screenshot Tracker」是一個開放原始碼 Mac 應用程式,可快速追蹤網頁在不同裝置的呈現狀態,而且操作上非常簡單,只要把要擷圖的網址貼上,選擇裝置類型就能產生以不同裝置瀏覽頁面的畫面。

Screenshot Tracker 我認為值得推薦的部份包括:

  1. 支援批次貼上網址列表,可一次快速製作多個頁面擷圖。
  2. 能選擇常見裝置類型,像是一般桌機、平板電腦和手機。
  3. 產生為長畫面擷圖,完整顯示整個網頁內容。

雖然 Screenshot Tracker 號稱能在幾個常用作業系統使用,但截自目前為止,只有在 Mac 可以正常實現完整功能,如果你的日常需要測試多個頁面在不同裝置顯示效果,一般線上擷圖做不到的這個軟體就能做到。

Screenshot Tracker
https://screenshot-tracker.nomadinteractive.co/

使用教學

STEP 1

開啟 Screenshot Tracker 網站,找到下載鏈結會連到 GitHub 頁面,從底下選擇要下載的檔案格式。前面有提到當前 Screenshot Tracker 第一次釋出的版本僅支援 macOS ,未來應該可以在 Windows 和 Linux 使用。

STEP 2

下載後解壓縮,將 Screenshot Tracker 拖曳到「應用程式」資料夾即可開啟使用。

Screenshot Tracker 支援深色模式,點選右下角的圖示就能切換。

STEP 3

點選「New Run」建立一個新的擷圖工作,設定一下任務名稱、要擷取的網址列表,從底下選擇要擷圖的裝置類型,包括桌機(1440px)、平板電腦橫式和直式(1024px、768px)和智慧型手機(350px),分別代表不同的螢幕寬度,最後點選「Start Run」開始執行。

STEP 4

Screenshot Tracker 會將擷取後的螢幕畫面預覽顯示列出來,點選右上角 Open Screenshots Folder 可以開啟螢幕擷圖資料夾查看完整大小的擷圖。

STEP 5

或是直接點選擷圖預覽,就能在 Screenshot Tracker 看到以不同裝置開啟網址的樣貌。

值得一試的三個理由:

  1. 開放原始碼網頁擷取工具,可快速製作不同網址的畫面截圖
  2. 可模擬一般電腦、平板電腦和智慧型手機的螢幕大小
  3. 完整擷取網頁後產生為長擷圖

 

相關的文章

微軟打造 Bing 新冠肺炎疫情追蹤平台,以視覺化呈現各國家確診人數

從今年農曆過年開始,新聞就圍繞著新型冠狀病毒(COVID-19,武漢肺炎),每天都會有來自各國的疫情發展或是台灣又出現多少確診個案,這些資訊會由衛福部「中央流行疫情指揮中心」以記者會形式統一對外說明。如果要知道目前疫情變化,除了從電視新聞、網路或平面媒體獲得,也有網站以更直覺方式呈現,像是 Operations Dashboard for ArcGIS 或 Worldometer 都能即時獲取世界不同國家的新冠肺炎疫情資訊。

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

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

Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)

如果要讓行動裝置正常瀏覽網頁,可以另外製作手機版頁面或是透過自適應網頁設計(Responsive Web Design,簡稱 RWD)技術來調整版型,那麼要怎麼知道一個網站有沒有支援 RWD 呢?最簡單的方法就是拖曳調整視窗大小,看看網頁是不是在寬度較窄時仍可正常顯示,例如選單可能會縮起變成點選後才展開的按鈕。大部分的開發者都會使用行動裝置測試版型,但每個裝置大小都有差異,若沒辦法同時擁有這麼多裝置進行測試,其實透過一些電腦上的工具也能達到相同效果。

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

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

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

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

Sprints 在 Mac 實現番茄鐘工作法,在工具列顯示倒數計時功能

大家一定聽過很有名的「番茄鐘工作法」(Pomodoro Technique),這是一種時間管理法,可以讓我們更專注於眼前的工作,對於像我這種很習慣拖延、無法當下專心把事情做完的人來說特別有用,簡單來說,它的實踐方式是先決定一件你要進行的工作,將番茄工作法的計時器設定 25 分鐘,在這時間裡就只專心做同一件事情,時間過後用 5 分鐘時間專心休息,並再以 25 分鐘為單位重新開始,四個循環後就進行一個較長時間(10-15 分鐘)休息。

回應