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 mới về CSS

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 thiệ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 của trang.

Bạn có thể xem chi tiết hơn. 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 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 Tổng quan về CSS là tính năng xem trước. Nhóm của chúng tôi vẫn đang tích cực tìm cách và 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 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ới Chromium: 1254557

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

Chúng tôi khôi phục trải nghiệm sao chép CSS và chỉnh sửa dưới dạng văn bản cho các tài sản 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ị qua trình đơn thả xuống. Tính năng tạo độ dài của tiện ích bổ sung này sẽ không ảnh hưởng đến nội dung chỉnh sửa chính ở dạng trải nghiệm văn bản.

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

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

Các sự cố với Chromium: 1259088, 1172993

Nội dung cập nhật về thẻ đang hiển thị

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

Tính năng nội dung nghe nhìn ưu tiên độ tương phản được dùng để xác định xem người dùng đã yêu cầu độ tương phản nhiều hơn hay ít hơ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 feature prefers- XML (Mô phỏng tính năng đa phương tiện ưu tiên độ tương phản).

Vấn đề với 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 bật Giao diện tối tự động của Chrome.

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 đó thiết lập trình đơn thả xuống Emulate auto tối 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ới 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 để bạn dễ dàng sao chép quy tắc CSS dưới dạng thuộc tính JavaScript. Các tuỳ chọn phím tắt này rất hữu ích, đặc biệt đối với những nhà phát triển đang làm việc với các thư viện CSS-in-JS.

Trong ngăn Kiểu, hãy nhấp chuột phải vào một 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 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ả các quy tắc.

Ví dụ: ví dụ dưới đây 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ới 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) mới 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 về tải trọng có trong thẻ Tiêu đề.

Thẻ Payload trong bảng điều khiển Mạng

Vấn đề với Chromium: 1214030

Cải thiện chế độ hiển thị thuộc tính trong ngăn Thuộc tính

Giờ đây, ngăn Properties (Thuộc tính) sẽ chỉ cho thấy các thuộc tính có liên quan thay vì hiển thị tất cả cá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ác tính năng nâng cao ngăn Tài sản trong Chrome 95 giờ đây giúp bạn dễ dàng tìm các tài sản có liên quan.

Hiển thị các thuộc tính trong ngăn Thuộc tính

Vấn đề với Chromium: 1226262

Thông tin cập nhật về bảng điều khiển

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

Bạn có thể ẩn các lỗi CORS trong Bảng điều khiển. 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 và bỏ chọn hộp đánh dấu Hiển thị lỗi CORS trong bảng điều khiển.

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

Vấn đề với Chromium: 1251176

Xem trước và đánh giá đúng các đối tượng `Intl` trong Bảng điều khiển

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

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

Vấn đề với Chromium: 1073804

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

Bảng điều khiển hiện 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 những gì 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ới Chromium: 1254259

Thanh bên Console sẽ tiếp tục hoạt động. Trong Chrome 94, chúng tôi đã thông báo về việc sắp ngừng sử dụng thanh bên Console và mời các nhà phát triển đưa ra ý 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 từ thông báo về việc ngừng sử dụng và sẽ nỗ lực cải thiện thanh bên thay vì xoá đi.

Thanh bên của Console

Các sự cố với Chromium: 1232937, 1255586

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

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

Vấn đề với Chromium: 1084190

[Thử nghiệm] Ngăn New Reporting API trong bảng điều khiển Application (Ứ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 dùng nữa, v.v.

Khi thử nghiệm này được bật, giờ đây bạ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 hiển thị điểm cuối báo cá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 Application (Ứng dụng)

Vấn đề với Chromium: 1205856

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.