DOM Snapshot & Diff

# DOM Snapshot & Diff - Tiện ích Chrome

Chụp, So sánh và Trực quan hóa Thay đổi DOM với Độ chính xác cao

Công cụ snapshot và diff DOM chuyên nghiệp dành cho lập trình viên web, kỹ sư QA và các nhóm frontend. Phát hiện lỗi regression, theo dõi thay đổi và ghi lại các sửa đổi DOM mà không cần backend.

---

## 🎯 Tổng quan

DOM Snapshot & Diff là một tiện ích Chrome mạnh mẽ cho phép bạn chụp snapshot DOM tại bất kỳ thời điểm nào và thực hiện so sánh cấu trúc chi tiết. Dù bạn đang gỡ lỗi regression sau khi triển khai, ghi lại thay đổi DOM cho báo cáo lỗi, hay đảm bảo tính nhất quán trực quan giữa các phiên bản, công cụ này cung cấp phân tích diff toàn diện với overlay trực quan và bộ lọc thông minh.

Lợi ích chính:

- ✅ Không cần Backend - 100% phía client, hoàn toàn riêng tư và bảo mật

- ✅ Dom Diff tức thì - So sánh cây cấu trúc với tô sáng trực quan

- ✅ Lưu trữ mã hóa - Mã hóa AES-256-GCM cho tất cả snapshot

- ✅ Không truyền dữ liệu - Mọi thứ đều ở trên máy của bạn

- ✅ Báo cáo chuyên nghiệp - Xuất sang HTML, JSON, Markdown và PDF

---

## 🚀 Tính năng cốt lõi

### 1. Chụp Snapshot DOM

Chụp toàn bộ cấu trúc DOM tại bất kỳ thời điểm nào chỉ với một cú nhấp hoặc phím tắt.

Những gì được chụp:

- Toàn bộ cấu trúc HTML (cây DOM đầy đủ)

- Kiểu CSS đã tính toán cho từng phần tử

- Tất cả thuộc tính phần tử (id, class, data-*, aria-*, v.v.)

- Nội dung văn bản và siêu dữ liệu

- Ngữ cảnh trang (URL, thời gian, viewport, user agent)

Cách sử dụng:

1. Điều hướng đến trang web bất kỳ

2. Nhấp vào biểu tượng tiện ích và nhấn nút "Chụp Snapshot"

3. Hoặc dùng phím tắt Ctrl+Shift+S (Windows/Linux) hoặc Cmd+Shift+S (Mac)

4. Snapshot được lưu ngay lập tức với mã hóa vào bộ nhớ cục bộ

Giới hạn lưu trữ:

- Gói Miễn phí: Tối đa 10 snapshot

- Gói Pro: Unlimited snapshot

Tính năng:

- Gắn thẻ siêu dữ liệu tự động (URL, thời gian, kích thước viewport)

- Thống kê hiệu suất (thời gian chụp, số lượng phần tử)

- Tối ưu hóa kích thước cho cây DOM lớn

- Thông báo cảnh báo cho snapshot quá lớn (>50MB)

---

### 2. Quản lý Snapshot

Giao diện CRUD toàn diện để tổ chức và quản lý các snapshot đã chụp.

Tính năng quản lý:

- Chế độ danh sách: Tất cả snapshot hiển thị với thời gian, URL và kích thước

- Đổi tên: Thêm nhãn tùy chỉnh để dễ nhận diện

- Xóa: Xóa một hoặc nhiều snapshot

- Nhân bản: Sao chép snapshot hiện có làm mẫu so sánh

- Tìm kiếm & Lọc: Tìm snapshot theo URL, nhãn hoặc khoảng thời gian

- Theo dõi lưu trữ: Chỉ báo sử dụng bộ nhớ theo thời gian thực

Cách sử dụng:

1. Mở popup tiện ích để xem snapshot gần đây

2. Nhấp "Xem tất cả Snapshot" để có giao diện quản lý đầy đủ

3. Chọn snapshot bằng checkbox cho thao tác hàng loạt

4. Dùng thanh tìm kiếm để lọc theo từ khóa

5. Theo dõi mức sử dụng bộ nhớ ở cuối bảng

---

### 3. So sánh Cấu trúc (Tree Diff)

Thuật toán so sánh cây mạnh mẽ xác định mọi thay đổi giữa hai snapshot DOM.

Phân loại Diff:

- 🟢 THÊM MỚI: Các phần tử mới xuất hiện

- 🔴 ĐÃ XÓA: Các phần tử bị xóa

- 🟡 ĐÃ SỬA: Các phần tử có thuộc tính, kiểu hoặc văn bản thay đổi

- 🔵 ĐÃ DI CHUYỂN: Các phần tử thay đổi vị trí trong cây

- ⚪ KHÔNG THAY ĐỔI: Không có sửa đổi (mờ hoặc ẩn)

Cách sử dụng:

1. Chọn hai snapshot từ danh sách bằng checkbox

2. Nhấp nút "So sánh đã chọn"

3. Chọn chế độ xem:

- Chế độ phân chia: So sánh song song

- Chế độ hợp nhất: Cây gộp với các dấu hiệu màu

4. Mở rộng các mục diff để xem thay đổi chi tiết

5. Điều hướng qua các thay đổi bằng nút Trước/Tiếp theo

Chi tiết Diff bao gồm:

- Đường dẫn phần tử (selector DOM đầy đủ)

- Thay đổi thuộc tính (giá trị cũ → giá trị mới)

- Sửa đổi kiểu CSS

- Cập nhật nội dung văn bản

- Thay đổi vị trí trong cấu trúc cây

Giới hạn:

- Gói Miễn phí: 3 lần diff mỗi ngày

- Gói Pro: Không giới hạn lần diff

---

### 4. Overlay Diff Trực quan (Pro)

Tô sáng các thay đổi trực tiếp trên trang web với overlay tương tác.

Cách hoạt động:

1. Chọn snapshot đã lưu — DOM trang được tái tạo từ dữ liệu snapshot để so sánh chính xác

2. Nhấp "Bật/Tắt Overlay" hoặc dùng Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (Mac)

3. Các phần tử thay đổi được tô sáng với viền màu

4. Di chuột lên phần tử được tô sáng để xem chi tiết diff

5. Nhấp vào phần tử để xem thông tin thay đổi đầy đủ

Chỉ báo Overlay:

- Viền xanh lá: Phần tử được thêm mới

- Viền đỏ nét đứt: Phần tử bị xóa (dạng bóng mờ)

- Viền vàng: Phần tử đã được sửa đổi

- Viền xanh dương: Phần tử đã di chuyển

Điều khiển tương tác:

- Bật/tắt overlay

- Lọc theo loại thay đổi (chỉ hiện thêm mới, sửa đổi, v.v.)

- Điều hướng giữa các thay đổi bằng phím mũi tên (← / →)

- Điều chỉnh độ mờ overlay để xem rõ hơn

- Đóng overlay bằng phím Esc

Trường hợp sử dụng:

- Xác nhận theo thời gian thực trong quá trình phát triển

- Kiểm thử QA trực quan trước khi triển khai

- Xác định các tác dụng phụ không mong muốn

- Gỡ lỗi CSS hoặc vấn đề bố cục

Chỉ dành cho Gói Pro

---

### 5. Bộ lọc Nhiễu (Pro)

Loại bỏ các thay đổi không liên quan khỏi kết quả diff bằng các quy tắc lọc thông minh.

Mẫu nhiễu mặc định:

- Dấu thời gian và thuộc tính datetime động

- Khung chứa quảng cáo và iframe

- Script phân tích (Google Analytics, Hotjar, v.v.)

- ID ngẫu nhiên (UUID, mẫu hash)

- CSRF token và thuộc tính nonce

- Dữ liệu theo phiên

- Pixel theo dõi được tạo tự động

Cách cấu hình:

1. Mở Cài đặt từ popup tiện ích

2. Điều hướng đến phần Bộ lọc Nhiễu

3. Bật/tắt các quy tắc được định sẵn

4. Thêm quy tắc bỏ qua tùy chỉnh:

- CSS Selectors: #dynamic-banner, .ad-slot, .promo

- Thuộc tính: data-timestamp, data-session-*

- Mẫu Regex: Cho giá trị thuộc tính

5. Lưu hồ sơ lọc theo tên miền

Lợi ích:

- Kết quả diff sạch hơn, tập trung vào thay đổi có ý nghĩa

- Giảm kết quả dương tính giả

- Xử lý diff nhanh hơn

- Tỉ lệ tín hiệu/nhiễu tốt hơn

Chỉ dành cho Gói Pro

---

### 6. Xuất Báo cáo (Pro)

Tạo báo cáo có thể chia sẻ ở nhiều định dạng để ghi lại và cộng tác.

Định dạng được hỗ trợ:

| Định dạng | Mô tả | Trường hợp sử dụng |

|--------|-------------|----------|

| HTML | Trình xem tương tác độc lập | Chia sẻ với nhóm, đính kèm vào ticket |

| JSON | Cấu trúc dữ liệu diff thô | Tích hợp CI/CD, công cụ tùy chỉnh |

| Markdown | Bảng tóm tắt + chi tiết diff | GitHub Issues, PR, tài liệu |

| PNG/PDF | Ảnh chụp màn hình có chú thích | Báo cáo lỗi, thuyết trình cho các bên liên quan |

Cách xuất:

1. Hoàn thành so sánh diff

2. Nhấp nút "Xuất" ở góc trên bên phải

3. Chọn định dạng mong muốn

4. Chọn tùy chọn mã hóa (khuyến nghị)

5. Tải xuống file

Tính năng Báo cáo HTML:

- Hoàn toàn độc lập (không cần internet)

- Cây diff tương tác (mở rộng/thu gọn)

- So sánh phần tử song song

- Thống kê tóm tắt

- Tất cả CSS/JS được nhúng inline

Bảo mật:

- Mặc định: Xuất có mã hóa (yêu cầu cụm từ mật khẩu)

- Tùy chọn: Không mã hóa (hiển thị hộp thoại cảnh báo)

- Tiêu chuẩn mã hóa AES-256-GCM

Chỉ dành cho Gói Pro

---

### 7. Giới hạn phạm vi Selector

Tập trung chụp snapshot và diff vào các phần DOM cụ thể để phân tích chính xác.

Cách sử dụng:

1. Tùy chọn A - Selector thủ công:

- Nhập CSS selector vào trường "Phạm vi" (ví dụ: #main-content, .product-grid)

- Nhấp "Chụp Snapshot"

2. Tùy chọn B - Chọn phần tử:

- Nhấp nút "🎯 Chọn phần tử"

- Nhấp vào bất kỳ phần tử nào trên trang web

- Selector được tạo tự động

- Nhấp "Chụp Snapshot"

Lợi ích:

- Giảm kích thước snapshot và thời gian xử lý

- Loại bỏ các phần trang không liên quan

- Tập trung vào các khu vực thành phần hoặc tính năng cụ thể

- Thao tác diff nhanh hơn

Có trong: Gói Miễn phí & Pro