Diều Hâu
Kho theme & plugin bản quyền cho WordPress
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO
No Result
View All Result
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO
No Result
View All Result
Diều Hâu
No Result
View All Result
Home Thiết kế / Lập trình

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

01/10/2020
in Thiết kế / Lập trình
0

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

Tags: chrome extensiontùy chỉnh giao diện

Related Posts

Chrome extension ai cũng nên cài
Máy tính

5 tiện ích mở rộng của Chrome mà ai cũng nên cài

29/09/2020
Top shortcode plugin
Plugin

Top 10 plugin Shortcode tốt nhất dành cho WordPress

09/03/2021
đánh giá CSS Hero
Plugin

[Đánh giá] CSS Hero: Tùy chỉnh giao diện chưa bao giờ đơn giản đến thế

Next Post
Synonyms keyword là gì – Từ khóa đồng nghĩa và từ khóa liên quan

Synonyms keyword là gì - Từ khóa đồng nghĩa và từ khóa liên quan

Đăng ký
Thông báo về
guest
guest
0 Bình Luận
Inline Feedbacks
View all comments

Đang Hot

Chia sẻ sản phẩm freepik

Get link Freepik miễn phí – Chia sẻ toàn bộ sản phẩm

28/01/2021
ten-mien-va-hosting-mien-phi

5 Website cung cấp tên miền Miễn Phí + Free Hosting (Updated 2021)

26/03/2021
Huong-dan-su-dung-WordPress

Hướng dẫn sử dụng WordPress cho người mới (Chi tiết từ A->Z)

26/09/2020
Hướng dẫn sử dụng Google Search Console toàn tập

Hướng dẫn sử dụng Google Search Console toàn tập (Mới Update 2021)

04/03/2021
Chia sẻ miễn phí Envato Elements

Get link Envato Elements miễn phí – Chia sẽ Free toàn bộ

28/01/2021

Bài Viết Mới Nhất

Android vs iOS: hệ điều hành nào tốt nhất

Android vs iOS: Hệ điều hành nào tốt hơn?

02/04/2021
Thiết kế logo mới: Xiaomi hoang phí hay quá cao tay?

Thiết kế logo mới: Xiaomi hoang phí hay quá cao tay?

01/04/2021
Mã bưu chính (Zipcode) 64 tỉnh thành Việt Nam

Mã bưu chính (Zipcode) 64 tỉnh thành Việt Nam

31/03/2021
10 ứng dụng hỗ trợ công việc tốt nhất trên iPad

10 ứng dụng hỗ trợ công việc tốt nhất trên iPad

30/03/2021
Quy trình tạo video cho Affiliate Marketing

Quy trình tạo một video cho Affiliate Marketing với nội dung hấp dẫn

30/03/2021
  • Liên hệ
  • Sitemap
  • Chính sách bảo mật
  • Điều khoản sử dụng

© 2021 Diều Hâu - Tạp chí công nghệ cho mọi người

No Result
View All Result
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO

© 2021 Diều Hâu - Tạp chí công nghệ cho mọi người

wpDiscuz
Comment Author Info
:wpds_smile::wpds_grin::wpds_wink::wpds_mrgreen::wpds_neutral::wpds_twisted::wpds_arrow::wpds_shock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_sad::wpds_exclamation::wpds_question::wpds_idea::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_envy::wpds_shutmouth: