CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
透過詳細報告和DOM分析，比較更新網頁前後的視覺差異。
Image from store
Description from store
厭倦了每次程式碼變更後手動檢查視覺錯誤嗎？UI Testing Inspector 是您可靠的視覺差異檢查工具，具備DOM分析功能。
為什麼要使用？
⚡️ 100% 本地和私密：所有螢幕截圖和比較資料都保存在您的電腦上。無雲端服務，無資料分享
⚡️ 即時反饋循環：安裝擴充功能，建立基準線，進行程式碼變更並立即查看差異。完美適合快速回歸測試
⚡️ 像素級精準檢測：捕捉人眼可能錯過的最微小視覺變化
主要功能：
🔸 一鍵建立基準線：一鍵捕捉任何網頁的「之前」狀態
🔸 像素級精準視覺差異：獲取清晰報告，顯示基準線、當前狀態以及突出精確差異的圖像
🔸 元素檢查：超越基本檢查器。不僅查看程式碼，還能看到DOM和CSS中的變化
🔸 全頁面和視窗截圖：選擇捕捉可見區域或整個可滾動頁面
🔸 報告歷史：儲存並檢視多達15個先前的比較報告
🔸 明亮和暗色主題：舒適的日夜瀏覽體驗
詳細報告內容
🔍 每次比較後，您都會獲得完整的綜合報告：
✔️ 摘要：視覺差異百分比以及新增、刪除和修改元素的計數
✔️ 並排檢視：將「之前」和「之後」的螢幕截圖與突出顯示的「差異」圖像並排比較
✔️ DOM和CSS變更清單：精確識別哪些元素發生了變化。不再猜測像素為何移動 - 查看程式碼級別的變化，如顏色、字型大小或邊距
✔️ 技術詳情：布局變更、內容修改和結構更新的綜合分析
您將捕捉到：
➤ 布局偏移和對齊錯誤
➤ 顏色和樣式變更
➤ 缺失或移動的元素
➤ 字型和文字修改
➤ 圖像差異
運作方式：
1️⃣ 設定視覺基準線：導航到您要測試的頁面，在擴充功能彈出視窗中點擊「設定基準線」。這是您的真實來源。
2️⃣ 安心編碼：對CSS進行變更、更新內容或重構元件。
3️⃣ 即時檢查變更：點擊「與基準線比較」。將開啟新分頁，顯示詳細的視覺報告。
4️⃣ 分析差異：使用並排檢視和檢測到的變更清單來識別每個問題。
5️⃣ 更新基準線：對新版本滿意嗎？只需再次點擊「設定基準線」即可將新外觀儲存為參考。
專業提示
✨ 在捕捉基準線之前等待頁面完全載入
✨ 使用全頁面捕捉進行綜合測試
✨ 在相同的瀏覽器視窗大小下截圖以進行準確比較
✨ 在內容穩定時捕捉基準線
✨ 一次測試一個變更以獲得更清晰的差異結果
✨ 在大型程式碼重構前儲存重要基準線
✨ 比較相似的頁面狀態（相同的使用者登入狀態、載入資料）
使用案例
✅ 視覺回歸測試：主要使用案例。進行變更後運行比較以捕捉任何意外的視覺錯誤。
✅ UI/設計驗證：確保與設計模型的像素級精準實施和品牌一致性。
✅ CSS重構：無懼地重構遺留CSS。快速的視覺差異測試會立即告訴您變更是否產生了意外的副作用。
✅ 前端測試：任何前端測試工作流程的必備工具，提供即時視覺反饋。
為誰而設計？
➡️ 前端開發者：在提交程式碼前捕捉布局問題
➡️ QA工程師：透過可靠的視覺驗證步驟增強您的手動UI測試
➡️ UI/UX設計師：快速確保實際實施符合您的設計
➡️ 自由工作者和小團隊：無企業級價格標籤的視覺測試工具
為何脫穎而出
🖼️ 比手動螢幕截圖更好：停止在桌面資料夾中處理前後圖像
📝 零學習曲線：如果您能瀏覽，就能使用這個工具
常見問題
❓它如何檢測變更？
💬 使用雙重方法：像素對像素比較用於視覺差異，結構掃描用於DOM/CSS變更清單。
❓我的資料安全嗎？
💬 是的。一切都在您的瀏覽器中100%本地處理和儲存。
❓我可以在localhost上使用嗎？
💬 當然可以！在本地開發期間運作完美。
❓動態內容怎麼辦？
💬 該工具設計用於比較靜態狀態。為獲得最佳效果，請在動畫完成且廣告穩定時捕捉截圖。
Latest reviews
- (2025-07-09) Дарья Петрова: Creates a full and detailed report of differences between two versions of web pages. Waiting for Visual comparison of whole page, not just viewport visible parts.