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é 😀
