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 xem 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 web của bạn được hiển thị cho công nghệ hỗ trợ.

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 chế độ xem toàn trang cho cây hỗ trợ tiếp cận. Sau đó, hãy tải lại Công cụ cho nhà phát triển 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 Phần tử.

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 Khả năng tiếp cận.

Chọn một nút rồi chuyển về chế độ xem dạng cây DOM. Giờ đây, nút DOM tương ứng sẽ đượ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 của nút đó. Điều này cũng áp dụng cho chế độ xem cây DOM ⬌ cây Hỗ trợ tiếp cận!

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 có hạn chế, bạn chỉ có thể khám phá một nút và các nút tổ tiê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ó thể 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

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

Trước đây, rất khó theo dõi những thay đổi thực tế của mã nguồn đã giảm thiểu vì tất cả mã đều xuất hiện trên một dòng.

Thẻ Thay đổi

Các 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 đối với những trang có yêu cầu mạng chậm và ảnh động dài.

Ví dụ: Tôi đã ghi lại một 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). Không thể phát lại luồng người dùng này vì thời gian phát lại 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 phát lại cho tất cả các bước (không bắt buộc). Mở rộng Chế độ cài đặt phát lại và chỉnh sửa giá trị 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 đi lùi/đi tiến mới có thể giúp bạn kiểm thử các trang để đảm bảo rằng 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 rồi chuyển đến Ứng dụng > Bộ nhớ đệm đi và về trong Công cụ cho nhà phát triển. Tiếp theo, hãy nhấp vào nút Kiểm thử bộ nhớ đệm cho thao tác tiến/lùi. DevTools sẽ cố gắng chuyển hướng ra ngoài rồi quay lại để xác định xem trang có thể được khôi phục từ bộ nhớ đệm cho thao tác tiến/lùi hay không.

Là nhà phát triển web, bạn cần phải biết cách tối ưu hoá các trang cho bộ nhớ đệm chuyển tiếp nhanh trên tất cả các trình duyệt vì điều 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ó thiết bị hoặc mạng chậm.

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

Vấn đề về Chromium: 1110752

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

Nếu muốn tập trung vào một thuộc tính cụ thể trong ngăn 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 Bộ lọc mới.

Theo mặc định, những thuộc tính có giá trị là null hoặc undefined sẽ không xuất hiện. Bật hộp đánh dấu Hiện tất cả để xem tất cả các tài sản.

Những điểm cải tiến này giúp bạn truy cập nhanh hơn vào các tài sản mà bạn quan tâm, từ đó cải thiện năng suất của bạn!

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 forced-colors của CSS

Tính năng đa phương tiện forced-colors của CSS được dùng để phát hiện xem tác nhân người dùng đã bật chế độ màu bắt buộc (ví dụ: Chế độ tương phản cao của Windows) hay chưa. Chế độ này sẽ áp dụng một bảng màu hạn chế do người dùng chọn trên trang.

Mở Trình đơn Lệnh, chạy lệnh Hiện quá trình kết xuất, rồi đặt trình đơn thả xuống 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

Giờ đây, bạn có thể mở Trình đơn lệnh và chạy lệnh 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 trang thông qua hộp đánh dấu Cài đặt > Hiện thước.

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 hộp linh hoạt đã thêm 2 nút mới để hỗ trợ row-reverse và column-reverse trong flex-direction.

Trình chỉnh sửa hộp linh hoạt

Vấn đề về Chromium: 1263866

Các 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 Mạng rồi nhấn 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 từng tệp.

Mở thẻ tìm kiếm bằng cách nhấn 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ập trung vào kết quả tìm kiếm và sử dụng phím tắt sau đây để 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 }

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

Vấn đề về Chromium: 1255073

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

Bảng Lighthouse hiện đ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 phải là duy nhất là một vấn đề thường gặp về khả năng hỗ trợ tiếp cận. Ví dụ: mã nhận dạng được tham chiếu trong một thuộc tính aria-labelledby được dùng trên nhiều phần tử.

Hãy xem bài viết Điểm 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.

​Một quy trình kiểm tra Lighthouse cho "Tất cả các phần tử có thể lấy tiêu điểm đều phải có một "id" riêng biệt", cho thấy 2 phần tử có cùng "id"

Vấn đề về Chromium: 772558

Bảng điều khiển Nguồn được cải tiến

Nhiều điểm cải thiệ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. Sau đây là một số điểm cải tiến đáng chú ý:

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

Vấn đề về Chromium: 1241848

Thông tin nổi bật khác

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

  • Hiển thị đúng sơ đồ thác nước của các yêu cầu mạng. Trước đây, kiểu này bị lỗi. (1275501)
  • Tính năng làm nổi bật mã bị lỗi khi tìm kiếm trong các tài liệu 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 (Tải trọng) 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ề sự thay đổi bố cục trong mục Tóm tắt của bảng Hiệu suất. (1259606)
  • Hỗ trợ các ký tự tuỳ ý (ví dụ: ,, .) trong các cụm từ tìm kiếm trên Mạng tìm kiếm. (1267196)

[Thử nghiệm] Điểm cuối trong ngăn Reporting API

Ngăn Reporting API 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 của mình và trạng thái của các báo cáo đó.

Hiện đã có mục Endpoints (Điểm cuối). Thao tác này cung cấp cho bạn 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 Reporting API để theo dõi các hành vi 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 Reporting API

Vấn đề về Chromium: 1200732

Tải các 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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.