CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Đo khoảng cách chính xác đến từng pixel và lưới trên bất kỳ trang web nào.
Image from store
Description from store
Độ chính xác của pixel là anh hùng thầm lặng của thiết kế tuyệt vời. Một sự sai lệch một pixel có thể phá vỡ nhịp điệu của lưới, khiến văn bản có cảm giác lệch tâm hoặc khiến toàn bộ thành phần trông "gần đúng" nhưng không hoàn toàn. Grid Ruler Lite cung cấp cho các nhà phát triển giao diện người dùng, nhà thiết kế UI/UX, người kiểm tra QA và bất kỳ ai quan tâm đến việc đánh bóng hình ảnh một bộ công cụ đo lường tức thời trong trình duyệt—không có phần mềm thiết kế nặng, không có bảng DevTools lộn xộn và không có ảnh chụp màn hình được xáo trộn vào các ứng dụng bên ngoài. Chỉ bằng một cú nhấp chuột, tiện ích mở rộng sẽ phủ một thước kẻ có thể thay đổi kích thước, các hướng dẫn bắt vào lưới và các lưới cơ sở tùy chọn lên trên bất kỳ trang web nào để bạn có thể kiểm tra khoảng cách, xác minh lưới 8 điểm và ghi lại bằng chứng về lỗi bố cục trong vài giây.
Điểm nổi bật của Grid Ruler Lite là gì?
Kích hoạt một cú nhấp chuột, Hủy bỏ một cú nhấp chuột
Nhấp vào biểu tượng thanh công cụ (hoặc gọi phím tắt bạn đặt trong cài đặt bàn phím trình duyệt) và tiện ích mở rộng sẽ chèn một tiện ích nhẹ<canvas> lớp phủ được đóng gói trong Shadow-DOM của riêng nó. CSS của trang của bạn không thể can thiệp và lớp phủ không bao giờ thay đổi cây DOM mà bạn đang thử nghiệm. Nhấp lại và mọi hướng dẫn, lưới và nhãn sẽ biến mất—không tải lại trang, không có trình lắng nghe sự kiện nào tồn tại.
Tại sao bạn sẽ muốn có nó trong bộ công cụ của mình
Tiết kiệm thời gian: Đo khoảng đệm trong DevTools đòi hỏi phải khoan vào các hộp lồng nhau và thêm giá trị đường viền và lề trong đầu. Grid Ruler Lite hiển thị khoảng cách trực quan chỉ bằng một lần kéo.
Giảm lỗi: Phát hiện các lỗi hồi quy nhỏ trước khi chúng được đưa vào giai đoạn dàn dựng hoặc tệ hơn là sản xuất, đặc biệt là tại các điểm dừng phản hồi mà bộ phận QA không phải lúc nào cũng chú ý.
Cải thiện khả năng cộng tác: Các nhà thiết kế có thể phủ lưới 8 điểm trực tiếp lên bản dựng đã triển khai và chia sẻ ảnh chụp màn hình, cung cấp cho các nhà phát triển phản hồi pixel chính xác mà không cần bình luận Figma.
Giữ tập trung: Không cần phải alt-tab vào Photoshop hoặc mở tệp Sketch chỉ để đo một nút. Mọi thứ diễn ra trên trang trực tiếp, chính xác như người dùng cuối nhìn thấy.
Giáo dục & Tài liệu: Các nhà quản lý sản phẩm và biên tập viên kỹ thuật có thể chứng minh hành vi bố cục bằng ảnh chụp màn hình, giúp tài liệu thông số kỹ thuật rõ ràng hơn cho tất cả các bên liên quan.
Nhóm người dùng mục tiêu
Nhóm người dùng
Nhà phát triển Front-End
Cần xác minh khoảng cách CSS, khoảng cách flexbox và căn chỉnh thành phần qua các điểm ngắt. Kéo thước kẻ, bám vào các cạnh, khóa hướng dẫn, xuất ảnh chụp màn hình để xem xét PR
Nhà thiết kế UI/UX
Phải xác nhận rằng các bản dựng dev tôn trọng hệ thống thiết kế 8 điểm hoặc 10 điểm. Phủ lưới đường cơ sở, đo khoảng đệm, chia sẻ PNG có chú thích
Kiểm tra viên QA
Báo cáo lỗi hoàn hảo đến từng pixel với bằng chứng rõ ràng
Các phép đo nhanh và chụp ảnh màn hình bằng một phím sẽ được đưa thẳng vào trình theo dõi lỗi
Biên tập viên nội dung & PM
Kiểm tra tiêu đề, khoảng cách giữa các ô quảng cáo và bố cục thẻ trên các trang do CMS điều khiển Lớp phủ phi kỹ thuật giúp tránh sự phức tạp của DevTools
Giáo viên và Học sinh
Dạy các nguyên tắc thiết kế, lý thuyết lưới và bố cục phản hồi trực tiếp trên trình duyệt Trình diễn trực quan, thời gian thực mà không cần công cụ bên ngoài