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.
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
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 chúng tôi . 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.
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.
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.
Accessibility
Hiển thị thuộc tính a11y với góc nhìn là một người dùng.
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.
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.
Padding
Tương tự như Margin giúp bạn chỉnh Padding.
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ể.
Distribution: shift + ← → ↑ ↓
Direction: ctrl + ← → ↑ ↓
Hue Shift
Thay đổi màu sắc cho các element (màu nền, độ sáng, mờ…)
Brightness: ↑ ↓
Hue: ctrl + ↑ ↓
Opacity: ctrl + ← →
Shadow
Tạo đổ bóng cho vật thể.
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.
Move: Kéo và Thả
Font Styles
Chỉnh sửa font chữ, căn lề, giãn cách dòng,…
Alignment: ← →
Leading: shift + ↑ ↓
Letter-spacing: shift + ← →
Weight: ctrl + ↑ ↓
Edit Text
Đơn giản đây là công cụ thay đổi nội dung text.
Search
Cuối cùng là search để tìm các element theo class, id, và attributes.
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: