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 khái niệm phần tử có thể cuộn, lý do khó tìm các phần tử đó và cách tính năng mới này giúp bạn nhanh chóng tìm ra các phần tử đó. 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.
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ó một công cụ để hiển thị rõ ràng phần tử có thể cuộn, thì bạn sẽ dễ bị mất phương thức, đặ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:
- Bạn chọn một phần tử và sửa đổi kiểu của phần tử đó.
- Thanh cuộn có biến mất không? Nếu không, bạn sẽ lặp lại quá trình.
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!
Ví dụ: cố gắng tìm xem phần tử nào đang khiến thanh cuộn xuất hiện trong ví dụ sau bằng huy hiệu cuộn mới.
Triển khai kỹ thuật đối với 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 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ẽ kết hợp một huy hiệu mới (tương tự như huy hiệu lưới hiện có) 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 tải một phần tử mới trong Công cụ cho nhà phát triển để xác định các vùng chứa có thể cuộn.
Để cập nhật một cách linh động trạng thái có thể cuộn của các phần tử đã tải, chúng tôi phải đi 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á khu vực có thể cuộn cho một nút.
Thành phần PaintLayerScrollableArea quản lý phần bổ sung 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 huy hiệu cuộn
Để thêm huy hiệu mới vào giao diện người dùng của Công cụ cho nhà phát triển, chúng tôi đã tạo một phương thức trình xử lý trong ElementsTreeOutline để nhận nútId của phần tử đã thay đổi trạng thái khả năng cuộn của phần tử bằng một Sự kiện.
Trong trình xử lý đó, chúng ta truy xuất đối tượng ElementsTreeElement bằng cách sử dụng nodeId và hướng dẫn đối tượng cập nhật huy hiệu cuộn.
Để cập nhật huy hiệu cuộn, bạn cần 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.
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 để xử lý hai trường hợp:
- Có thể cuộn nút này khi tải trong Công cụ cho nhà phát triển không?
- Nút này đã cập nhật trạng thái cuộn của nó chưa?
Nút này có thể cuộn khi được tải trong Công cụ cho nhà phát triển 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 nâng cao: Kiểm tra những thay đổi mới đối với CDP mới trong trình duyệt của bạn
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 cho phép bạn xem các sự kiện theo thời gian thực được trao đổi giữa Chrome và Công cụ cho nhà phát triển, bao gồm cả sự kiện mới được thêm vào cho huy hiệu Scroll. 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.
Vượt ra ngoài tính năng cuộn: Ra mắt huy hiệu tràn
Hơn nữa, chúng tôi đang làm việc với một huy hiệu mục bổ sung mới để xác định nguyên nhân dẫn đến 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.
Dưới đây là cách hoạt động:
- 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.
- Làm nổi bật thủ phạm. Huy hiệu mục bổ sung sẽ gắn cờ các phần tử bị tràn này và việc nhấp vào huy hiệu này sẽ làm nổi bật các phần tử bị tràn đó 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.