Nhóm Công cụ của Chrome cho nhà phát triển đang xây dựng các tính năng mới bổ sung để 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 Công cụ cho nhà phát triển nhằm giúp nhà phát triển hiểu được 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 thành công:
- Trình duyệt tự động điền các giá trị được lưu trữ với các trường trong biểu mẫu như thế nào?
- Tính năng Tự động điền sử dụng những tiêu chí nào để điền vào một trường trong biểu mẫu?
- Những trường nào chưa được tính năng Tự động điền điền?
- Tại sao tính năng Tự động điền không điền vào trường trên biểu mẫu?
Bài viết này trình bày các tính năng mới trong Công cụ của Chrome cho nhà phát triển, đồ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ự độ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à có thể điền vào các trường của biểu mẫu mà không cần người dùng nhập văn bản. Tính năng này được gọi là Tự động điền.
Chrome đề 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 đề 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:
Cũng có thể bạn đã thấy Chrome đề xuất nội dung đề xuất cho các trường nhập dữ liệu 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 các tập hợp 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 nhập lại dữ liệu cho các trường duy nhất trong biểu mẫu mà tính năng Tự động điền không thể xử lý. Khi 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ụ của Chrome cho nhà phát triển cho thấy trường biểu mẫu ở đây không có cá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 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ể trợ giúp người dùng nếu sau này gặp một trường có tên này.
Kiểm thử các tính năng Tự động điền mới cho Công cụ của Chrome cho nhà phát triển
Chrome đang thử nghiệm các tính năng mới cho bảng điều khiển Vấn đề của Công cụ cho nhà phát triển để giúp gỡ lỗi các sự cố Tự động điền.
Bạn có thể dùng thử các tính năng mới này trong Chrome Canary. Kiểm tra phần Cài đặt 
> Thử nghiệm > 
Làm nổi bật 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 Công cụ cho nhà phát triển khi được nhắc.
Ngoài ra, bạn có thể chạy Chrome Canary từ dòng lệnh bằng cờ AutofillEnableDevtoolsIssues:
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Máy Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
Để kiểm tra xem có vấn đề gì không, hãy mở bảng điều khiển Vấn đề cho công cụ cho nhà phát triển trên một trang có biểu mẫu. form-problems.glitch.me là nơi phù hợp để bắt đầu.
Như bạn có thể thấy, biểu mẫu này khá là lộn xộn! Có:
- Các trường nhập dữ liệu 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 và nhấp vào Xem vấn đề để tìm hiểu thêm.
Nhấp vào Nút vi phạm để xem các tài nguyên bị ảnh hưởng cho 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 một trường trong 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ề hỗ trợ tiếp cận Tự động điền, chẳng hạn như một trường biểu mẫu không có thuộc tính aria-labelledby hoặc <label> liên kết.
Trong ví dụ này, phần tử <input> có nhãn phù hợp. Tức là các thiết bị hỗ trợ có thể cho biết mục đích của phần tử. Tuy nhiên, trong ví dụ sau, hệ thống 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
Sử dụng các lựa chọn sau đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển:
- Hãy gửi đề xuất hoặc ý kiến phản hồi cho chúng tôi thông qua lỗi ô trên crbug.com.
- Báo cáo sự cố từ Công cụ cho nhà phát triển: Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển.
- Tweet tại @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 nâng cao kiến thức chuyên môn về nhà phát triển web. Phù hợp với bất cứ ai 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, các 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ỉ.