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 96)

Jecelyn Yeen

Tính năng xem trước: Bảng điều khiển Tổng quan về CSS mới

Sử dụng bảng điều khiển Tổng quan về CSS mới để xác định những điểm cải tiến tiềm năng về CSS trên trang của bạn. Mở bảng Tổng quan về CSS, sau đó nhấp vào Ghi lại thông tin tổng quan để tạo báo cáo về CSS cho trang của bạn.

Bạn có thể xem chi tiết hơn về thông tin đó. Ví dụ: nhấp vào một màu trong phần Màu để xem danh sách các phần tử áp dụng cùng một màu. Nhấp vào một phần tử để mở phần tử đó trong bảng điều khiển Phần tử.

Bảng điều khiển Tổng quan về CSS là một tính năng xem trước. Nhóm chúng tôi vẫn đang nỗ lực tìm cách cải thiện tính năng này và mong nhận được ý kiến phản hồi của bạn để cải thiện hơn nữa.

Hãy đọc bài viết này để tìm hiểu thêm về bảng Tổng quan về CSS.

Bảng điều khiển Tổng quan về CSS

Vấn đề về Chromium: 1254557

Trải nghiệm sao chép và chỉnh sửa độ dài CSS đã được khôi phục và cải thiện

Trải nghiệm sao chép CSS và chỉnh sửa dưới dạng văn bản được khôi phục cho các thuộc tính CSS có độ dài. Những trải nghiệm này đã bị hỏng trong bản phát hành gần đây nhất.

Ngoài ra, bạn có thể kéo để điều chỉnh giá trị đơn vị và cập nhật loại đơn vị thông qua trình đơn thả xuống. Tính năng ghi nhận độ dài tiện ích bổ sung này sẽ không ảnh hưởng đến trải nghiệm chỉnh sửa chính ở dạng văn bản.

Vui lòng báo cáo qua goo.gle/length-feedback nếu bạn phát hiện thấy vấn đề.

Bạn có thể tắt tính năng này qua hộp đánh dấu Cài đặt > Thử nghiệm > Bật công cụ ghi nhận thời lượng CSS trong ngăn Kiểu.

Vấn đề về Chromium: 1259088, 1172993

Nội dung cập nhật về thẻ kết xuất

Mô phỏng tính năng nội dung nghe nhìn ưu tiên độ tương phản của CSS

Tính năng nội dung nghe nhìn ưu tiên độ tương phản dùng để phát hiện xem người dùng đã yêu cầu độ tương phản nhiều hơn hay ít hơn trong 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 Emulate CSS Media feature prefers-Compatibility (Hiện tính năng kết xuất cho tính năng đa phương tiện của CSS).

Vấn đề về Chromium: 1139777

Mô phỏng tính năng Giao diện tối tự động của Chrome

Sử dụng Công cụ cho nhà phát triển để mô phỏng giao diện tối tự động nhằm dễ dàng xem giao diện của trang khi Giao diện tối tự động của Chrome được bật.

Chrome 96 ra mắt Bản dùng thử theo nguyên gốc cho Giao diện tối tự động trên Android. Với tính năng này, trình duyệt sẽ áp dụng giao diện tối được tạo tự động cho các trang web có giao diện sáng khi người dùng đã chọn sử dụng giao diện tối trong Hệ điều hành.

Mở Trình đơn lệnh, chạy lệnh Show Rendering (Hiện kết xuất), sau đó đặt trình đơn thả xuống Emulate auto dark mode (Mô phỏng chế độ tối tự động).

Mô phỏng tính năng Giao diện tối tự động của Chrome

Vấn đề về Chromium: 1243309

Sao chép nội dung khai báo dưới dạng JavaScript trong ngăn Kiểu

Hai lựa chọn mới được thêm vào trình đơn theo bối cảnh để giúp bạn dễ dàng sao chép các quy tắc CSS dưới dạng thuộc tính JavaScript. Các tuỳ chọn lối tắt này rất hữu ích, đặc biệt đối với các nhà phát triển đang làm việc với các thư viện CSS trong JS.

Trong ngăn Kiểu, hãy nhấp chuột phải vào quy tắc CSS. Bạn có thể chọn Sao chép nội dung khai báo dưới dạng JS để sao chép một quy tắc duy nhất hoặc Sao chép tất cả nội dung khai báo dưới dạng JS để sao chép tất cả quy tắc.

Chẳng hạn, ví dụ bên dưới sẽ sao chép paddingLeft: '1.5rem' vào bảng nhớ tạm.

Sao chép nội dung khai báo dưới dạng JavaScript

Vấn đề về Chromium: 1253635

Thẻ Tải trọng mới trong bảng điều khiển Mạng

Sử dụng thẻ Payload (Tải trọng) trong bảng điều khiển Network (Mạng) khi bạn kiểm tra một yêu cầu mạng có tải trọng. Trước đây, thông tin tải trọng có sẵn trong thẻ Tiêu đề.

Thẻ Tải trọng trong bảng điều khiển Mạng

Vấn đề về Chromium: 1214030

Cải thiện khả năng hiển thị các thuộc tính trong ngăn Properties (Thuộc tính)

Giờ đây, ngăn Properties (Thuộc tính) chỉ cho thấy các thuộc tính có liên quan thay vì tất cả thuộc tính của thực thể. Các nguyên mẫu và phương thức DOM hiện đã bị xoá.

Cùng với các tính năng nâng cao ngăn Tài sản trong Chrome 95, giờ đây, bạn có thể dễ dàng xác định vị trí của các thuộc tính có liên quan.

Cách hiển thị các cơ sở lưu trú trong ngăn Thuộc tính

Vấn đề về Chromium: 1226262

Bản cập nhật bảng điều khiển

Tuỳ chọn ẩn lỗi CORS trong Console (Bảng điều khiển)

Bạn có thể ẩn lỗi CORS trong Console. Vì lỗi CORS hiện được báo cáo trong thẻ Vấn đề, nên việc ẩn lỗi CORS trong Bảng điều khiển có thể giúp giảm tình trạng lộn xộn.

Trong Bảng điều khiển, hãy nhấp vào biểu tượng Cài đặt rồi bỏ chọn hộp đánh dấu Hiện lỗi CORS trong bảng điều khiển.

Tuỳ chọn ẩn lỗi CORS trong Console (Bảng điều khiển)

Vấn đề về Chromium: 1251176

Xem trước và đánh giá đối tượng `Intl` phù hợp trong Console

Các đối tượng Intl hiện đã có bản xem trước thích hợp và được đánh giá nghiêm ngặt trong Console. Trước đây, các đối tượng Intl không được đánh giá nghiêm ngặt.

Đối tượng quốc tế trong Bảng điều khiển

Vấn đề về Chromium: 1073804

Dấu vết ngăn xếp không đồng bộ nhất quán

Giờ đây, Console sẽ báo cáo dấu vết ngăn xếp async cho các hàm async để nhất quán với các tác vụ không đồng bộ khác và nhất quán với nội dung hiển thị trong Ngăn xếp lệnh gọi.

dấu vết ngăn xếp không đồng bộ

Vấn đề về Chromium: 1254259

Thanh bên trong Console (Bảng điều khiển) sẽ vẫn giữ nguyên. Trong Chrome 94, chúng tôi đã thông báo về việc sắp ngừng hỗ trợ thanh bên của Bảng điều khiển và đề nghị nhà phát triển gửi ý kiến phản hồi cũng như thắc mắc.

Hiện tại, chúng tôi đã nhận được đủ ý kiến phản hồi về thông báo ngừng sử dụng và sẽ nỗ lực cải thiện thanh bên thay vì loại bỏ thanh bên.

Thanh bên của bảng điều khiển

Vấn đề về Chromium: 1232937, 1255586

Ngăn bộ nhớ đệm của ứng dụng không được dùng nữa trong bảng điều khiển Application

Ngăn Bộ nhớ đệm của ứng dụng trong bảng điều khiển Ứng dụng hiện đã bị xoá vì tính năng hỗ trợ AppCache bị xoá khỏi Chrome và các trình duyệt dựa trên Chromium khác.

Vấn đề về Chromium: 1084190

[Thử nghiệm] Ngăn API báo cáo mới trong bảng điều khiển Ứng dụng

API Báo cáo được thiết kế để giúp bạn theo dõi các lỗi vi phạm bảo mật trên trang, các lệnh gọi API không còn được dùng nữa, v.v.

Khi bật thử nghiệm này, bạn hiện có thể xem trạng thái báo cáo trong ngăn API báo cáo mới trong bảng điều khiển Ứng dụng.

Xin lưu ý rằng mục Điểm cuối hiện vẫn đang trong quá trình phát triển (hiện chưa có điểm cuối báo cáo nào).

Tìm hiểu thêm về API Báo cáo qua bài viết này.

Ngăn API báo cáo trong bảng điều khiển Ứng dụng

Vấn đề về Chromium: 1205856

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.