Tìm Đường Dẫn DOM cho phép bạn di chuột qua bất kỳ phần tử nào trên trang để xem CSS selector duy nhất, selector rút gọn, XPath, và đoạn mã querySelector sẵn sàng dán vào. Nhấp để khóa phần tử, rồi điều hướng bằng các nút Parent/Child/Sibling. Không thể thiếu với người dùng Selenium, Puppeteer, Playwright và Cypress.
Viết test tự động, trình thu thập dữ liệu web, hay bookmarklet đều đòi hỏi phải viết selector — nhưng tìm ra một selector ổn định, duy nhất cho một phần tử cụ thể lại rất mất công. Bạn phải mở DevTools, kiểm tra, nhấp chuột phải, sao chép selector, rồi hy vọng kết quả thực sự duy nhất và ổn định. Tìm Đường Dẫn DOM biến việc này thành một cú nhấp duy nhất. Kích hoạt công cụ và di chuột qua bất kỳ phần tử nào trên trang — phần tử sẽ sáng lên màu tím khi bạn di chuyển qua. Nhấp để khóa lại, và bảng điều khiển sẽ hiển thị bốn định dạng selector: một CSS selector dựa trên đường dẫn duy nhất, một selector rút gọn (thẻ + class hoặc id), một XPath tuyệt đối, và một đoạn document.querySelector('...') đã được gói sẵn, chỉ việc dán vào script. Sau khi khóa, bạn có thể điều hướng cây DOM bằng các nút Parent / First Child / Prev Sibling / Next Sibling mà không mất tiêu điểm. Các thuộc tính data-testid được phát hiện và ưu tiên khi có mặt — lý tưởng cho người dùng Playwright/Cypress vốn dùng chúng làm điểm neo. Công cụ còn hiển thị thẻ, id, class, kích thước bao quanh, cùng thuộc tính display/position để có ngữ cảnh nhanh.
Di chuột qua trang để thấy phần tử sáng lên màu tím. Nhấp để khóa — không cần đến DevTools Inspector.
CSS path duy nhất, selector rút gọn, XPath tuyệt đối, và đoạn querySelector đã được gói sẵn. Chọn định dạng phù hợp với công cụ của bạn.
Sau khi khóa, dùng các nút Parent / First Child / Prev / Next để di chuyển qua cây DOM mà không cần chọn lại.
Mỗi selector có nút Copy riêng. Lấy đúng định dạng script của bạn cần và dán thẳng vào test hoặc trình thu thập dữ liệu.
Hiển thị thẻ, id, class, kích thước, display và position — tổng quan nhanh mà không cần kiểm tra lại.
Nếu phần tử có id, CSS duy nhất sẽ dùng #id. Nếu có data-testid, nó sẽ được hiển thị nổi bật để dùng với Playwright/Cypress.
Chọn phần tử cần test, sao chép selector của nó, rồi dán vào mã test — không còn phải đoán mò đường dẫn duy nhất nữa.
Tìm selector cấu trúc cho các mục danh sách trên trang cần thu thập. Dùng selector rút gọn hoặc dựa trên đường dẫn tùy theo mức độ ổn định cần thiết.
Khóa một phần tử và sao chép đường dẫn của nó để tìm hiểu vì sao CSS không áp dụng — selector duy nhất cho thấy vị trí đầy đủ của phần tử trong cây.
Sao chép đoạn document.querySelector(...) đã được gói sẵn thẳng vào DevTools Console để gỡ lỗi tương tác nhanh.
Khi kiểm tra khả năng truy cập, dùng XPath để đưa phần tử vào axe-core hoặc các công cụ a11y khác yêu cầu tham chiếu XPath.
Nhấp vào biểu tượng Path Finder trên dock của DevSuite Pro. Công cụ kích hoạt ngay ở chế độ chọn phần tử.
Di chuột qua trang — mỗi phần tử sẽ sáng lên màu tím khi bạn lướt qua. Cuộn trang nếu cần để tìm đúng mục tiêu.
Nhấp vào phần tử bạn muốn. Bộ chọn dừng lại và bảng điều khiển hiển thị các định dạng selector, ngữ cảnh, cùng nút sao chép.
Dùng các nút Parent/Child/Sibling để tinh chỉnh lựa chọn, hoặc nhấp Pick Element để bắt đầu chọn phần tử bằng di chuột lần nữa.
Nhấp Copy bên cạnh định dạng bạn cần (CSS, XPath, hoặc querySelector). Dán thẳng vào test, trình thu thập dữ liệu, hoặc console.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 64 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
