VisBug Chrome Extension: Quên F12 Đi, công cụ dành cho Web Desinger

Hôm nay mình muốn giới thiệu đến các bạn một công cụ cực hay dành cho dân Web Designer. Đó là VisBug Chrome Extension, điều đặc biệt là công cụ được chính Google Developer Team tạo ra. Nếu bạn đã quen với việc F12 để debug hay chỉnh sửa giao diện website, thì bạn sẽ thấy công cụ này tuyệt vời như thế nào.

Nó sẽ giúp bạn chỉnh sửa HTML + CSS dễ dàng hơn bao giờ hết. Mà không cần phải soi F12 nữa 😀

Giới thiệu VisBug Chrome Extension

Tại một cuộc hội thảo của Chrome Dev tại San Francisco vào tháng 12/2018. Google đã công bố một công cụ mới cho developer có tên gọi là VisBug.

Sứ mệnh của nó chính là giúp việc chỉnh sửa giao diện website đơn giản hơn bao giờ hết (point-and-click).

Và giờ nó đã có mặt trên Chrome Web Store, hiện bạn có thể tải ngay và dùng.

Các kỹ sư của Google ví nó giống như Firebug, một add-on của FireFox.

*Firebug cũng là một công cụ giúp Web Designer chỉnh sửa giao diện trên FireFox

Nhưng nó tốt hơn nhiều vì nó cho phép bạn, vì nó cho phép bạn di chuyển các element ngay trên màn hình chỉ bằng thao tác kéo thả hoặc click.

Visbug công cụ dành cho Website Designer

Thường các Website Designer để làm được một website tĩnh sẽ cần phải làm một số bước như

Thiết kế file PSD, căn chỉnh layout, tạo thư mục chứa source html/css, cắt hình ảnh từ PSD….. và nhiều bước nữa.

Việc căn chỉnh một element trên website nó không đơn giản như trong PS, bạn chỉ việc kéo và thả.

Nhiều khi một cái hình đơn giản thôi căn cũng mất 10-15p mới được như ý.

Và Google giường như đã hiểu nổi lòng của các Developer với việc phải dùng F12 rất nhiều.

Cho nên họ đã phát triển ra Visbug, giúp bạn chỉnh sửa giao diện trực tiếp trên Website.

Những best practive CSS3 sẽ được tự tạo ra và lưu vào style.css. Mỗi khi bạn tiến hình điều chỉnh element DOM nào đó.

Những chức năng chính của Visbug

Sau khi cài đặt Visbug để khởi động, các bạn bấm vào biểu tượng hoặc Alt + Shift + D.

Một thành công cụ bên trái sẽ xuất hiện trên màn hinh của bạn. Và no sẽ bao gồm 13 tính năng tất cả.

Nhìn khá giống với Photoshop đúng không nào. Giờ hãy tìm hiểu qua về những công cụ này nhé.

Guides

Nếu các bạn hay dùng Photoshop thì nó giống như tính năng Guide vậy. Nhưng ở đây nó sẽ tự động hiển thị đường viền bao quanh element, chỉnh là khoảng chống mà nó chiếm.

Inspect

Giống với F12 Inspect vậy, nó sẽ hiện thị mọi thuộc tính của element trên màn hình.

Pin: Alt + hover

Accessibility

Hiển thị thuộc tính a11y với góc nhìn là một người dùng.

*Website Acccessibility là có thể hiểu là tiêu chuẩn để một người hay bất kỳ ai (không phân biệt điều kiện của họ), để tiếp cận một vấn đề gì đó. Và ở đây là Website

Tiêu chuẩn này để giúp nhưng người khuyết tật, vẫn có thể toàn quyền truy cập vào website bạn.

Thường sẽ có 3 mức cơ bản như:

• A – bắt buộc
• AA – cần hoàn thành
• AAA – có thể cần

Move

Giống như cái tên của nó, nó giúp bạn đẩy các element sang trái, phải, lên, xuống.

Cách dùng bằng các phím

Sang trái hoặc phải: ← →

Lên hoặc xuống: ↑ ↓

Margin

Công cụ này giúp bạn điều chỉnh margin giữa các element.

+ Margin: ← → ↑ ↓
– Margin: alt+ ← → ↑ ↓
All Slide: ctrl+ ↑ ↓

Padding

Tương tự như Margin giúp bạn chỉnh Padding.

+ Padding: ← → ↑ ↓
– Padding: alt+ ← → ↑ ↓
All Slide: ctrl+ ↑ ↓

Flexbox Align

Công cụ này giúp bạn căn lề trái, phải hoặc giữa cho vật thể.

Alignment: ← → ↑ ↓

Distribution: shift + ← → ↑ ↓

Direction: ctrl + ← → ↑ ↓

Hue Shift

Thay đổi màu sắc cho các element (màu nền, độ sáng, mờ…)

Saturation: ← →

Brightness: ↑ ↓

Hue: ctrl + ↑ ↓

Opacity: ctrl + ← →

Shadow

Tạo đổ bóng cho vật thể.

X/Y Position: ← → ↑ ↓

Blur: shift + ↑ ↓

Spread: shift + ← →

Opacity: ctrl + ← →

Position

Kéo và thả vật thể đơn giản bất kỳ đâu bạn muốn.

Nudge: ← → ↑ ↓

Move: Kéo và Thả

Font Styles

Chỉnh sửa font chữ, căn lề, giãn cách dòng,…

Size: ↑ ↓

Alignment: ← →

Leading: shift + ↑ ↓

Letter-spacing: shift + ← →

Weight: ctrl + ↑ ↓

Edit Text

Đơn giản đây là công cụ thay đổi nội dung text.

Double Click để edit

Search

Cuối cùng là search để tìm các element theo class, id, và attributes.

Kết Luận

Sau một hồi nghịch ngợm với Visbug, mình thấy nó khá hay và tuyệt vời cho anh em Website Developer. Mọi chỉnh sửa đều dễ dàng chỉ bằng những thảo tác point-and-click.

Nhưng theo cá nhân mình CSS Hero vẫn có nhiều ưu điểm hơn với Visbug. Nhưng với một công cụ Free thì đây đã quá tốt rồi.

Để quen với công cụ này chắc bạn sẽ cần thời gian để thuộc nút tắt. Ngoài ra thì Google Developer team có có một trang:

https://visbug-1337.firebaseapp.com/

Để các bạn có thể test nghịch ngợm thoải mái. Mọi người thấy công cụ này thế nào, comment ở dưới nhé 😀