Categories Thủ thuật

Add-on đo kích thước trang web cho Google Chrome và FireFox

Tiện ích đo kích thước trang web
Để đo kích thước các thành phần trên trang web bạn thường phải chụp màn hình rồi đưa vào công cụ đồ họa để đo. Nếu 1 năm bạn phải đo có một hai lần thì đó là cách cũng không tệ, nhưng nếu 1 tuần mà bạn phải đo vài lần thì sao? Rõ ràng là khá phiền toái. Cả trình duyệt Chrome và FireFox đều có tiện ích rất tốt giúp bạn nhanh chóng biết được kích thước tính ra px.

1. Trình duyệt Chrome

Bạn vào ruul. Screen ruler rồi nhấn Thêm vào Chrome. Sau khi thêm vào thành công, bạn sẽ thấy biểu tượng sau:
Nhấn vào để đo
Muốn đo trang web nào, bạn nhấn vào biểu tượng trên, nó sẽ hiện ra cho bạn các lựa chọn:
Các loại thước khác nhau
Dưới đây là 5 trên tổng số 7 thước trong bộ chọn, sở dĩ nó có các màu khác nhau là để phù hợp với các nền khác nhau. Có thước có nền trong suốt, có thước có nền là màu đặc:
Màu sắc các loại thước
Tôi sẽ chọn thước nền gỗ đặc để làm minh họa mẫu. Bạn có thể thấy các biểu tượng nhỏ trên thước. Cái đầu tiên là dùng để xoay thước theo chiều dọc:
Xoay thước
Hình thùng rác (vị trí cuối) là để bỏ thước kẻ đó đi. Còn khi nhấn vào hình dấu cộng ở chính giữa sẽ hiện ra các kích thước chữ và đường viền khác nhau để bạn ước lượng:
Xem chữ và đường viền mẫu trông như thế nào

Nếu thành phần bạn muốn đo có kích thước lớn, hãy chọn thước long ở vị trí cuối cùng, nó có độ dài 1100px (các thước khác là 560px).

2. Trình duyệt FireFox

Ứng dụng bên FireFox có tên MeasureIt, bạn vào đường dẫn rồi nhấn Add to FireFox:

Thêm vào FireFox
Để đo, bạn nhấn vào biểu tượng cái thước góc trên cùng bên tay phải, màn hình sẽ mờ đi một chút để cho bạn thấy tiện ích đã đi vào hoạt động. Để đo kích thước khoảng nào bạn chỉ cần kéo chuột vào khoảng đó.
MeasureIt đo kích thước

Nó sẽ hiện cả kích thước chiều ngang và chiều rộng, như hình trên cho thấy, rộng (W) 105px, cao (H) cũng 105px. Nếu không muốn đo nữa thì bạn lại nhấn vào biểu tượng thước ở bên trên.

Điểm mạnh của MeasureIt là nó có thể đo cả các trang Offline lẫn Online, trong khi Screen ruler chỉ đo các trang Online mà thôi.

Back to Top