Chế độ gỡ lỗi - Tìm CSS Selectors

Chế độ gỡ lỗi là một bộ công cụ nhẹ được tích hợp trong thư viện Navi+ giúp bạn làm việc hiệu quả hơn với các menu của Navi+.

1. Tìm CSS selectors

Để kích hoạt chế độ gỡ lỗi, sử dụng định dạng URL sau: yourdomain.com#navidebug-on

Trang web của bạn sẽ chuyển sang Chế độ Gỡ lỗi Navi+. Di chuột qua các khu vực khác nhau của trang web để xem các CSS selectors tương ứng của chúng. Di chuyển con trỏ của bạn để xác định chính xác khu vực mục tiêu mong muốn.

Vui lòng chú ý đến các phím tắt dưới đây để làm việc hiệu quả hơn.

Phím tắt 1. Sao chép một CSS selector

  • Nhấn ⌘+C trên MacOS hoặc Ctrl+C trên Windows để sao chép CSS selector đã chọn.

Bạn có thể dán nó vào cài đặt Publish Menu cho:

  • Mega Menu / Grid Menu: để chèn menu trước, sau hoặc thay thế CSS selector mục tiêu
  • Slide Menu: để kích hoạt menu trượt khi CSS selector mục tiêu được nhấp hoặc chạm vào

Phím tắt 2. Điều hướng giữa các cấp độ selector

  • Nhấn [↑/←], hoặc Backspace để di chuyển đến selector cấp cha
  • Nhấn [↓/→] để di chuyển đến selector cấp con

Mẹo quan trọng: Trong hầu hết các trường hợp, bạn sẽ không tìm thấy CSS selector hoàn hảo ngay lập tức. Dựa trên kinh nghiệm, thường thì dễ hơn để:

  1. Bắt đầu bằng cách chọn một selector cấp con
  2. Sau đó di chuyển lên 1–2 cấp cha (một điểm nhấn trực quan sẽ xuất hiện trên trang web của bạn)
  3. Sao chép selector bằng ⌘+C (Ctrl+C)
  4. Dán nó vào cấu hình menu và kiểm tra

Đôi khi, bạn có thể cần lặp lại quy trình này nhiều lần khi chèn, thay thế hoặc liên kết các sự kiện menu với CSS selectors để đạt được trải nghiệm người dùng mong muốn.

1.1. Tìm CSS Selector trên Desktop

1.2. Tìm CSS Selector trên Mobile

Để tìm một CSS selector trên di động, kích hoạt chế độ Di động (Responsive) trong trình duyệt của bạn. Sau đó nhấp chuột phải vào bất kỳ đâu trên trang và chọn:

  • Chrome: Inspect
  • Safari: Inspect Element
  • Firefox: Inspect
  • Edge: Inspect / Inspect Element