Giới thiệu công cụ VisBug, bộ công cụ chính chủ Google làm ra giúp debug FrontEnd hiệu quả, nhanh chóng

Cập nhật: Lượt xem: 406 [ Kinh nghiệm ]

Hôm nay mình sẽ giới thiệu một công cụ mới toanh, chính chủ cho Google Developer Team làm ra. Nó sẽ giúp cho công việc chỉnh sửa HTML+CSS của các bạn cực kỳ nhàn.

Giới thiệu công cụ VisBug, bộ công cụ chính chủ Google làm ra giúp debug FrontEnd hiệu quả, nhanh chóng

Chào các bạn Designer!

Hôm nay mình sẽ giới thiệu một công cụ mới toanh, chính chủ cho Google Developer Team làm ra. Nó sẽ giúp cho công việc chỉnh sửa HTML+CSS của các bạn cực kỳ nhàn.

Lâu nay thì các bạn toàn phải căn chỉnh Layout bằng PhotoShop trước rồi sau đó mới cắt ra HTML. Rồi sau đó điều chỉnh dần dần bằng CSS. Tuy nhiên với một element cơ bản, việc căn chỉnh có thể mất vài chục phút. Chỉ vì bạn phải điều chỉnh bằng cách gõ code vào F12 của Chrome thay vì kéo thả hoặc ấn phím tắt như Photoshop.

Google nhận ra Dev dùng F12 để debug rất nhiều và họ đã cho ra đời một công cụ mạnh hơn F12 gấp nhiều lần. Giúp bạn ngồi chỉnh layout ngay trên giao diện website. Và toàn bộ các best practice về CSS3 sẽ được tự gen ra và tự lưu lại vào style.css cho bạn mỗi khi bạn điều chỉnh một element DOM nào đó.

Cài đặt

Cài đặt rất đơn giản, công cụ này là một Chrome Extension. Bạn vào đây để cài vào Chrome của bạn VisBug Chrome Extension. Tin hơi buồn là bản Firefox Extension đang được Dev chưa ra lò nên bạn thích dùng Firefox sẽ phải đợi một thời gian nữa nhé.

Chức năng hay ho

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. Các chức năng chính của các icon như sau:

features

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. Tuy nhiên ảnh rất nhỏ nên bạn khó theo dõi. Vậy nên mình sẽ paste ảnh to ở đây cho các bạn dễ theo dõi nhé.

Công cụ Guides

Công cụ này sẽ giúp hiển thị các đường kẻ bao quanh một element, thể hiện vị trí và chỗ trống mà nó chiếm.

guides

guides

Công cụ Inspect

Giúp hiển thị nhanh toàn bộ các thuộc tính của một element trên trang.

inspect

inspect

Công cụ Accessibility

Hiển thị các thuộc tính a11y ở góc nhìn người dùng

accessibility
accessibility

Công cụ Move

Giúp di chuyển một element rất linh hoạt lên xuống trái phải

move

Phím tắt Công cụ Move như sau:

move

Công cụ Margin

Giúp tăng giảm margin của element và hiển thị kết quả ngay khi ấn

marginPhím tắt Công cụ Margin như sau:

margin

Công cụ Padding

Giúp tăng giảm padding của element và hiển thị kết quả ngay khi ấn

padding

Phím tắt Công cụ Padding như sau:

padding

Công cụ Flexbox Align

Căn lề cho element sử dụng flexbox rất hiệu quả và dễ

flexbox

Phím tắt Công cụ Flexbox Align như sau:

flexbox-align

Công cụ HueShift

Chỉnh màu cho một element rất nhanh chóng

hueshift

Phím tắt Công cụ HueShift như sau:

hueshift

Công cụ Shadow

Chỉnh shadow cho element

shadow

Phím tắt Công cụ Shadow như sau:

shadow

Công cụ Position

Kéo element và đặt nó vào các vị trí khác nhau như Photoshop

position

Phím tắt Công cụ Positionnhư sau:

position

Công cụ FontStyle

Cho phép chọn font khác nhau cho element và xem trực tiếp

typography

Công cụ EditText

Cho phép kích đúp và sửa InnerText của một element cực nhanh

edittext

Công cụ Search

Tìm kiếm một element theo id, class hoặc attributes quá dễ

search

Tập luyện nào!

Vì VisBug khá mới mẻ và chưa có nhiều tutorial trên mạng, cũng như chưa có bài viết tiếng Việt nào. Do đó cách hay nhất bây giờ là các bạn hãy dùng thử nó, nghịch ngợm với nó xem nó có gì hay ho, có gì tốt hơn so với các công cụ hiện tại mà bạn đang dùng hay không. Mình thì thấy nó giúp ích được rất nhiều.

Google Team còn cẩn thận đến mức làm ra luôn một trang web để bạn tha hồ thỏa sức nghịch ngợm với tool mới này.

Các bạn hãy vào đây để vọc nhé. https://visbug-1337.firebaseapp.com/

(Chú ý là các bạn nên nhớ phím tắt của công cụ đó. Học thuộc để lần sau cứ thế vào và chiến thôi)

 

Tác giả: Chung Minh Tú

Loading...