Tools hỗ trợ Check UI

QA/QC May 27, 2022

I. Các tool hỗ trợ check font size

  1. Whatfont

Link cài đặt

Chức năng check chính: font chữ, font style, font weight, font size, line height, font color...

                                        Hình 1: Trang download Whatfont

Hình 2: Cách hiển thị của Whatfont

2.  Fonts ninja

Link cài đặt

Chức năng check chính: font chữ, font style, font size, line height, font color, word-spacing...

Hình 3: Trang download Fonts ninja

Hình 4: Cách hiển thị của Fonts ninja

3. CSS Viewer

Link cài đặt

Chức năng check chính: font chữ, font size, font color, letter-spacing, text-decoration, word-spacing, background- color, background- image, position, height, width, padding, effect...

Hình 5: Trang download CSS Viewer

Hình 6: Cách hiển thị của CSS Viewer

II. Các tools hỗ trợ check font color

  1. Colorpick eyedropper

Link cài đặt

  • Mã màu: hex, rgb, hsl

    Hình 7: Trang download Whatfont

Hình 8: Cách hiển thị của Whatfont

2. ColorZilla

Link cài đặt

  • Mã màu:  hexadecimal, rgb, hslHieêển
  • Hiển thị kích thước, loại đối tượng

Hình 9: Trang download ColorZilla

Hình 10: Cách hiển thị của ColorZilla

III. Các tool hỗ trợ check khoảng cách

  1. Page Ruler redux

Link cài đặt

  • Chức năng check chính: width, height, left, top, right, bottom...

Hình 11: Trang download Page Ruler

Hình 12: Cách hiển thị của Page Ruler

2. Dimensions

Link cài đặt

Hình 13: Trang download Dimensions

Hình 14: Cách hiển thị của Dimensions

3. Window Resizer

Link cài đặt

  • Thay đổi kích thước cửa sổ trình duyệt để mô phỏng các độ phân giải màn hình khác nhau.
  • Tiện ích mở rộng này định lại kích thước cửa sổ của trình duyệt để mô phỏng các độ phân giải khác nhau.
  • Danh sách độ phân giải hoàn toàn có thể tùy chỉnh (thêm / xóa / sắp xếp lại).

Hình 15: Trang download Window Resizer

Hình 16: Cách hiển thị của Window Resizer

4. BrowserStack

Link cài đặt

  • Khởi chạy phiên kiểm tra mới trong bất kỳ trình duyệt nào bằng tiện ích mở rộng khởi chạy nhanh BrowserStack.
  • Thiết lập tới 12 trình duyệt để truy cập nhanh và giảm thiểu thời gian chuyển đổi trình duyệt.
  • Xem xét các thay đổi ngay lập tức và biến thử nghiệm trên nhiều trình duyệt trở thành một phần không thể thiếu của quá trình phát triển.NNhược
  • Nhược điểm: Mất phí

Hình 17: Trang download BrowserStack

Hình 18: Cách hiển thị của BrowserStack

5. Responsive web design tester

Link cài đặt

Hình 19: Trang download Responsive web design tester

Hình 20: Cách hiển thị của Responsive web design tester

IV. Giới thiệu Visbug

Link cài đặt

  • Do chính  Google Developer Team làm ra.
  • Sau khi cài Extension. Bạn muốn debug trang web nào đó. Bạn hãy ấn icon VisBug trên thanh Address. Chúng ta sẽ thấy một thanh công cụ khá giống Photoshop hiện ra ở cạnh bên trái màn hình. Và bao gồm 13 tính năng tất cả.
  • Mỗi icon khi di chuột vào đều có một ảnh động, mô tả rõ chức năng mà nó làm được, khá dễ hiểu.

Hình 21: Trang download Visbug

Hình 22: Cách hiển thị của Visbug

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.