Sử dụng Công cụ của Chrome cho nhà phát triển bằng công nghệ hỗ trợ

Rob Dodson

Twitter GitHub Sự cố Trang chủ

Hướng dẫn này nhằm giúp những người dùng chủ yếu dựa vào công nghệ hỗ trợ như trình đọc màn hình truy cập và sử dụng Công cụ của Chrome cho nhà phát triển. Công cụ của Chrome cho nhà phát triển là một bộ công cụ cho nhà phát triển web được tích hợp sẵn trong trình duyệt Google Chrome. Xem Tài liệu tham khảo về hỗ trợ tiếp cận nếu bạn đang tìm các tính năng của Công cụ cho nhà phát triển liên quan đến việc cải thiện khả năng hỗ trợ tiếp cận của trang web.

Khả năng hỗ trợ tiếp cận của Công cụ cho nhà phát triển đang trong quá trình hoàn thiện. Một số bảng điều khiển và thẻ hoạt động tốt hơn với công nghệ hỗ trợ so với các bảng điều khiển và thẻ khác. Hướng dẫn này sẽ chỉ cho bạn các bảng điều khiển dễ truy cập nhất và nêu bật các vấn đề cụ thể bạn có thể gặp phải trong quá trình thực hiện.

Tổng quan

Trước khi bắt đầu, bạn cần hình dung được cấu trúc của giao diện người dùng cho Công cụ cho nhà phát triển. Công cụ cho nhà phát triển được chia thành một loạt bảng điều khiển được sắp xếp thành một ARIA tablist. Ví dụ:

• Bảng điều khiển Phần tử cho phép bạn xem và thay đổi nút DOM hoặc CSS.
• Bảng điều khiển Console (Bảng điều khiển) cho phép bạn đọc nhật ký JavaScript và các đối tượng chỉnh sửa trực tiếp.

Trong khu vực nội dung của mỗi bảng điều khiển, có một số công cụ, thường được gọi là thẻ hoặc ngăn trong tài liệu. Ví dụ: bảng điều khiển Elements (Phần tử) chứa các thẻ bổ sung để kiểm tra trình nghe sự kiện, cây hỗ trợ tiếp cận và nhiều dữ liệu khác. Sự khác biệt giữa các thẻ và các ngăn có thể tuỳ ý. Lý do duy nhất bạn sẽ thấy một thuật ngữ trong hai thuật ngữ còn lại là để duy trì sự nhất quán với phần còn lại của tài liệu Công cụ cho nhà phát triển chính thức.

Phím tắt

Tài liệu tham khảo về phím tắt cho công cụ phát triển công cụ là bản tóm tắt hữu ích. Hãy nhớ đánh dấu trang và tham khảo lại khi bạn khám phá các bảng điều khiển khác nhau.

Mở Công cụ cho nhà phát triển

Để bắt đầu, hãy đọc kỹ bài viết Mở Công cụ của Chrome cho nhà phát triển. Có một số cách để mở Công cụ cho nhà phát triển, thông qua phím tắt hoặc các mục trong trình đơn.

Di chuyển giữa các bảng điều khiển

Di chuyển bằng bàn phím

• Khi Công cụ cho nhà phát triển mở, hãy nhấn tổ hợp phím Control + ] hoặc Command + ] (máy Mac) để lấy tiêu điểm vào bảng điều khiển tiếp theo.
• Nhấn tổ hợp phím Control + [ hoặc Command + [ (Mac) để lấy tiêu điểm bảng điều khiển trước đó.
• Bạn cũng có thể dùng tổ hợp phím Shift+Tab để di chuyển tiêu điểm vào tablist của bảng điều khiển và dùng các phím mũi tên để thay đổi bảng điều khiển, mặc dù bạn có thể sử dụng các phím tắt đã đề cập trước đó nhanh hơn.

Vấn đề đã biết

• Một số bảng điều khiển (chẳng hạn như bảng điều khiển Bảng điều khiển và Hiệu suất) có thể di chuyển tiêu điểm vào vùng nội dung ngay sau khi được kích hoạt. Điều này có thể gây khó khăn cho việc điều hướng bằng các phím mũi tên.
• Tên của bảng điều khiển đã chọn được công bố, nhưng chỉ sau khi đọc nội dung được lấy làm tâm điểm trong bảng điều khiển. Điều này có thể khiến bạn rất dễ bỏ lỡ quảng cáo.

Điều hướng bằng trình đơn Lệnh

Để lấy tiêu điểm một bảng điều khiển cụ thể, hãy sử dụng Trình đơn lệnh:

1. Khi Công cụ cho nhà phát triển đang mở, hãy nhấn tổ hợp phím Control + Shift + P hoặc Command + Shift + P (Mac) để mở Trình đơn lệnh. Trình đơn lệnh là một tổ hợp với tính năng tự động hoàn thành kết quả tìm kiếm mờ.
2. Nhập tên bảng điều khiển mà bạn muốn mở, sau đó sử dụng bàn phím Mũi tên xuống để chuyển đến đúng tuỳ chọn.
3. Nhấn Enter để chạy một lệnh.

Ví dụ: để mở bảng điều khiển Các phần tử:

1. Mở Trình đơn lệnh.
2. Nhập E rồi nhập L. Lựa chọn Bảng điều khiển > Hiển thị phần tử được chọn.
3. Nhấn Enter để chạy lệnh mở bảng điều khiển.

Mở bảng điều khiển theo cách này sẽ chuyển hướng tiêu điểm đến nội dung của bảng điều khiển. Trong bảng điều khiển Elements (Phần tử), tiêu điểm sẽ di chuyển đến Cây DOM.

Bảng điều khiển phần tử

Kiểm tra một phần tử trên trang

1. Di chuyển đến thành phần bạn muốn kiểm tra bằng cách sử dụng con trỏ của trình đọc màn hình.
2. Mô phỏng thao tác nhấp chuột phải vào phần tử để mở trình đơn theo bối cảnh.
3. Chọn lựa chọn Kiểm tra. Thao tác này sẽ mở bảng điều khiển Elements (Phần tử) và tập trung phần tử vào Cây DOM.

DOM Tree được bố trí dưới dạng ARIA tree. Hãy xem phần Di chuyển Cây DOM bằng bàn phím để biết ví dụ.

Sao chép mã cho một phần tử trong Cây DOM

1. Với tiêu điểm là một nút trong Cây DOM, hãy hiển thị trình đơn theo bối cảnh khi nhấp chuột phải.
2. Mở rộng lựa chọn Sao chép.
3. Chọn Copy externalHTML (Sao chép bên ngoài).

Vấn đề đã biết

• Phương thức Sao chép externalHTML thường không chọn nút hiện tại mà chọn nút mẹ của nút đó. Tuy nhiên, nội dung của phần tử này vẫn phải nằm trong ExternalHTML đã sao chép.

Sửa đổi các thuộc tính của một phần tử trong Cây DOM

• Với tiêu điểm là một nút trong Cây DOM, hãy nhấn Enter để chỉnh sửa nút đó.
• Nhấn phím Tab để di chuyển giữa các giá trị thuộc tính. Khi nghe thấy "dấu cách", tức là bạn đang ở bên trong mục nhập văn bản trống và có thể nhập một giá trị thuộc tính mới.
• Nhấn tổ hợp phím Control + Enter hoặc Command + Enter (Mac) để chấp nhận thay đổi và nghe toàn bộ nội dung của phần tử.

Vấn đề đã biết

• Khi nhập văn bản, bạn sẽ không nhận được phản hồi nào. Nếu bạn mắc lỗi chính tả và sử dụng các phím mũi tên để khám phá nội dung nhập, bạn cũng sẽ không nhận được phản hồi nào. Cách dễ nhất để kiểm tra công việc của bạn là chấp nhận thay đổi, sau đó theo dõi toàn bộ thành phần được thông báo.

Chỉnh sửa HTML của một phần tử trong Cây DOM

• Với tiêu điểm là một nút trong Cây DOM, hãy nhấn Enter để chỉnh sửa nút đó.
• Nhấn phím Tab để di chuyển giữa các giá trị thuộc tính. Ví dụ: khi nghe tên thành phần, chẳng hạn như "h2", bạn đang ở bên trong một mục nhập văn bản và có thể thay đổi loại thành phần.
• Nhấn tổ hợp phím Control + Enter hoặc Command + Enter (Mac) để chấp nhận thay đổi.

Ví dụ: việc nhập h3 và nhấn tổ hợp phím Control+Enter hoặc Command+Enter (Mac) sẽ thay đổi thẻ bắt đầu và thẻ kết thúc của phần tử thành h3.

Các thẻ trong bảng điều khiển của phần tử

Bảng điều khiển Phần tử chứa các thẻ bổ sung để kiểm tra những nội dung như CSS đã áp dụng cho một phần tử hoặc vị trí của phần tử đó trong cây hỗ trợ tiếp cận.

• Với tiêu điểm trên một nút trong Cây DOM, hãy nhấn Tab cho đến khi bạn nghe thấy ngăn Kiểu được chọn.
• Sử dụng Mũi tên phải để khám phá các thẻ có sẵn khác.

Cây DOM chuyển các phần tử có thuộc tính href thành các đường liên kết có thể làm tâm điểm, vì vậy, bạn có thể cần nhấn Thẻ nhiều lần để chuyển đến ngăn Kiểu.

Vấn đề đã biết

Bạn không thể truy cập vào thẻ Điểm ngắt DOM và Thuộc tính bằng bàn phím.

Ngăn kiểu

Trong ngăn Kiểu, bạn sẽ tìm thấy các chế độ điều khiển để lọc các kiểu, chuyển đổi trạng thái thành phần (chẳng hạn như :active và :focus), chuyển đổi các lớp và thêm lớp mới. Ngoài ra, còn có một công cụ kiểm tra kiểu mạnh mẽ để khám phá và sửa đổi các kiểu đang áp dụng cho phần tử đang được chú trọng trong Cây DOM.

Khái niệm chính cần hiểu về ngăn Kiểu là ngăn này chỉ hiển thị các kiểu cho nút đang được chọn trong Cây DOM. Ví dụ: giả sử bạn đã kiểm tra xong kiểu của nút <header> và bây giờ bạn muốn xem kiểu cho nút <footer>. Để làm việc đó, trước tiên, bạn cần chọn nút <footer> trong Cây DOM. Bạn có thể tìm thấy nhanh hơn khi sử dụng quy trình Kiểm tra để kiểm tra một nút nằm gần nút footer (chẳng hạn như một đường liên kết trong chân trang), tập trung vào Cây DOM, sau đó sử dụng bàn phím để di chuyển đến nút chính xác mà bạn quan tâm.

Di chuyển trong ngăn Kiểu

Vì tất cả các công cụ định kiểu đều kết nối theo cách này hay cách khác với ngăn Kiểu, nên trước tiên, bạn nên trở thành chuyên gia về công cụ này.

• Với tiêu điểm nằm ở ngăn Kiểu, nhấn phím Tab để di chuyển tiêu điểm vào bên trong và khám phá nội dung của tiêu điểm đó.
• Nhấn Tab cho đến khi kiểu đầu tiên hoạt động. Nếu bạn đang sử dụng trình đọc màn hình, kiểu đầu tiên này sẽ được thông báo là "element.style {}".
• Nhấn Mũi tên xuống để di chuyển trong danh sách các kiểu theo thứ tự cụ thể. Trình đọc màn hình sẽ thông báo từng kiểu bắt đầu bằng tên của tệp CSS, số dòng mà kiểu đó xuất hiện và tên kiểu đó. Ví dụ: "main.css:233 .card__img {}"
• Nhấn Enter để kiểm tra kiểu chi tiết. Tiêu điểm bắt đầu trên phiên bản có thể chỉnh sửa của tên kiểu.
• Nhấn phím Tab để di chuyển giữa các phiên bản có thể chỉnh sửa của từng thuộc tính CSS và giá trị tương ứng của các thuộc tính đó. Ở cuối mỗi khối kiểu là một trường văn bản trống có thể chỉnh sửa mà bạn có thể dùng để thêm các thuộc tính CSS khác.
• Bạn có thể tiếp tục nhấn phím Tab để di chuyển qua danh sách các kiểu hoặc nhấn Escape để thoát chế độ này và quay lại cách di chuyển bằng các phím mũi tên.

Hãy nhớ đọc qua tài liệu tham khảo bàn phím của ngăn Kiểu để biết các phím tắt khác.

Vấn đề đã biết

• Nếu sử dụng trường văn bản có thể chỉnh sửa Filter (Bộ lọc), bạn sẽ không thể điều hướng danh sách các kiểu nữa.

Bật/tắt trạng thái thành phần

Cách bật/tắt trạng thái của một phần tử, chẳng hạn như :active hoặc :focus:

1. Chuyển đến ngăn Kiểu và nhấn phím Tab cho đến khi nút Bật/tắt Trạng thái phần tử có tiêu điểm.
2. Nhấn phím Enter để mở rộng tập hợp các trạng thái thành phần. Các trạng thái của phần tử được biểu thị dưới dạng một nhóm hộp đánh dấu.
3. Nhấn Tab cho đến khi trạng thái đầu tiên (:active) có tiêu điểm.
4. Nhấn phím cách để bật phím cách. Nếu phần tử đang được chọn trong Cây DOM có kiểu :active, thì phần tử đó hiện đã được áp dụng.
5. Tiếp tục nhấn phím Tab để khám phá tất cả các trạng thái có sẵn.

Thêm một lớp học đang thoát

Bên cạnh nút Bật/tắt Trạng thái phần tử là nút Lớp phần tử. Di chuyển tiêu điểm vào đó bằng cách nhấn Tab rồi nhấn Enter. Tiêu điểm chuyển sang trường văn bản chỉnh sửa có nhãn Add New Class (Thêm lớp mới).

Nút Lớp phần tử chủ yếu được dùng để thêm các lớp hiện có vào một phần tử. Ví dụ: nếu biểu định kiểu của bạn chứa một lớp trợ giúp có tên .clearfix, bạn có thể nhấn . bên trong trường văn bản chỉnh sửa để xem danh sách các lớp đề xuất và sử dụng Mũi tên xuống để tìm đề xuất .clearfix. Bạn cũng có thể tự nhập tên lớp rồi nhấn phím Enter để áp dụng.

Thêm quy tắc kiểu mới

Bên cạnh nút Element Classes (Lớp phần tử) là nút New Style Rule (Quy tắc kiểu mới). Di chuyển tiêu điểm vào đó bằng cách nhấn phím Tab rồi nhấn phím Enter. Tiêu điểm di chuyển vào một trường văn bản có thể chỉnh sửa bên trong công cụ kiểm tra kiểu. Nội dung văn bản ban đầu của trường là tên thẻ của phần tử được chọn trong Cây DOM. Bạn có thể nhập tên lớp bất kỳ mà bạn muốn vào trường này, sau đó nhấn phím Tab để chỉ định thuộc tính CSS cho trường đó.

Thẻ được tính toán

Với tiêu điểm trên thẻ Computed (Tính toán), hãy nhấn phím Tab để di chuyển tiêu điểm vào bên trong và khám phá nội dung của tiêu điểm đó. Trong thẻ Computed (Tính toán), có các chế độ điều khiển để khám phá xem những thuộc tính CSS nào thực sự được áp dụng cho một phần tử theo thứ tự cụ thể.

Khám phá tất cả kiểu đã tính toán

Nhấn phím Tab cho đến khi bạn đến được tập hợp các kiểu đã tính toán. Các đối tượng này được trình bày dưới dạng tree của Ứng dụng Internet phong phú dễ dùng (ARIA). Khi mở rộng hộp danh sách, bạn sẽ thấy bộ chọn CSS nào đang áp dụng kiểu đã tính toán. Những bộ chọn này được sắp xếp theo mức độ cụ thể. Trình đọc màn hình sẽ thông báo giá trị đã tính toán mà bộ chọn CSS hiện đang khớp, tên tệp của biểu định kiểu chứa bộ chọn và số dòng của bộ chọn này.

Vấn đề đã biết

• Nếu sử dụng trường văn bản Filter (Bộ lọc), bạn sẽ không kiểm tra được các kiểu nữa.

Thẻ Trình nghe sự kiện

Từ trong bảng điều khiển Phần tử, bạn có thể kiểm tra trình nghe sự kiện được áp dụng cho một phần tử bằng cách sử dụng thẻ Trình xử lý sự kiện. Với tiêu điểm nằm ở ngăn Kiểu, hãy nhấn Mũi tên phải để chuyển đến thẻ Event Listeners (Trình xử lý sự kiện).

Khám phá trình nghe sự kiện

Trình nghe sự kiện được trình bày dưới dạng tree của Ứng dụng Internet phong phú dễ dùng (ARIA). Bạn có thể dùng các phím mũi tên để di chuyển giữa các nút đó. Trình đọc màn hình sẽ thông báo tên của đối tượng DOM được đính kèm trình nghe sự kiện, cũng như tên tệp nơi trình nghe sự kiện được định nghĩa và số dòng của trình nghe.

Ngăn hỗ trợ tiếp cận

Với tiêu điểm nằm trong ngăn Hỗ trợ tiếp cận, nhấn phím Tab để di chuyển tiêu điểm vào bên trong và khám phá nội dung của tiêu điểm đó. Trong ngăn Hỗ trợ tiếp cận có các chế độ điều khiển để khám phá cây hỗ trợ tiếp cận, các thuộc tính của Ứng dụng Internet phong phú dễ dùng (ARIA) áp dụng cho một phần tử và các thuộc tính hỗ trợ tiếp cận đã tính toán của phần tử đó.

Cây hỗ trợ tiếp cận

Cây hỗ trợ tiếp cận được trình bày dưới dạng tree của Ứng dụng Internet phong phú dễ dùng (ARIA), trong đó mỗi treeitem tương ứng với một phần tử trong DOM. Cây thông báo vai trò đã tính toán cho nút đã chọn. Các phần tử chung như div và span được công bố là "GenericContainer" trong cây. Sử dụng các phím mũi tên để đi theo cây và khám phá mối quan hệ mẹ con.

Vấn đề đã biết

• Loại cây ARIA mà ngăn Accessibility (Hỗ trợ tiếp cận) sử dụng có thể không được hiển thị đúng cách trong Chrome cho trình đọc màn hình macOS như VoiceOver. Hãy đăng ký vấn đề Chromium #868480 để thông tin về tiến trình của vấn đề này.
• Các phần Thuộc tính của Ứng dụng Internet phong phú dễ dùng (ARIA) và Thuộc tính điện toán được đánh dấu là cây ARIA, nhưng các phần này hiện không có tính năng quản lý tiêu điểm nên không thể thao tác bằng bàn phím.

Bảng điều khiển kiểm tra

Bảng điều khiển Kiểm tra cho phép bạn chạy một loạt các kiểm thử trên một trang web để kiểm tra các vấn đề thường gặp liên quan đến hiệu suất, khả năng hỗ trợ tiếp cận, SEO và một số danh mục khác.

Định cấu hình và chạy quy trình kiểm tra

1. Khi mở bảng Kiểm tra lần đầu, tiêu điểm sẽ được đặt vào nút Chạy kiểm tra ở cuối biểu mẫu. Theo mặc định, biểu mẫu này được định cấu hình để chạy các lượt kiểm tra cho mọi danh mục bằng cách sử dụng quy trình mô phỏng trên thiết bị di động trên kết nối 3G mô phỏng.
2. Sử dụng tổ hợp phím Shift+Tab hoặc quay lại chế độ Duyệt qua để thay đổi chế độ cài đặt kiểm tra.
3. Khi bạn đã sẵn sàng chạy quy trình kiểm tra, hãy quay lại nút Chạy kiểm tra rồi nhấn phím Enter.
4. Tiêu điểm sẽ di chuyển sang cửa sổ phương thức có nút Cancel (Huỷ) để cho phép bạn thoát khỏi quy trình kiểm tra. Bạn có thể nghe thấy một loạt âm báo khi quy trình kiểm tra chạy và làm mới trang nhiều lần.

Vấn đề đã biết

• Các phần khác nhau của biểu mẫu cấu hình hiện không được đánh dấu bằng phần tử fieldset. Bạn có thể dễ dàng di chuyển trong chế độ Duyệt qua để tìm ra chế độ điều khiển nào được liên kết với từng phần.
• Không có âm báo hoặc thông báo khu vực trực tiếp nào khi quá trình kiểm tra kết thúc. Nhìn chung, quá trình này mất khoảng 30 giây, sau đó bạn có thể xem được kết quả. Sử dụng chế độ Duyệt qua có thể là cách dễ nhất để đạt được kết quả.

Cách sử dụng báo cáo kiểm tra

Báo cáo kiểm tra được sắp xếp thành các phần tương ứng với từng danh mục kiểm tra. Báo cáo sẽ mở ra kèm theo danh sách điểm số của từng danh mục. Các điểm số này cũng là các đường liên kết có thể được dùng để chuyển đến các phần có liên quan. Trong mỗi mục là các phần tử details có thể mở rộng, chứa thông tin liên quan đến các lượt kiểm tra đạt hoặc không thành công. Theo mặc định, chỉ những lượt kiểm tra không đạt mới xuất hiện. Mỗi phần kết thúc bằng một phần tử details cuối cùng chứa tất cả các bài kiểm tra đã đạt.

Để chạy một quy trình kiểm tra mới, hãy sử dụng tổ hợp phím Shift+Tab để thoát báo cáo và tìm nút Thực hiện kiểm tra.