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 điều khiển 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ề 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 của 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 tài sản CSS có độ dài. Các trải nghiệm này bị lỗi 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 soạn thư bổ sung về độ dài này sẽ không ảnh hưởng đến trải nghiệm chỉnh sửa chính dưới 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 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ác công cụ tạo chiều dài CSS trong ngăn Kiểu.

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

Cập nhật thẻ kết xuất

Mô phỏng tính năng đa phương tiện prefers-contrast của CSS

Mô phỏng tính năng đa phương tiện prefers-contrast của CSS

Tính năng nội dung đa phương tiện prefers-contrast được dùng để phát hiện xem người dùng có yêu cầu độ tương phản cao hơn hay thấp hơn trên trang hay không.

Mở Command Menu (Trình đơn lệnh), chạy lệnh Show Rendering (Hiển thị kết xuất) rồi đặt trình đơn thả xuống Emulate CSS media feature prefers-contrast (Mô phỏng tính năng đa phương tiện prefers-contrast 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 để 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ở Command Menu (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 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 phím tắt này rất hữu ích, đặc biệt là đối với các nhà phát triển đang làm việc với thư viện CSS-in-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 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.

Ví dụ: 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ẻ Trọng tải mới trong bảng điều khiển Mạng khi bạn kiểm tra một yêu cầu mạng có trọng tải. Trước đây, thông tin về tải trọng có trong thẻ Tiêu đề.

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

Vấn đề về 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) 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ể. Hiện đã xoá các nguyên mẫu và phương thức DOM.

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

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

Vấn đề về Chromium: 1226262

Nội dung cập nhật về Console

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 Console có thể giúp giảm tình trạng lộn xộn.

Trong Console (Bảng điều khiển), hãy nhấp vào biểu tượng Settings (Cài đặt) rồi bỏ đánh dấu hộp Show CORS errors in console (Hiện 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ề Chromium: 1251176

Xem trước và đánh giá các đối tượng Intl thích 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á nhanh trong Console. Trước đây, các đối tượng Intl không được đánh giá một cách nhanh chóng.

Đố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, Bảng điều khiển 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

Giữ lại thanh bên của Bảng điều khiển

Thanh bên của Console sẽ vẫn được giữ nguyên. Trong Chrome 94, chúng tôi đã thông báo về việc sắp ngừng sử dụng thanh bên của Console và yêu cầu nhà phát triển phản hồi và nêu mối lo ngại.

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òn dùng nữa trong Bảng điều khiển ứng dụng

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

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

Reporting API đượ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à nhiều thông tin khác.

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 phần Điểm cuối hiện vẫn đang trong quá trình phát triển (hiện không hiển thị điểm cuối báo cáo).

Tìm hiểu thêm về API Báo cáo trong 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 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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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 mới, bản cập nhật hoặc bất cứ điều gì 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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.