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 có thể truy cập và sử dụng Công cụ cho nhà phát triển của Chrome. 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ề khả năng 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 một trang web.

Khả năng hỗ trợ tiếp cận của Công cụ cho nhà phát triển vẫn đang trong quá trình hoàn thiệ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 những bảng điều khiển và thẻ khác. Hướng dẫn này sẽ trình bày cho bạn những bảng điều khiển dễ truy cập nhất và nêu bật những vấn đề cụ thể mà bạn có thể gặp phải trong quá trình này.

Tổng quan

Trước khi bắt đầu, bạn nên có một mô hình tinh thần về cấu trúc giao diện người dùng của Công cụ cho nhà phát triển. Công cụ dành 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 Phần tử cho phép bạn xem và thay đổi các nút DOM hoặc CSS.
  • 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 vùng 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 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 thẻ khác. Sự phân 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 trong hai thuật ngữ này là để duy trì tính nhất quán với phần còn lại của tài liệu chính thức về Công cụ cho nhà phát triển.

Phím tắt

Tài liệu tham khảo về phím tắt của Công cụ cho nhà phát triển là một bảng thông tin 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 phần 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 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 DevTools đang mở, hãy nhấn tổ hợp phím Control+] hoặc Command+] (Mac) để chuyển tiêu điểm đến 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ể dùng tổ hợp phím Shift+Tab để di chuyển tiêu điểm vào tablist của một 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. Tuy nhiên, có thể bạn sẽ thao tác nhanh hơn khi 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 vùng nội dung 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 các phím mũi tên.
  • Tên của bảng điều khiển được chọn sẽ được thông báo, nhưng chỉ sau khi bảng điều khiển đó đọc nội dung được lấy tiêu điểm. Điều này có thể khiến bạn rất dễ bỏ lỡ.

Thao tác bằng Trình đơn lệnh

Để tập trung 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ở Trình đơn lệnh. Trình đơn lệnh là một hộp tổ hợp tự động hoàn thành tìm kiếm gần đúng.
  2. Nhập tên của bảng điều khiển mà bạn muốn mở, sau đó dùng bàn phím Mũi tên xuống để chuyển đến lựa chọn phù hợp.
  3. Nhấn phím Enter để chạy một lệnh.

Ví dụ: để mở bảng điều khiển Phần tử, hãy làm như sau:

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

Khi mở một bảng điều khiển theo cách này, tiêu điểm sẽ chuyển đế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 Phần tử, tiêu điểm sẽ di chuyển vào 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ử mà 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 mục Kiểm tra. Thao tác này sẽ mở bảng điều khiển Phần tử và tập trung vào phần tử trong Cây DOM.

Cây DOM được bố trí dưới dạng một 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 lựa chọn Sao chép.
  3. Chọn Sao chép outerHTML.

Vấn đề đã biết

  • Copy 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 các 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 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 ở 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 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ào trường nhập văn bản, bạn sẽ không nhận được phản hồi. Nếu nhập sai và dùng các phím mũi tên để khám phá nội dung bạn nhập, bạn cũng sẽ không nhận được thông tin 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 đó lắng 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 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 tên của phần tử, chẳng hạn như "h2", bạn đang ở trong một phần tử 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ụ: khi bạn nhập h3 rồi nhấn tổ hợp phím Control+Enter hoặc Command+Enter (Mac), thẻ bắt đầu và thẻ kết thúc của phần tử sẽ thay đổi thành h3.

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

Bảng Phần tử chứa các thẻ bổ sung để kiểm tra những thứ 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 ngăn Kiểu được chọn.
  • Sử dụng Mũi tên phải để khám phá các thẻ khác hiện 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ấy tiêu điểm, vì vậy, bạn có thể phải 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ể truy cập vào thẻ DOM Breakpoints (Điểm ngắt DOM) và Properties (Thuộc tính) bằng bàn phím.

Ngăn Kiểu

Trong ngăn Kiểu, bạn sẽ thấy các chế độ kiểm soát để 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 đang được áp dụng cho phần tử đang được lấy tiêu điểm 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ị kiểu cho nút hiện được chọn trong Cây DOM. Ví dụ: giả sử bạn đã kiểm tra xong các kiểu của một nút <header> và giờ bạn muốn xem các kiểu của một nút <footer>. Để làm được 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 quy trình Kiểm tra nhanh hơn khi 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), nút này sẽ tập trung vào Cây DOM, sau đó dùng bàn phím để 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ụ về 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 này.
  • Nhấn phím Tab cho đến khi kiểu đầu tiên trở thành kiểu đang hoạt động. Nếu bạn đang 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 của 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 Enter để xem xét kỹ hơn một kiểu. Tiêu điểm bắt đầu ở phiên bản có thể chỉnh sửa của tên kiểu.
  • Nhấn 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à các giá trị tương ứng. Ở 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 kiểu hoặc nhấn phím Escape để thoát khỏi chế độ này và quay lại chế độ di chuyển bằng phím mũi tên.

Đừng quên đọc kỹ bảng tham chiếu phím tắt của 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 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ử

Để 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. Di chuyển đến ngăn Kiểu rồi nhấn phím Tab cho đến khi nút Bật/tắt trạng thái phần tử nằm trong 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 của 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 lấy tiêu điểm.
  4. Nhấn phím cách để bật chế độ này. Nếu phần tử hiện được chọn trong Cây DOM có kiểu :active, thì kiểu đó 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 học hiện có

Nút Toggle Element State (Bật/tắt trạng thái phần tử) nằm bên cạnh nút Element Classes (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 một trường chỉnh sửa văn bản có nhãn Thêm lớp mới.

Nút Element Classes (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 có một lớp trợ giúp 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à dùng Mũi tên xuống để tìm đề xuất .clearfix. Hoặc tự nhập tên lớp học rồi nhấn phím Enter để áp dụng.

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

Nút New Style Rule (Quy tắc kiểu mới) nằm bên cạnh nút Element Classes (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 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 Tab để chỉ định các thuộc tính CSS cho tên lớp đó.

Thẻ Đã tính toán

Khi tiêu điểm nằm trên thẻ Đã 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ẻ này. Trong thẻ Đã tính toán, có các chế độ kiểm soát để 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 chuyển đến tập hợp các kiểu được tính toán. Các mục này được trình bày dưới dạng tree ARIA. Khi mở rộng một hộp danh sách, bạn sẽ thấy bộ chọn CSS nào đang áp dụng kiểu đã tính. 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ị được tính toán, 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 cho bộ chọn.

Vấn đề đã biết

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

Thẻ Trình xử lý sự kiện

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 nghe sự kiện. Khi tiêu điểm nằm trên ngăn Styles (Kiểu), hãy nhấn 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ể dùng các phím mũi tên để di chuyển giữa các mục này. 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 này. Trong ngăn Hỗ trợ tiếp cận, có các chế độ kiểm soát để 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ủ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 ARIA, trong đó mỗi treeitem tương ứng với một phần tử trong DOM. Cây này thông báo vai trò được 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 được hiển thị đúng cách trong Chrome cho trình đọc màn hình macOS như VoiceOver. Đăng ký theo dõi vấn đề số 868480 của Chromium để được thông báo về tiến trình giải quyết vấn đề này.
  • Các mục ARIA Attributes (Thuộc tính ARIA) và Computed Properties (Thuộc tính được tính toán) được đánh dấu là cây ARIA, nhưng 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 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 thử nghiệm 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 Kiểm tra được mở lần đầu tiên, tiêu điểm sẽ được đặt trên nút Chạy 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 các 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 một kết nối 3G mô phỏng.
  2. Nhấn 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 di chuyển vào một cửa sổ phương thức có nút 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 các biểu tượng âm thanh khi quá trình kiểm tra diễn ra và trang được làm mới 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 ra những chế độ kiểm soát được liên kết với từng phần.
  • Không có âm báo hoặc thông báo về vùng phát trực tiếp khi quá trình kiểm tra hoàn tất. Thông thường, quá trình này mất khoảng 30 giây, sau đó bạn có thể chuyển đến kết quả. Sử dụng chế độ Duyệt có thể là cách dễ nhất để đạt được 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à đường liên kết mà bạn có thể 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 hoạt động kiểm tra đã đạt hoặc không đạt. Theo mặc định, chỉ những bài 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 Thực hiện quy trình kiểm tra.