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 nắm bắt 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 công nghệ hỗ trợ tiếp xúc với nội dung trên web của bạn.

Trong bảng điều khiển 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 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 nút đó để 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 sẽ được chọn ngay bây giờ. Đây là một cách hiệu quả để hiểu rõ 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 này. Cách này cũng áp dụng cho cây DOM ⬌ Chế độ xem dạng cây cho khả năng 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 và đối tượng cấp trên của nút đó.

Nhóm của chúng tôi vẫn đang tích cực phát triển 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ới Chromium: 887173

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

Những thay đổi về mã trong thẻ Changes được tự động in ra.

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

Thẻ Thay đổi

Các sự cố với Chromium: 1238818, 1268754 , 1086491

Đặt thời gian chờ dài 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 âm cho tất cả các bước hoặc một bước cụ thể. Điều này rấ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, quá trình tải các mục trong trình đơn bị chậm (mất 6 giây). Không phát lại được quy trình của người dùng này 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 mới về Thời gian chờ để khắc phục vấn đề này. Mở rộng bước 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ờ rồi đặt thành 6000 mili giây (bằng 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 phần Cài đặt phát lại rồi chỉnh sửa giá trị Thời gian chờ.

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

Vấn đề với Chromium: 1257499

Đảm bảo các trang của bạn có thể lưu được 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 (hay bfcache) là một tính năng tối ưu hoá cho trình duyệt, cho phép điều hướng tiến và lùi 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 rằng các trang đó được tối ưu hoá cho bfcache, đồng thời xác định mọi vấn đề có thể khiến các trang đó không đủ điều kiện.

Để kiểm tra một trang cụ thể, hãy chuyển đến trang đó trong Chrome, sau đó chuyển đến Ứng dụng > Bộ nhớ đệm cho thao tác tiến/lùi trong Công cụ cho nhà phát triển. Tiếp theo, 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 đi rồi quay 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, quan trọng là bạn phải biết cách tối ưu hoá các trang của mình cho bfcache 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ó 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ới 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 Thuộc tính, bạn hiện có thể nhập tên hoặc giá trị của thuộc tính đó trong hộp văn bản Bộ lọc mới.

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

Các tính năng nâng cao này cho phép bạn truy cập nhanh hơn vào các thuộc tính mà bạn quan tâm, nhờ đó nâng cao năng suất của bạn!

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

Vấn đề với 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 CSS buộc màu sắc đượ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), trong đó thực thi bảng màu 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 kết xuất), sau đó thiết lập trình đơn thả xuống Emulate CSS media device required-colors (Mô phỏng tính năng đa phương tiện 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ới Chromium: 1130859

Hiện thước kẻ trong lệnh di chuột

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

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

Hiện thước kẻ trong lệnh di chuột

Vấn đề với 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ới 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 Network (Mạng) rồi nhấn phím 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ới Chromium: 1050021

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

Phím 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ột thời điểm.

Mở thẻ tìm kiếm qua trình đơn Esc > 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 các kết quả tìm kiếm. Tập trung vào các 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ới Chromium: 1255073

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

Bảng điều khiển 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ã phần tử không phải là duy nhất là một vấn đề thường gặp về khả năng 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ề những nội dung cập nhật này.

Một bài kiểm tra 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, cho thấy hai phần tử và cả hai phần tử đều có cùng một "id"

Vấn đề với Chromium: 772558

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

Tải 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 này để sử dụng CodeMirror 6. Dưới đây là một số điểm cải thiệ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 tính năng đề 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ới Chromium: 1241848

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

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

Hiển thị đúng biểu đồ 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)
Phần đánh dấu mã bị lỗi khi tìm kiếm trong 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ẻ Tải trọng trùng lặp trong yêu cầu mạng nữa. (1273972)
Sửa thông tin chi tiết về việc thay đổi bố cục bị thiếu 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 cụm từ tìm kiếm Mạng Tìm kiếm. (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 báo cáo được tạo trên trang của mình cũng như trạng thái của các báo cáo đó.

Hiện đã có mục Điểm cuối. Hướng dẫn 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 về 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ới 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.