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

Rob Dodson

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ụ dành cho nhà phát triển web được tích hợp vào trình duyệt Google Chrome. Hãy 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.

Chúng tôi đang nỗ lực cải thiện khả năng hỗ trợ tiếp cận của Công cụ cho nhà phát triển. Một số bảng điều khiển và thẻ hoạt động hiệu quả 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ẽ hướng dẫn 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ể mà bạn có thể gặp phải trong quá trình sử dụng.

Tổng quan

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

• Bảng điều khiển Elements (Thành phần) cho phép bạn xem và thay đổi các 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à chỉnh sửa trực tiếp các đối tượng.

Trong khu vực nội dung của mỗi bảng điều khiển, có một số công cụ khác nhau, 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 (Thành phần) 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 thành phần khác. Sự khác biệt giữa thẻ và ngăn có phần tuỳ ý. Lý do duy nhất khiến bạn thấy một thuật ngữ hay thuật ngữ khác là để duy trì tính nhất quán với phần tài liệu còn lại của DevTools chính thức.

Phím tắt

Tài liệu tham khảo về phím tắt trong DevTools là một bảng nhớ nhanh hữu ích. Hãy nhớ đánh dấu trang này 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 bài viết Mở Công cụ của Chrome cho nhà phát triển. Có một số cách để mở DevTools, 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

Điều hướng bằng bàn phím

• Khi DevTools đang mở, hãy nhấn tổ hợp phím Control+] hoặc Command+] (Mac) để đặt 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) để đặt tiêu điểm vào bảng điều khiển trước đó.
• Bạn cũng có thể sử 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à sử dụng các phím mũi tên để thay đổi bảng điều khiển, mặc dù có thể nhanh hơn khi sử dụng các phím tắt đã đề cập trước đó.

Vấn đề đã biết

• Một số bảng điều khiển, chẳng hạn như bảng điều khiển Console (Bảng điều khiển) và Performance (Hiệu suất), có thể di chuyển tiêu điểm vào khu vực nội dung của bảng điều khiển ngay khi được kích hoạt. Điều này có thể gây khó khăn cho việc di chuyển bằng phím mũi tên.
• Tên của bảng điều khiển đã chọn sẽ được thông báo, 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 dễ bỏ lỡ.

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

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

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

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

1. Mở Command Menu (Trình đơn lệnh).
2. Nhập E rồi nhập L. Chọn tuỳ chọn Panel > Show Elements (Bảng điều khiển > Hiển thị phần tử).
3. Nhấn phím Enter để chạy lệnh mở bảng điều khiển.

Việc mở bảng điều khiển theo cách này sẽ chuyển tiêu điểm đến nội dung của chính bảng điều khiển đó. Trong trường hợp bảng điều khiển Elements (Phần tử), tiêu điểm sẽ chuyển sang DOM Tree (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 phần tử bạn muốn kiểm tra bằ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 tuỳ chọn Kiểm tra. Thao tác này sẽ mở bảng điều khiển Phần tử và đặt tiêu điểm vào phần tử trong Cây DOM.

Cây DOM được bố trí dưới dạng ARIA tree. Hãy xem phần Điều hướng 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. Khi tiêu điểm nằm trên một nút trong Cây DOM, hãy mở trình đơn ngữ cảnh bằng cách nhấp chuột phải.
2. Mở rộng tuỳ chọn Sao chép.
3. Chọn Sao chép outerHTML.

Vấn đề đã biết

• Thao tác Sao chép outerHTML 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ử vẫn phải nằm trong outerHTML đã sao chép.

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

• Khi tiêu điểm nằm trên một nút trong Cây DOM, hãy nhấn phím Enter để có thể 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 "space" (dấu cách), bạn đang ở trong một trường nhập văn bản trống và có thể nhập giá trị thuộc tính mới.
• Nhấn tổ hợp phím Ctrl+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ào vùng nhập văn bản, bạn không nhận được phản hồi. Nếu mắc lỗi chính tả và sử dụng các phím mũi tên để khám phá dữ liệu đầu vào, bạn cũng sẽ không nhận được phản hồi. Cách dễ nhất để kiểm tra công việc của bạn là chấp nhận thay đổi, sau đó nghe toàn bộ phần tử được thông báo.

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

• Khi tiêu điểm nằm trên một nút trong Cây DOM, hãy nhấn phím Enter để có thể 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 tên của phần tử, ví dụ: "h2", bạn đang ở trong một mục nhập văn bản và có thể thay đổi loại của phần tử.
• Nhấn tổ hợp phím Control+Enter hoặc Command+Enter (Mac) để chấp nhận thay đổi.

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

Thẻ bảng điều khiển Phần tử

Bảng điều khiển Elements (Thành phần) chứa các thẻ bổ sung để kiểm tra những nội dung như CSS được á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.

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

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

Vấn đề đã biết

Bạn không thể sử dụng bàn phím để truy cập vào thẻ DOM Breakpoints (Điểm ngắt DOM) và Properties (Thuộc tính).

Ngăn Kiểu

Trong ngăn Styles (Kiểu), bạn sẽ thấy các chế độ điều khiển để lọc kiểu, bật/tắt trạng thái phần tử (chẳng hạn như :active và :focus), bật/tắt 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 hiện được áp dụng cho phần tử đang được lấy làm tâm điểm trong Cây DOM.

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

Di chuyển trong ngăn Kiểu

Vì tất cả các công cụ 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.

• Khi tiêu điểm nằm trên ngăn Kiểu, 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 ngăn.
• Nhấn phím 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 phím Mũi tên xuống để di chuyển trong danh sách 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 tệp CSS, số dòng mà kiểu xuất hiện và chính tên kiểu. Ví dụ: "main.css:233 .card__img {}"
• Nhấn phím Enter để kiểm tra một kiểu chi tiết hơn. Tiêu điểm bắt đầu trên một 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 phiên bản đó. Ở 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ể sử 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 kiểu hoặc nhấn phím Escape để thoát khỏi chế độ này và quay lại thao tác điều hướng bằng phím mũi tên.

Hãy nhớ đọc kỹ tài liệu tham khảo về phím tắt trong ngăn Kiểu để biết thêm 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 kiểu nữa.

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

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 Styles (Kiểu) rồi nhấn phím Tab cho đến khi nút Toggle Element State (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 phần tử. Các trạng thái phần tử được trình bày dưới dạng một nhóm hộp đánh dấu.
3. Nhấn phím Tab cho đến khi trạng thái đầu tiên, :active, có tiêu điểm.
4. Nhấn phím Dấu cách để bật tính năng này. Nếu phần tử hiện được chọn trong Cây DOM có kiểu :active, thì kiểu này sẽ đượ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 hiện có

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 đến nút này bằng cách nhấn phím Tab rồi nhấn phím Enter. Tiêu điểm sẽ di chuyển vào trường văn bản chỉnh sửa có nhãn Thêm lớp mới.

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

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

Bên cạnh nút Lớp phần tử là nút Quy tắc kiểu mới. Di chuyển tiêu điểm đến nút này bằng cách nhấn phím Tab rồi nhấn phím Enter. Tiêu điểm sẽ di chuyển vào một trường văn bản có thể chỉnh sửa bên trong trình 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 bất kỳ tên lớp nào bạn muốn vào trường này, sau đó nhấn phím Tab để chỉ định thuộc tính CSS cho lớp đó.

Thẻ Đã tính toán

Khi tiêu điểm nằ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 thẻ đó. Trong thẻ Computed (Đã tính toán), có các chế độ điều khiển để khám phá những thuộc tính CSS 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 bộ sưu tập các kiểu được tính toán. Các thuộc tính này được trình bày dưới dạng tree ARIA. Khi mở rộng hộp danh sách, bạn sẽ thấy những bộ chọn CSS nào đang áp dụng kiểu được tính toán. Các 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, bộ chọn CSS hiện đang khớp, tên tệp của tệp định kiểu chứa bộ chọn và số dòng cho bộ chọn.

Vấn đề đã biết

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

Thẻ Trình nghe sự kiện

Trong bảng điều khiển Elements (Thành phần), bạn có thể kiểm tra trình nghe sự kiện được áp dụng cho một thành phần bằng cách sử dụng thẻ Event Listeners (Trình nghe sự kiện). Khi tiêu điểm nằm trên ngăn Styles (Kiểu), hãy nhấn phím Mũi tên phải để chuyển đến thẻ Event Listeners (Trình nghe 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 ARIA. Bạn có thể sử dụng các phím mũi tên để di chuyển giữa các mục đó. Trình đọc màn hình sẽ thông báo tên của đối tượng DOM mà trình nghe sự kiện được đính kèm, cũng như tên tệp nơi trình nghe sự kiện được xác định và số dòng của tệp đó.

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

Khi tiêu điểm nằm trên ngăn Hỗ trợ tiếp cậ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 ngăn. 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 ARIA được áp dụng cho một phần tử và các thuộc tính hỗ trợ tiếp cận được tính toán.

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 ARIA, trong đó mỗi treeitem tương ứng với một phần tử trong DOM. Cây sẽ 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 thông báo là "GenericContainer" trong cây. Sử dụng các phím mũi tên để di chuyển qua cây và khám phá mối quan hệ cha con.

Vấn đề đã biết

• Loại cây ARIA mà ngăn Hỗ trợ tiếp cận sử dụng có thể không hiển thị đúng cách trong Chrome cho các trình đọc màn hình macOS như VoiceOver. Đăng ký theo dõi vấn đề Chromium #868480 để được thông báo về tiến trình xử lý vấn đề này.
• Các phần Thuộc tính ARIA và Thuộc tính được tính toán được đánh dấu là cây ARIA, nhưng hiện không có chức 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 bài 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 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 bảng điều khiển Kiểm tra được mở lần đầu tiên, tiêu điểm sẽ được đặt trên nút Chạy quy trình kiểm tra ở cuối biểu mẫu. Theo mặc định, biểu mẫu được định cấu hình để chạy quy trình kiểm tra cho mọi danh mục bằng cách sử dụng tính năng mô phỏng thiết bị di động trên kết nối 3G được mô phỏng.
2. Sử dụng tổ hợp phím Shift+Tab hoặc quay lại chế độ Duyệt xem để 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 Run Audit (Chạy quy trình kiểm tra) rồi nhấn phím Enter.
4. Tiêu điểm sẽ chuyển sang một cửa sổ phương thức có nút Huỷ để bạn có thể 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 điều hướng các phần này ở chế độ Duyệt xem để tìm hiểu xem phần điều khiển nào được liên kết với từng phần.
• Không có thông báo bằng âm thanh hoặc thông báo về khu vực phát trực tiếp khi quy trình kiểm tra hoàn tất. Thông thường, quá trình này sẽ mất khoảng 30 giây, sau đó bạn có thể chuyển đến kết quả. Sử dụng chế độ duyệt xem có thể là cách dễ nhất để xem kết quả.

Khám phá 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 với danh sách điểm số cho từng danh mục. Những điểm số này cũng là các đường liên kết có thể dùng để chuyển đến các phần có liên quan. Trong mỗi phần là các phần tử details có thể mở rộng, chứa thông tin liên quan đến các cuộc kiểm tra đã đạt hoặc không đạt. Theo mặc định, chỉ những quy trình 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 quy trình kiểm tra đã vượt qua.

Để 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 khỏi báo cáo và tìm nút Kiểm tra.