DOM Snapshot & Diff

Bạn đã từng deploy một thay đổi và tự hỏi "chính xác cái gì đã thay đổi trên trang?" DOM Snapshot & Diff trả lời câu hỏi đó trong vài giây.

Chụp snapshot cấu trúc DOM của bất kỳ trang web nào, sau đó so sánh với một snapshot khác để thấy chính xác những gì đã thay đổi — mọi element được thêm, mọi node bị xoá, mọi attribute bị sửa đổi, tất cả được đánh dấu rõ ràng bằng diff phân biệt theo màu sắc.

Không cần backend. Mọi thứ được lưu trên máy bạn, được mã hoá.

--- TÍNH NĂNG CHÍNH ---

CHỤP DOM TỨC THÌ

Chỉ một cú click (hoặc Ctrl+Shift+S) để chụp toàn bộ DOM tree của bất kỳ trang nào. Snapshot bao gồm cấu trúc HTML, attribute và nội dung text — được lưu trữ cục bộ với mã hoá AES-256.

SO SÁNH CẤU TRÚC CÂY (TREE DIFF)

So sánh hai snapshot cạnh nhau. Xem các phần tử được thêm (xanh lá), bị xoá (đỏ), bị sửa đổi (vàng) và bị di chuyển (xanh dương) trong chế độ xem cây tương tác với điều hướng mở rộng/thu gọn.

VISUAL OVERLAY DIFF [Pro]

Xem các thay đổi trực tiếp TRÊN trang web đang xem. Các element bị thay đổi được highlight bằng viền màu ngay tại vị trí của chúng. Di chuột để xem chi tiết, click để xem toàn bộ diff. Không còn phải đoán xem cái gì đã thay đổi.

ELEMENT PICKER & SELECTOR SCOPING

Không cần cả trang? Sử dụng element picker trực quan hoặc nhập CSS selector để chỉ chụp phần bạn quan tâm — một form, một sidebar, một component cụ thể.

QUẢN LÝ SNAPSHOT

Gắn nhãn, đổi tên, tìm kiếm và sắp xếp các snapshot của bạn. Theo dõi dung lượng lưu trữ trong nháy mắt. Xoá hàng loạt những gì bạn không cần.

XUẤT BÁO CÁO [Pro]

Chia sẻ kết quả phân tích. Xuất kết quả diff dưới dạng báo cáo HTML độc lập, dữ liệu JSON hoặc Markdown — hoàn hảo cho bug report, pull request và đánh giá nhóm.

PHÍM TẮT

Ctrl+Shift+S để chụp, Ctrl+Shift+D để diff nhanh, Ctrl+Shift+O để bật/tắt overlay. Quy trình làm việc nhanh dành cho người dùng chuyên nghiệp.

--- TẠI SAO LẬP TRÌNH VIÊN YÊU THÍCH ---

- Phát hiện regression trước khi người dùng gặp phải

- Tạo bằng chứng cho bug report với bằng chứng cấu trúc rõ ràng

- So sánh DOM giữa staging và production trong vài giây

- Theo dõi DOM mutation qua các lần deploy

- Không cần server bên ngoài — dữ liệu của bạn không bao giờ rời khỏi trình duyệt

--- FREE và PRO ---

FREE (mãi mãi):

- Tối đa 10 snapshot

- Chụp DOM & structural diff

- Lưu trữ cục bộ được mã hoá

- Element picker & selector scoping

- Phím tắt

PRO ($14.99 thanh toán một lần, truy cập trọn đời):

- Không giới hạn snapshot & dung lượng lưu trữ

- Visual overlay diff trên trang web đang xem

- Xuất báo cáo (HTML, JSON, Markdown)

- Hỗ trợ email ưu tiên

--- QUYỀN RIÊNG TƯ & BẢO MẬT ---

- Không truyền dữ liệu — không analytics, không tracking, không request ra bên ngoài

- Tất cả snapshot được mã hoá bằng AES-256-GCM trước khi lưu trữ

- Dữ liệu nhạy cảm (mật khẩu, token) được tự động loại bỏ

- Quyền tối thiểu: chỉ cần activeTab, storage và scripting

- Không cần tài khoản. Không cần đăng ký. Chỉ cần cài đặt và sử dụng.

--- DÀNH CHO AI? ---

- Lập trình viên frontend kiểm tra thay đổi DOM sau khi chỉnh sửa code

- Kỹ sư QA kiểm thử regression qua các lần release

- Tech lead đánh giá tác động của deployment

- Bất kỳ ai cần trả lời: "Cái gì đã thay đổi trên trang này?"

--- HỖ TRỢ ---

Thông tin thêm về extension:

https://smb-base.com/en/application/landing/smb-dsd-ext/dom-snapshot-diff

Chrome web store:

https://chromewebstore.google.com/detail/fhglcikajecklcfdnpgmfkndkebkfbbj?utm_source=item-share-cb

Video demo:

https://www.youtube.com/watch?v=kviW3rIV2sc

Câu hỏi hoặc phản hồi? Liên hệ chúng tôi tại [email protected]

Truy cập: https://smb-base.com/en/application/smb-dsd-ext/support