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:
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é
Ảnh mình post lên viblo đã bị hiển thị thu nhỏ bớt, các bạn hãy open ảnh gif ở new tab để xem ảnh to và rõ nét hơn 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.
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.
Công cụ Accessibility
Hiển thị các thuộc tính a11y ở góc nhìn người dùng
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
Công cụ Margin
Giúp tăng giảm margin của element và hiển thị kết quả ngay khi ấn
Công cụ Padding
Giúp tăng giảm padding của element và hiển thị kết quả ngay khi ấn
Công cụ Flexbox Align
Căn lề cho element sử dụng flexbox rất hiệu quả và dễ
Công cụ HueShift
Chỉnh màu cho một element rất nhanh chóng
Công cụ Shadow
Chỉnh shadow cho element
Công cụ Position
Kéo element và đặt nó vào các vị trí khác nhau như Photoshop
Công cụ FontStyle
Cho phép chọn font khác nhau cho element và xem trực tiếp
Công cụ EditText
Cho phép kích đúp và sửa InnerText của một element cực nhanh
Công cụ Search
Tìm kiếm một element theo id, class hoặc attributes quá dễ
Bài đăng này do mình sưu tầm được, các bạn có thể đọc bài viết gốc của tác giả tại đây