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 리팩터링
✅ 프런트엔드 테스트
대상 사용자
➡️ 프런트엔드 개발자
➡️ QA 엔지니어
➡️ UI/UX 디자이너
➡️ 프리랜서 및 소규모 팀
왜 뛰어난가
🖼️ 수동 스크린샷보다 편리
📝 제로 학습 곡선
FAQ
❓변경사항 감지 방법? → 픽셀 비교 + 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.