網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(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. 完整擷取網頁後產生為長擷圖