Tính năng mới trong Công cụ cho nhà phát triển (Chrome 98)

Jecelyn Yeen

Tính năng xem trước: Cây hỗ trợ tiếp cận toàn trang

Cây hỗ trợ tiếp cận toàn trang mới giúp bạn dễ dàng nắm được thông tin tổng quan về cây hỗ trợ tiếp cận toàn trang và giúp bạn hiểu rõ hơn về cách nội dung trang web hiển thị với công nghệ hỗ trợ tiếp cận.

Trong bảng Phần tử, hãy mở ngăn Hỗ trợ tiếp cận rồi chọn hộp đánh dấu Bật cây hỗ trợ tiếp cận toàn trang. Sau đó, hãy tải lại DevTools và bạn sẽ thấy một nút hỗ trợ tiếp cận mới trong bảng điều khiển Elements (Thành phần).

Bạn có thể nhấp vào biểu tượng này để chuyển sang chế độ xem Cây hỗ trợ tiếp cận toàn trang. Bạn có thể mở rộng các nút hoặc nhấp để xem thông tin chi tiết trong ngăn Hỗ trợ tiếp cận.

Chọn một nút và chuyển về chế độ xem dạng cây DOM. Nút DOM tương ứng hiện đã được chọn. Đây là một cách hay để hiểu mối liên kết giữa nút DOM và nút cây hỗ trợ tiếp cận. Điều này cũng áp dụng cho chế độ xem dạng cây Hỗ trợ tiếp cận ⬌ cây DOM!

Trước đây, cây hỗ trợ tiếp cận có trong ngăn Hỗ trợ tiếp cận. Chế độ xem này bị hạn chế, chỉ cho phép bạn khám phá một nút và các nút cấp trên của nút đó.

Nhóm chúng tôi vẫn đang tích cực nghiên cứu tính năng xem trước này. Chúng tôi rất mong nhận được ý kiến phản hồi của bạn để cải thiện hơn nữa!

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

Vấn đề về Chromium: 887173

Các thay đổi chính xác hơn trong thẻ Thay đổi

Các thay đổi về mã trong thẻ Changes (Thay đổi) sẽ tự động được in đẹp.

Trước đây, rất khó để theo dõi những thay đổi thực tế của mã nguồn rút gọn vì tất cả mã được hiển thị trong một dòng duy nhất.

Thẻ Thay đổi

Vấn đề về Chromium: 1238818, 1268754 , 1086491

Đặt thời gian chờ lâu hơn để ghi lại luồng người dùng

Giờ đây, bạn có thể điều chỉnh chế độ cài đặt Thời gian chờ trong Trình ghi cho tất cả các bước hoặc một bước cụ thể. Điều này đặc biệt hữu ích với các trang có yêu cầu mạng chậm và hoạt ảnh dài.

Ví dụ: tôi ghi lại luồng người dùng trên trang minh hoạ này để tải và nhấp vào mục trong trình đơn. Tuy nhiên, các mục trong trình đơn tải chậm (mất 6 giây). Phát lại luồng người dùng này không thành công do vượt quá 5 giây (thời gian chờ mặc định).

Chúng ta có thể sử dụng chế độ cài đặt Timeout (Thời gian chờ) mới để khắc phục vấn đề này. Mở rộng bước mà chúng ta nhấp vào mục trong trình đơn. Chỉnh sửa bước bằng cách Thêm thời gian chờ và đặt thời gian chờ thành 6000 mili giây (tương đương với 6 giây).

Bạn có thể điều chỉnh Thời gian chờ trong phần Cài đặt tính năng phát lại cho tất cả các bước (không bắt buộc). Mở rộng phần Cài đặt phát lại rồi chỉnh sửa giá trị Timeout (Thời gian chờ).

chế độ cài đặt thời gian chờ để ghi lại luồng người dùng

Vấn đề về Chromium: 1257499

Đảm bảo các trang của bạn có thể lưu vào bộ nhớ đệm bằng thẻ Bộ nhớ đệm cho thao tác tiến/lùi

Bộ nhớ đệm cho thao tác tiến/lùi (hoặc bfcache) là một tính năng tối ưu hoá của trình duyệt, cho phép điều hướng tiến và lùi trong tích tắc.

Thẻ Bộ nhớ đệm cho thao tác tiến/lùi mới có thể giúp bạn kiểm tra các trang của mình để đảm bảo các trang đó được tối ưu hoá cho bfcache và xác định mọi vấn đề có thể khiến các trang đó không đủ điều kiện.

Để kiểm thử một trang cụ thể, hãy chuyển đến trang đó trong Chrome, sau đó trong DevTools, hãy chuyển đến Application (Ứng dụng) > Back-forward Cache (Bộ nhớ đệm lui-tiến). Tiếp theo, hãy nhấp vào nút Kiểm tra bộ nhớ đệm cho thao tác tiến/lùi và Công cụ cho nhà phát triển sẽ cố gắng di chuyển qua lại để xác định xem có thể khôi phục trang từ bfcache hay không.

Là nhà phát triển web, bạn cần biết cách tối ưu hóa các trang của mình cho bfcache trên tất cả các trình duyệt vì việc này sẽ cải thiện đáng kể trải nghiệm duyệt web cho người dùng — đặc biệt là những người có mạng hoặc thiết bị chậm hơn.

Thẻ Bộ nhớ đệm cho thao tác tiến/lùi

Vấn đề về Chromium: 1110752

Bộ lọc ngăn Thuộc tính mới

Nếu muốn tập trung vào một thuộc tính cụ thể trong ngăn Properties (Thuộc tính), giờ đây, bạn có thể nhập tên hoặc giá trị của thuộc tính đó vào hộp văn bản Filter (Lọc) mới.

Theo mặc định, các thuộc tính có giá trị là null hoặc undefined sẽ không xuất hiện. Đánh dấu vào hộp Hiện tất cả để xem tất cả các cơ sở lưu trú.

Những tính năng nâng cao này giúp bạn nhanh chóng chuyển đến những tài sản mà bạn quan tâm, từ đó cải thiện năng suất!

Bộ lọc ngăn thuộc tính

Vấn đề về Chromium: 1269674

Mô phỏng tính năng đa phương tiện có màu bắt buộc của CSS

Tính năng đa phương tiện màu bắt buộc của CSS dùng để phát hiện xem tác nhân người dùng có bật chế độ màu bắt buộc (ví dụ: chế độ Độ tương phản cao của Windows) hay không, trong đó thực thi bảng màu giới hạn do người dùng chọn trên trang.

Mở Command Menu (Trình đơn lệnh), chạy lệnh Show Rendering (Hiển thị kết xuất), sau đó đặt trình đơn thả xuống Emulate CSS media feature forced-colors (Mô phỏng tính năng đa phương tiện có màu bắt buộc của CSS).

Tính năng đa phương tiện có màu bắt buộc của CSS

Vấn đề về Chromium: 1130859

Lệnh hiện thước kẻ khi di chuột

Bây giờ, bạn có thể mở Trình đơn lệnh rồi chạy lệnh Show Ruler on di (Hiện thước khi di chuột). Thước kẻ trang giúp bạn dễ dàng đo chiều rộng và chiều cao của một phần tử.

Trước đây, bạn chỉ có thể bật thước kẻ trang thông qua hộp đánh dấu Cài đặt > Hiện thước kẻ.

Lệnh hiện thước kẻ khi di chuột

Vấn đề về Chromium: 1270562

Hỗ trợ row-reverse và column-reverse trong trình chỉnh sửa hộp linh hoạt

Trình chỉnh sửa Flexbox đã thêm hai nút mới để hỗ trợ row-reverse và column-reverse trong flex-direction.

Trình chỉnh sửa Flexbox

Vấn đề về Chromium: 1263866

Phím tắt mới để phát lại XHR và mở rộng tất cả kết quả tìm kiếm

Phím tắt để phát lại XHR trong bảng điều khiển Mạng

Chọn một yêu cầu XHR trong bảng điều khiển Network (Mạng) rồi nhấn vào R trên bàn phím để phát lại XHR. Trước đây, bạn chỉ có thể phát lại XHR thông qua trình đơn theo bối cảnh (nhấp chuột phải > Phát lại XHR)

phát lại XHR

Vấn đề về Chromium: 1050021

Phím tắt để mở rộng tất cả kết quả tìm kiếm

Một lối tắt mới được thêm vào thẻ Tìm kiếm, cho phép bạn mở rộng và thu gọn tất cả kết quả tìm kiếm. Trước đây, bạn chỉ có thể mở rộng và thu gọn kết quả tìm kiếm bằng cách nhấp vào một tệp tại mỗi thời điểm.

Mở thẻ tìm kiếm bằng cách nhấn phím Esc > trình đơn 3 dấu chấm > Tìm kiếm. Nhập một chuỗi tìm kiếm (ví dụ: hàm) rồi nhấn Enter để xem danh sách kết quả tìm kiếm. Đặt tiêu điểm vào kết quả tìm kiếm và sử dụng phím tắt sau để mở rộng/thu gọn các tệp tìm kiếm:

  • Windows / Linux – Ctrl + Shift + { hoặc }
  • MacOS – Cmd + Options + { hoặc }

Chuyển đến phím tắt để tham khảo các phím tắt trong Công cụ của Chrome cho nhà phát triển.

Vấn đề về Chromium: 1255073

Lighthouse 9 trong bảng điều khiển Lighthouse

Bảng điều khiển Lighthouse đang chạy Lighthouse 9. Giờ đây, Lighthouse sẽ liệt kê tất cả các phần tử có cùng mã nhận dạng.

Mã nhận dạng phần tử không duy nhất là một vấn đề thường gặp về hỗ trợ tiếp cận. Ví dụ: mã nhận dạng được tham chiếu trong thuộc tính aria-labelledby được sử dụng trên nhiều phần tử.

Hãy xem bài viết Tính năng mới trong Lighthouse 9.0 để biết thêm thông tin chi tiết về các bản cập nhật.

​Bài kiểm tra trên Lighthouse cho "Tất cả các phần tử có thể làm tâm điểm phải có một "id" duy nhất, hiển thị hai phần tử có cùng một "id"

Vấn đề về Chromium: 772558

Cải tiến bảng điều khiển Nguồn

Rất nhiều điểm cải tiến về độ ổn định trong bảng điều khiển Sources (Nguồn) khi chúng tôi nâng cấp bảng điều khiển này để sử dụng CodeMirror 6. Dưới đây là một số điểm cải tiến đáng chú ý:

  • Nhanh hơn đáng kể khi mở tệp lớn (ví dụ: WASM, JavaScript)
  • Không còn phải cuộn ngẫu nhiên khi duyệt qua mã
  • Cải thiện nội dung đề xuất tự động hoàn thành cho các nguồn có thể chỉnh sửa (ví dụ: đoạn mã, ghi đè cục bộ)

Vấn đề về Chromium: 1241848

Nội dung nổi bật khác

Sau đây là một số bản sửa lỗi đáng chú ý trong bản phát hành này:

  • Hiển thị chính xác sơ đồ dạng thác nước của các yêu cầu mạng. Trước đây, kiểu này bị hỏng. (1275501)
  • Tính năng đánh dấu mã bị hỏng khi tìm kiếm trong các tài liệu có các dòng rất dài trong bảng điều khiển Nguồn. Lỗi này hiện đã được khắc phục. (1275496)
  • Không còn thẻ Payload (Gói dữ liệu) trùng lặp trong các yêu cầu mạng. (1273972)
  • Khắc phục tình trạng thiếu thông tin chi tiết về các thay đổi về bố cục trong mục Tóm tắt của bảng điều khiển Hiệu suất. (1259606)
  • Hỗ trợ các ký tự tuỳ ý (ví dụ: ,, .) trong cụm từ tìm kiếm Tìm kiếm trên mạng. (1267196)

[Thử nghiệm] Điểm cuối trong ngăn API Báo cáo

Ngăn API báo cáo thử nghiệm được ra mắt trong Chrome 96 để giúp bạn theo dõi các báo cáo được tạo trên trang và trạng thái của các báo cáo đó.

Hiện đã có mục Điểm cuối. Tệp này cung cấp thông tin tổng quan về tất cả các điểm cuối được định cấu hình trong tiêu đề Reporting-Endpoints.

Tìm hiểu cách sử dụng API Báo cáo để theo dõi các lỗi vi phạm bảo mật, lệnh gọi API không dùng nữa và nhiều thông tin khác.

Ngăn API báo cáo

Vấn đề về Chromium: 1200732

Tải kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome 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, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

Tính năng mới trong Công cụ cho nhà phát triển

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.