Huy hiệu cuộn mới trong Công cụ cho nhà phát triển: Tìm các phần tử có thể cuộn nhanh hơn

Ionuț Marius Voicilă
Ionuț Marius Voicilă

Giờ đây, bạn có thể gỡ lỗi các vấn đề liên quan đến thao tác cuộn dễ dàng hơn nhờ huy hiệu cuộn mới của DevTools! Bài đăng này giải thích các thành phần có thể cuộn, lý do khiến bạn khó tìm thấy các thành phần này và cách tính năng mới này giúp bạn nhanh chóng xác định vị trí của các thành phần đó. Chúng tôi cũng sẽ đưa bạn vào hậu trường để xem cách chúng tôi phát triển huy hiệu cuộn.

Huy hiệu cuộn mới trong bảng điều khiển Phần tử.

Phần tử có thể cuộn là gì?

Nếu bạn có thể cuộn nội dung bên trong một phần tử, thì đó là phần tử có thể cuộn (hoặc vùng chứa cuộn). Không quan trọng là có thanh cuộn hay không.

Tại sao khó tìm thấy phần tử có thể cuộn?

Khó gỡ lỗi các vấn đề về cuộn. Nếu không có công cụ hiển thị rõ ràng phần tử có thể cuộn, người dùng rất dễ bị nhầm lẫn, đặc biệt là trên các trang phức tạp khi không có thanh cuộn.

Việc tìm phần tử đang cuộn theo cách thủ công có thể là một quá trình thử và sai tẻ nhạt:

  1. Bạn chọn một phần tử và sửa đổi kiểu của phần tử đó.
  2. Thanh cuộn có biến mất không? Nếu không, bạn hãy lặp lại quy trình này.

Giới thiệu huy hiệu cuộn

Trong Chrome 130, bạn có thể sử dụng huy hiệu cuộn mới trong Bảng điều khiển Elements (Phần tử) để xác định vị trí các phần tử có thể cuộn!

Huy hiệu cuộn mới trong bảng điều khiển Phần tử.

Ví dụ: hãy thử tìm thành phần nào đang khiến thanh cuộn xuất hiện trong ví dụ sau bằng cách sử dụng huy hiệu cuộn mới.

Triển khai kỹ thuật của huy hiệu cuộn mới

Ở hậu trường, quá trình triển khai được chia thành hai phần:

  • Xác định các phần tử có thể cuộn. Sử dụng các tín hiệu Blink’s (công cụ kết xuất của Chrome) để xác định các phần tử có thể cuộn hoặc đã có thể cuộn do thay đổi trên trang.
  • Hiển thị huy hiệu cuộn. Khi nhận được các tín hiệu, chúng ta sẽ đưa một huy hiệu mới (tương tự như huy hiệu lưới hiện có) vào bên cạnh các phần tử có thể cuộn trong bảng điều khiển Elements (Thành phần).

Xác định các phần tử có thể cuộn

Để xác định các phần tử có thể cuộn, chúng tôi đã sử dụng phương thức IsUserScrollable trong Blink. Phương thức này xác định xem một nút có thể cuộn được hay không bằng cách kiểm tra xem nút đó có tràn dọc theo trục X hoặc Y hay không, cho biết nội dung vượt quá kích thước vùng chứa và có thể cuộn được. Chúng ta gọi phương thức này mỗi khi một phần tử mới được tải trong DevTools để xác định các vùng chứa có thể cuộn.

Để cập nhật linh động trạng thái cuộn của các phần tử đã tải, chúng tôi phải tìm hiểu sâu vào cơ sở mã của công cụ kết xuất Blink để theo dõi vị trí thêm hoặc xoá vùng cuộn cho một nút.

Thành phần PaintLayerScrollableArea quản lý việc tràn bộ nhớ khi xử lý logic cốt lõi. Cụ thể, phương thức UpdateScrollableAreaSet chịu trách nhiệm phát hiện thời điểm xảy ra tình trạng tràn bộ nhớ đệm hoặc đã được giải quyết.

Thông tin này được chuyển tiếp đến phần phụ trợ của DevTools bằng cách gửi tệp tham chiếu của nút đã thay đổi ScrollableArea.

Sau đó, phần phụ trợ sẽ kiểm tra lại nút bằng phương thức IsUserScrollable để lấy trạng thái mới của nút đó. Sau khi xác minh khả năng cuộn, một tín hiệu sẽ được gửi đến giao diện người dùng bằng Chrome DevTools Protocol, đảm bảo rằng giao diện người dùng phản ánh chính xác các thay đổi trong nội dung có thể cuộn.

Hiển thị huy hiệu cuộn

Để thêm huy hiệu mới trong giao diện người dùng của DevTools, chúng tôi đã tạo một phương thức xử lý trong ElementsTreeOutline nhận nodeId của phần tử đã thay đổi trạng thái cuộn bằng một Sự kiện. Trong trình xử lý đó, chúng ta truy xuất đối tượng ElementsTreeElement bằng nodeId và hướng dẫn đối tượng này cập nhật huy hiệu cuộn.

Việc cập nhật huy hiệu cuộn liên quan đến việc kiểm tra xem phần tử có thể cuộn được hay không và liệu phần tử đó đã có huy hiệu cuộn hay chưa. Dựa trên các điều kiện này, chúng tôi sẽ thực hiện những hành động sau:

  • Nếu phần tử có thể cuộn và chưa có huy hiệu cuộn, thì hệ thống sẽ thêm một huy hiệu cuộn.
  • Nếu phần tử không cuộn được nhưng có huy hiệu cuộn, thì huy hiệu hiện có sẽ bị xoá.

Logic đặc biệt để xử lý tài liệu cấp cao nhất có thể cuộn

Khi tài liệu cấp cao nhất có thể cuộn được, chúng ta sẽ có một trường hợp đặc biệt vì chúng ta không hiển thị phần tử #document cho tài liệu chính mà chỉ cho iframe. Do đó, chúng ta không thể hiển thị huy hiệu trực tiếp trên các phần tử #document

Thay vào đó, chúng tôi quyết định hiển thị huy hiệu cuộn trên phần tử </html>, bao gồm cả những huy hiệu trong Quirks mode, trong đó document.scrollingElement() trả về <body> hoặc null. Quyết định này giúp tránh nhầm lẫn giữa tài liệu có thể cuộn và các phần tử nội dung có thể cuộn, đặc biệt là trên các trang mà phần nội dung có thể cuộn độc lập.

Chúng tôi nhận thấy đây là cách rõ ràng nhất để cho nhà phát triển biết những phần tử có thể cuộn.

Huy hiệu cuộn bên cạnh thẻ HTML trong bảng điều khiển Phần tử.

Thay đổi đối với Giao thức của Công cụ phát triển Chrome (CDP)

Để tích hợp huy hiệu cuộn mới, bạn cần thay đổi Chrome DevTools Protocol (CDP). CDP đóng vai trò là giao thức giao tiếp giữa Công cụ của Chrome cho nhà phát triển và Chrome.

Chúng tôi đã phải thay đổi giao thức để áp dụng cho cả hai trường hợp:

  • Có thể cuộn nút này khi tải trong DevTools không?
  • Nút này đã cập nhật trạng thái cuộn của nó chưa?
Bạn có thể cuộn nút này khi nó được tải trong DevTools không?

Chúng tôi đã thêm một thuộc tính mới có tên isScrollable vào loại dữ liệu DOM.Node. Loại dữ liệu này được gửi mỗi khi một nút mới được tải trong giao diện người dùng của DevTools.

Chúng tôi quyết định chỉ điền thuộc tính này khi thuộc tính đó là đúng để tránh tải dữ liệu không cần thiết. Do đó, khi thuộc tính này không được gửi, chúng tôi giả định rằng phần tử không cuộn được.

Nút này đã cập nhật trạng thái cuộn của nó chưa?

Để phát hiện xem một nút có cập nhật trạng thái cuộn được hay không, chúng tôi đã giới thiệu một sự kiện mới scrollableFlagUpdated trong CDP. Sự kiện này được kích hoạt bất cứ khi nào một phần tử có được hoặc mất vùng cuộn được. Sự kiện này có cấu trúc như sau:

  # Fired when a node's scrollability state changes.
  experimental event scrollableFlagUpdated
    parameters
      # The id of the node.
      DOM.NodeId nodeId
      # If the node is scrollable.
      boolean isScrollable

Mẹo hay: Kiểm tra các thay đổi mới về CDP trong trình duyệt

Nếu bạn tò mò về cách Chrome giao tiếp với DevTools, có một cách đơn giản để khám phá điều này.

Bảng điều khiển Protocol Monitor (Trình theo dõi giao thức) cho phép bạn xem các sự kiện theo thời gian thực được trao đổi giữa Chrome và DevTools, bao gồm cả sự kiện mới được thêm vào huy hiệu Cuộn. Ví dụ: khi sửa đổi kiểu của một phần tử ảnh hưởng đến khả năng cuộn của phần tử đó, bạn có thể thấy ngay các sự kiện CDP có liên quan khi sự kiện xảy ra.

Để biết hướng dẫn chi tiết hơn, hãy xem Protocol monitor: View and send CDP requests.

Huy hiệu cuộn mới trong bảng điều khiển Phần tử.

Không chỉ cuộn: Giới thiệu huy hiệu mục bổ sung

Tuyệt vời hơn nữa, chúng tôi đang cố gắng tạo một huy hiệu mục bổ sung mới để xác định nguyên nhân của việc cuộn đó. Huy hiệu này sẽ xuất hiện bên cạnh các phần tử tràn ra khỏi vùng chứa, giúp bạn nhanh chóng chẩn đoán các vấn đề về bố cục.

Cách hoạt động như sau:

  • Gỡ lỗi tương tác. Nhấp vào huy hiệu cuộn để kích hoạt lệnh Giao thức DevTools giúp xác định các phần tử con bị tràn.
  • Hình ảnh hoá tình trạng tràn. Chúng ta sẽ liên kết các ranh giới phần tử trong vùng chứa có thể cuộn để phát hiện mọi tình trạng tràn.
  • Nêu rõ nguyên nhân. Huy hiệu tràn sẽ gắn cờ các phần tử tràn này và khi bạn nhấp vào huy hiệu này, các phần tử đó sẽ được làm nổi bật ngay trong DOM.

Điều này sẽ cung cấp cho nhà phát triển một công cụ mới mạnh mẽ để hiểu và khắc phục các vấn đề về bố cục do nội dung tràn. Chúng tôi tin rằng mức độ phân tích sâu hơn này sẽ giúp đơn giản hoá đáng kể quy trình gỡ lỗi của bạn.