Pixel Ruler

Dùng Pixel Ruler để đo pixel trên mọi trang web: thước trên màn hình cho kích thước phần tử và khoảng cách.

Pixel Ruler đặt một chiếc thước lên màn hình để bạn đo mọi thứ ngay trong trình duyệt. Bấm biểu tượng trên thanh công cụ, rê chuột qua bố cục và đọc khoảng cách chính xác theo pixel CSS. Đưa con trỏ lên một phần tử là có ngay chiều rộng, chiều cao, padding và khoảng hở tới các khối xung quanh. Các con số khớp với DevTools, vì tiện ích đọc đúng những pixel CSS mà trình duyệt dùng để vẽ trang. Không phải mở bảng điều khiển, không phải xuất ảnh chụp màn hình, không phải cộng trừ. Chỉ là một thước đo màn hình nằm trên chính trang bạn đang xem. Một lớp phủ duy nhất, không phải chuyển qua lại: 📏 Giữ chuột và kéo để đo khoảng cách giữa hai điểm bất kỳ trên trang. 📏 Trỏ vào một phần tử để xem kích thước, padding và khoảng cách tới các phần tử lân cận. 📏 Thả các đường gióng dọc và ngang rồi canh các khối theo chúng. Lúc nào cũng có một cây thước trên màn hình để đối chiếu, và một phím sẽ chép kết quả vào bộ nhớ tạm kèm CSS selector của phần tử dưới con trỏ. Bắt đầu trong ba bước: 1. Cài tiện ích và ghim nó lên thanh công cụ. 2. Mở trang bạn đang làm và bấm vào biểu tượng. 3. Kéo, trỏ, đo — xong thì bấm Esc hai lần. Lập trình viên front-end dùng nó để đối chiếu bố cục với bản thiết kế. Designer dùng như một cây thước cho trang khi file bàn giao đã lỗi thời. Kỹ sư QA báo lỗi bằng con số thật thay vì "cái nút trông hơi thấp". Ai cần đo pixel nhanh trên một trang đang chạy thật đều có kết quả sau hai cú bấm. Thước đo web này cho bạn: - khoảng cách giữa hai điểm bất kỳ, tính bằng pixel - chiều rộng và chiều cao của mọi phần tử trên trang - padding, margin và khoảng hở giữa các phần tử cạnh nhau - khoảng lệch từ một phần tử tới các khối xung quanh - vạch chia dọc mép trên và mép trái cửa sổ - thẻ, class và CSS selector của phần tử vừa đo - đường gióng dùng lại được để kiểm tra căn chỉnh Bàn phím giữ con trỏ đứng yên: → Shift khóa phép đo theo trục ngang hoặc trục dọc → Phím mũi tên dịch điểm hiện tại đúng 1 px → Esc xóa phép đo hiện tại, Esc lần nữa trả trang lại cho bạn → Một phím tắt chép kết quả vào bộ nhớ tạm Cài một lần là bạn có đúng cây thước đo pixel mà người dùng Windows, Linux và ChromeOS đang chạy, và cũng là cây thước đo pixel mà người dùng Mac đang chạy, vì công cụ nằm trong trình duyệt chứ không nằm trong hệ điều hành. Không có bản tải về nào phải đi tìm, không trình cài đặt, không cần quyền quản trị: tiện ích đến từ Chrome Web Store chỉ với một cú bấm. Khi ra mắt, đây là thước đo pixel miễn phí với mọi tính năng mở cho tất cả mọi người. Ứng dụng thước màn hình mở ra trong cửa sổ riêng luôn đo sai ngay khi trang cuộn. Thước đo pixel này được vẽ bên trong tab và cuộn cùng nội dung. Đây là một thước đo pixel online: chạy trên trang thật, trên máy chủ staging, trên site của khách hàng, phía sau màn đăng nhập. Một thước đo pixel trên desktop chỉ đo được ảnh tĩnh của cửa sổ thì không làm được vậy. Cần kiểm tra một hình minh họa hay logo? Dùng nó như thước đo pixel cho ảnh — trỏ vào ảnh và đọc kích thước hiển thị thực tế, thường không trùng với kích thước trong file gốc. Hỏi và đáp Hỏi: Làm sao đo pixel trên màn hình mà không cần mở DevTools? Đáp: Bấm biểu tượng rồi kéo. Lớp phủ nằm trên trang nên bạn đo đúng thứ mình đang thấy, kể cả trạng thái hover vốn biến mất khi một bảng điều khiển cướp mất focus. Hỏi: Thước đo pixel màn hình, thước đo px, thước kẻ trên màn hình, px ruler, pixelruler — cái nào là cái này? Đáp: Tất cả. Công cụ vẫn thế, chỉ có cụm từ tìm kiếm là khác. Hỏi: Có đo được bằng xentimét hay inch không? Đáp: Không. Đây là công cụ thước đo pixel và chỉ báo pixel CSS, đúng đơn vị bạn viết trong stylesheet. Hỏi: Có chạy được ở mọi nơi không? Đáp: Trên website thông thường thì có. Các trang hệ thống của Chrome, trình xem PDF tích hợp sẵn và phần bên trong iframe khác nguồn đều đóng với mọi tiện ích, kể cả tiện ích này. Hỏi: Nó thu thập dữ liệu gì? Đáp: Không gì cả. Không một yêu cầu mạng nào, không tài khoản, không đăng ký. Khi cài đặt nó không xin quyền gì đáng sợ và chỉ chạm vào trang sau khi bạn bấm biểu tượng. Cách làm cũ vừa chậm vừa thiếu chính xác: áp thước nhựa lên mặt kính màn hình máy tính, hay đếm pixel trong ảnh chụp màn hình. Một cây thước dành cho màn hình máy tính phải sống trong trình duyệt, vẽ lại khi bố cục dồn lại và nói cùng đơn vị với code. Lớp phủ này làm đúng như vậy, và đó là lý do thước đo pixel cho website hơn hẳn việc kéo thước lên ảnh chụp màn hình dán vào phần mềm đồ họa. Mô tả này có sẵn ở 52 ngôn ngữ, nên thước đo pixel cho web chỉ cách bạn một lần tìm kiếm bằng tiếng của bạn. Cài đặt, đo pixel ngay trên trang kế tiếp bạn mở, và giữ thước màn hình cách một cú bấm trong suốt cả ngày.