Visbug là một tiện ích mở rộng của Chrome do  Google Developer Team cung cấp nhằm mục đích giúp cho người sử dụng có thể xem và chỉnh sửa giao diện web trực tiếp mà không cần F12.

Cài đặt

Các bạn có thể cài đặt tại đây.

Vì Firefox Extension chưa có, nên những ai đang sử dụng Firefox đợi thêm một thời gian nhé.

Sau khi cài đặt xong, logo của Visbug sẽ hiển thị trên thanh công cụ.

Done!

Các chức năng rất gì và này nọ

Guides

Khi bật chức năng này và đưa con trỏ vào vị trí muốn xem, khung của element sẽ được hiển thị cùng với tên thẻ và class mà nó đang được sử dụng.

Inspect

Việc xem thông tin của một element đã trở nên dễ dàng hơn bao giờ hết.

Accessibitily

Hiển thị thuộc tính A11y

Move

Di chuyển các element vào trong hoặc ra khỏi container chứa nó hay xáo trộn nó trong đó.

Các phím tắt:

Margin

Tăng giảm margin của element theo 4 phía tương ứng với 4 phím mũi tên

Các phím tắt:

Padding

Tăng giảm padding của element theo 4 phía tương ứng với 4 phím mũi tên

Các phím tắt:

Flexbox Align

Nhấn giữ Shift để chọn các element muốn tạo hoặc sửa và căn gióng bằng các phím mũi tên.

Các phím tắt:

Hueshift

Chỉnh sửa màu, đồ sáng, độ mờ cho các element

Các phím tắt:

Shadow

Đơn giản là để chỉnh shadow cho element :D

Các phím tắt:

Position

Công cụ tuyệt vời dùng để di chuyển element đến bất cứ đâu bằng phím hay chuột.

Font Styles

Dùng để thay đổi các thuộc tính của chữ như size, align, weight .v.v..

Các phím tắt:

EditText

Double click để chỉnh sửa nội dung text.

Chắc không cần nói về chức năng của công cụ này ha.

Tổng kết

Vì nội dung cụ thể được thể hiện thông qua ảnh gif khá rõ nên mình không giải thích cụ thể.

Các bạn có thể truy cập vào đây để luyện tập và thành thạo các chức năng của Visbug nhé.

Hẹn gặp lại ở một chủ đề khác.