Trang này được dịch bởi Cloud Translation API.

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

Jecelyn Yeen

Cây hỗ trợ tiếp cận toàn trang mới giúp bạn dễ dàng tìm hiểu thông tin tổng quan về cây hỗ trợ tiếp cận toàn trang, đồng thời giúp bạn hiểu rõ hơn về cách công nghệ hỗ trợ tiếp cận nội dung trên web của bạ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 đó, 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 đó để 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 rất hiệu quả để hiểu về việc ánh xạ giữa nút DOM và nút cây hỗ trợ tiếp cận của nút này. Điều này cũng áp dụng cho cây DOM ⬌ Chế độ xem dạng 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. Khung hiển thị bị giới hạn, chỉ cho phép bạn khám phá một nút duy nhất và các đối tượng cấp trên của nút đó.

Nhóm chúng tôi vẫn đang nỗ lực xây dựng tính năng xem trước này. Chúng tôi 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) được in tự động.

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ờ dài hơn cho bản ghi 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 Máy ghi âm 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 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 này bằng cách Thêm thời gian chờ và đặt thành 6000 mili giây (bằng 6 giây).

Nếu muốn, 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. Mở rộng phần Cài đặt phát lại rồi chỉnh sửa giá trị Thời gian chờ.

chế độ cài đặt thời gian chờ cho bản ghi 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 thông qua thẻ bộ nhớ đệm cho thao tác tiến/lùi

Bộ nhớ đệm cho thao tác tiến/lùi (hay bfcache) là một tính năng tối ưu hoá trình duyệt cho phép tiến và lùi ngay tức thì.

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.

Để thử nghiệm một trang cụ thể, hãy chuyển đến trang đó trong Chrome, sau đó trong Công cụ cho nhà phát triển, hãy chuyển đến Ứng dụng > Bộ nhớ đệm cho thao tác tiến/lùi. 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. 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 mới của ngăn Tài sản

Nếu muốn tập trung vào một tài sản cụ thể trong ngăn Tài sản, thì giờ đây, bạn có thể nhập tên hoặc giá trị của tài sản đó vào hộp văn bản Bộ 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 cải tiến này cho phép bạn truy cập các thuộc tính bạn quan tâm nhanh hơn và nhờ đó 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 bị giới hạn do người dùng chọn trên trang.

Mở 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 Mô phỏng tính năng đa phương tiện 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

Hiện thước kẻ bằng lệnh di chuột

Bây giờ, bạn có thể mở Trình đơn lệnh và 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 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ị thước kẻ.

Hiện thước kẻ bằng lệnh 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 hộp linh hoạt

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 để bạn có thể mở rộng và thu gọn tất cả kết quả tìm kiếm. Trước đây, mỗi lần 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.

Mở thẻ tìm kiếm qua 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) và 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 để mở rộng/thu gọn 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ột mã.

Mã phần tử không phải là duy nhất là một vấn đề phổ biến về khả năng 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 về những nội dung 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

Bảng điều khiển Nguồn được cải thiện

Tải các đ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. Dưới đâ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 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 trích, ghi đè cục bộ)

Vấn đề về Chromium: 1241848

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

Dưới đây là một số nội dung 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ị hỏng. (1275501)
Tính năng đánh dấu mã bị lỗi khi tìm kiếm trong các tài liệu có dòng quá dài trong bảng điều khiển Sources (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 việc thiếu thông tin về việc thay đổi 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ác truy vấn Tìm kiếm mạng. (1267196)

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

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

Hiện đã có mục Điểm cuối. Tài liệu này cung cấp cho bạn thông tin tổng quan về tất 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, các lệnh gọi API không dùng nữa, v.v.

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 việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
Báo cáo sự cố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.