Nhóm Chrome DevTools đang xây dựng thêm các tính năng mới để giúp bạn tìm thấy vấn đề về biểu mẫu và gỡ lỗi tính năng Tự động điền.
Trong Chrome Canary, chúng tôi đang thử nghiệm các tính năng mới trong DevTools nhằm giúp nhà phát triển hiểu cách hoạt động của tính năng Tự động điền biểu mẫu và lý do đôi khi tính năng này không hoạt động:
- Tính năng Tự động điền của trình duyệt liên kết các giá trị đã lưu trữ với các trường biểu mẫu như thế nào?
- Tính năng Tự động điền sử dụng tiêu chí nào để điền vào trường biểu mẫu?
- Tính năng Tự động điền không điền vào những trường nào?
- Tại sao tính năng Tự động điền không điền sẵn thông tin vào một trường biểu mẫu?
Bài viết này trình bày các tính năng mới trong Chrome DevTools, đồng thời giải thích cách bạn có thể kiểm thử các tính năng đó và đưa ra ý kiến phản hồi.
Tính năng Tự động điền là gì?
Chrome giúp người dùng quản lý địa chỉ, thông tin thanh toán và thông tin đăng nhập bằng cách lưu trữ an toàn các tập dữ liệu và đề xuất điền vào các trường biểu mẫu mà người dùng không cần nhập văn bản. Tính năng này được gọi là Tự động điền.
Chrome sẽ đề xuất lưu dữ liệu Tự động điền khi bạn gửi biểu mẫu. Trên thiết bị di động:
Sau đó, Chrome sẽ đề xuất tự động điền vào biểu mẫu bằng dữ liệu đã lưu.
Trên thiết bị di động:
Trên máy tính:
Bạn có thể quản lý dữ liệu Tự động điền trong phần cài đặt của Chrome.
Trên thiết bị di động:
Trên máy tính:
Bạn cũng có thể thấy Chrome đưa ra nội dung đề xuất cho các trường nhập không liên quan đến địa chỉ, thẻ tín dụng hoặc dữ liệu đăng nhập. Ngoài việc cung cấp tính năng Tự động điền cho nhóm dữ liệu có cấu trúc như địa chỉ và thông tin thanh toán, Chrome còn giúp người dùng tránh phải nhập lại dữ liệu cho một trường biểu mẫu mà tính năng Tự động điền không thể xử lý. Khi một biểu mẫu có trường có thuộc tính tên mà Chrome từng gặp, Chrome có thể đề xuất các giá trị để bạn không cần nhập lại dữ liệu.
Sau đây là một ví dụ đơn giản:
Công cụ cho nhà phát triển của Chrome cho thấy trường biểu mẫu ở đây không có thuộc tính có ý nghĩa đối với trình duyệt. Thay vào đó, đây chỉ là một thuộc tính name của n300.
Trường này không tương ứng với một giá trị trong tập hợp dữ liệu có cấu trúc phù hợp với tính năng Tự động điền của Chrome, nhưng Chrome vẫn có thể giúp người dùng nếu gặp trường có tên này trong tương lai.
Kiểm thử các tính năng Tự động điền mới trong Chrome DevTools
Chrome đang thử nghiệm các tính năng mới cho bảng điều khiển Vấn đề trong Công cụ cho nhà phát triển để giúp gỡ lỗi các sự cố liên quan đến tính năng Tự động điền.
Bạn có thể dùng thử các tính năng mới này trong Chrome Canary. Đánh dấu 
Cài đặt > Thử nghiệm > 
Đánh dấu một nút hoặc thuộc tính vi phạm trong cây DOM của bảng điều khiển Phần tử trong DevTools và tải lại DevTools khi được nhắc.
Ngoài ra, bạn có thể chạy Chrome Canary qua dòng lệnh bằng cờ AutofillEnableDevtoolsIssues:
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
Để kiểm tra vấn đề, hãy mở bảng điều khiển Vấn đề trong DevTools trên một trang có biểu mẫu. Bạn có thể bắt đầu từ form-problems.glitch.me.
Như bạn có thể thấy, biểu mẫu này rất lộn xộn! Có:
- Các trường nhập không có thuộc tính
idhoặcname. - Các phần tử có mã nhận dạng trùng lặp.
<label>có thuộc tínhforkhông khớp với mã phần tử.- Trường có thuộc tính
autocompletetrống.
Di chuột qua một phần tử được đánh dấu trong cây DOM rồi nhấp vào Xem vấn đề để tìm hiểu thêm.
Nhấp vào Violating node (Điểm vi phạm) để xem các tài nguyên bị ảnh hưởng của từng vấn đề. Biểu mẫu này có 8 nhãn với thuộc tính for không khớp với id của trường biểu mẫu.
Sử dụng Công cụ cho nhà phát triển để cải thiện khả năng hỗ trợ tiếp cận của biểu mẫu
Công cụ cho nhà phát triển cũng có thể làm nổi bật các vấn đề về khả năng hỗ trợ tiếp cận của tính năng Tự động điền, chẳng hạn như trường biểu mẫu không có thuộc tính aria-labelledby hoặc <label> được liên kết.
Trong ví dụ này, phần tử <input> có một nhãn phù hợp. Điều này có nghĩa là các thiết bị hỗ trợ có thể thông báo mục đích của phần tử. Tuy nhiên, trong ví dụ sau, không tìm thấy nhãn hoặc thuộc tính aria-labelledby trùng khớp.
Đưa ra ý kiến phản hồi về các tính năng Tự động điền mới trong Công cụ cho nhà phát triển
Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng hoặc bất kỳ nội dung nào khác liên quan đến DevTools:
- Gửi đề xuất hoặc ý kiến phản hồi cho chúng tôi thông qua lỗi tổng hợp trên crbug.com.
- Báo cáo sự cố trong Công cụ cho nhà phát triển: Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố trong Công cụ cho nhà phát triển.
- Gửi tweet đến @ChromeDevTools.
Tìm hiểu thêm
- Tìm hiểu về biểu mẫu: Một khoá học về biểu mẫu HTML để giúp bạn cải thiện chuyên môn của mình với tư cách là nhà phát triển web. Phù hợp với những người mới sử dụng biểu mẫu và tính năng Tự động điền.
- web.dev/tags/forms: Hướng dẫn, phương pháp hay nhất và lớp học lập trình về các biểu mẫu thanh toán, đăng nhập và địa chỉ.