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

網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌，以前會針對行動裝置另外製作一個行動版，現在比較普遍作法是使用響應式網頁設計（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 看到以不同裝置開啟網址的樣貌。