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 thiệ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 trên trang của bạn.

Bạn có thể xem thông tin chi tiết hơn. Ví dụ: nhấp vào một màu trong phần Màu sắc để 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 tích cực nghiên cứu tính năng này 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.

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

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

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ị 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 tạo độ dài của tiện ích bổ sung này sẽ không ảnh hưởng đến trải nghiệm chỉnh sửa văn bản chính.

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 thông qua hộp đánh dấu Cài đặt > Thử nghiệm > Bật công cụ tạo độ dài CSS trong ngăn Kiểu.

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

Đang 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 đ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 hoặc giảm độ tương phản trên trang hay không.

Mở Trình đơn lệnh, chạy lệnh Hiện quá trình kết xuất, rồi đặt trình đơn thả xuống 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 chế độ tối tự động nhằm dễ dàng xem trang của bạn trông như thế nào khi bạn bật Chế độ tối tự động của Chrome.

Chrome 96 giới thiệu 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 kết xuất), rồi đặ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 để 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 lựa chọn lối tắt này rất hữu ích, đặc biệt là đố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 thuộc tính 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 thuộc tính 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ẻ 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 tải trọng có 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 cách hiển thị các thuộc tính trong ngăn Thuộc tính

Giờ đây, ngăn Properties (Thuộc tính) chỉ hiển thị 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 phiên bản. Giờ đây, các phương thức và nguyên mẫu DOM đã bị xoá.

Cùng với các điểm cải tiến trong ngăn Thuộc tính của 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.

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

Vấn đề về Chromium: 1226262

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

Lựa chọn ẩn lỗi CORS trong Bảng điều khiển

Bạn có thể ẩn lỗi CORS trong Bảng điều khiển. Vì các lỗi CORS hiện được báo cáo trong thẻ Vấn đề, nên việc ẩn các 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ỏ đánh dấu hộp Hiện lỗi CORS trong bảng điều khiển.

Lựa chọn ẩn lỗi CORS trong Bảng điều khiển

Vấn đề về 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á ngay trong Bảng điều khiển. Trước đây, các đối tượng Intl không được đánh giá một cách háo hức.

Các đối tượng Intl 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 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ì xuất hiện 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 bảng điều khiển sẽ vẫn xuất hiệ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 Bảng điều khiển và yêu cầu nhà phát triển gửi ý kiến phản hồi cũng như mối lo ngại.

Chúng tôi đã nhận được đủ ý kiến phản hồi về thông báo ngừng hoạt động và sẽ nỗ lực cải thiện thanh bên thay vì xoá thanh bên.

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

Các 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á vì Chrome và các trình duyệt khác dựa trên Chromium không còn hỗ trợ AppCache nữa.

Vấn đề về Chromium: 1084190

[Thử nghiệm] Ngăn Reporting API mới trong bảng điều khiển Application

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ủa mình, các lệnh gọi API không dùng nữa và nhiều lỗi khác.

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

Xin lưu ý rằng phần Endpoints (Đ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 nào).

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

Ngăn Reporting API trong bảng điều khiển Application (Ứ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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật hoặc bất kỳ nội dung nào 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 mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.