Tính năng mới trong Công cụ cho nhà phát triển (Chrome 93)

Jecelyn Yeen

Truy vấn vùng chứa CSS có thể chỉnh sửa trong ngăn Kiểu

Giờ đây, bạn có thể xem và chỉnh sửa truy vấn vùng chứa CSS trong ngăn Kiểu.

Truy vấn vùng chứa mang đến một phương pháp linh hoạt hơn nhiều để thiết kế thích ứng. Quy tắc theo @container hoạt động theo cách tương tự như truy vấn đa phương tiện bằng @media. Tuy nhiên, thay vì truy vấn khung nhìn và tác nhân người dùng để biết thông tin, @container sẽ truy vấn vùng chứa đối tượng cấp trên khớp với một số tiêu chí nhất định.

Trong bảng điều khiển Phần tử, nhấp vào phần tử DOM có quy tắc @container, Công cụ cho nhà phát triển giờ đây hiển thị thông tin @container trong ngăn Kiểu. Hãy nhấp vào đó để chỉnh sửa kích thước. Ngăn Styles cũng hiện thông tin tương ứng về vùng chứa. Hãy di chuột lên đó để làm nổi bật phần tử vùng chứa trên trang và kiểm tra kích thước vùng chứa. Nhấp vào đó để chọn phần tử vùng chứa.

Tính năng truy vấn vùng chứa hiện đang thử nghiệm. Vui lòng bật cờ #enable-container-queries trong chrome://flags để kiểm tra mã.

Vấn đề về Chromium: 1146422

Bản xem trước gói web trong bảng điều khiển Mạng

Gói web là định dạng tệp để đóng gói một hoặc nhiều tài nguyên HTTP vào một tệp duy nhất. Giờ đây, bạn có thể xem trước nội dung gói web trong bảng điều khiển Mạng.

Tính năng gói web hiện đang trong giai đoạn thử nghiệm. Vui lòng bật cờ #enable-experimental-web-platform-features trong chrome://flags để kiểm tra hàm này.

Vấn đề về Chromium: 1182537

Gỡ lỗi Attribution Reporting API

Giờ đây, các lỗi của Attribution Reporting API sẽ được báo cáo trong thẻ Vấn đề.

Báo cáo phân bổ là một API mới giúp bạn đo lường thời điểm một hành động của người dùng (chẳng hạn như lượt nhấp hoặc lượt xem quảng cáo) dẫn đến một lượt chuyển đổi mà không sử dụng giá trị nhận dạng trên nhiều trang web.

Vấn đề về Chromium: 1190735

Xử lý chuỗi tốt hơn trong Console

Trình đơn theo bối cảnh mới trong Bảng điều khiển cho phép bạn sao chép bất kỳ chuỗi nào dưới dạng nội dung, giá trị cố định JavaScript hoặc giá trị cố định JSON.

Trong Chrome 90, Công cụ cho nhà phát triển đã cập nhật Bảng điều khiển để luôn kết quả chuỗi định dạng dưới dạng giá trị cố định JSON hợp lệ. Chúng tôi nhận được phản hồi của các nhà phát triển rằng thay đổi này có thể gây nhầm lẫn, một số nhà phát triển cảm thấy rằng số lượng mã thoát quá lớn và khiến kết quả không đọc được.

Bảng điều khiển hiện định dạng dữ liệu đầu ra của chuỗi dưới dạng các giá trị cố định JavaScript hợp lệ và hơn nữa còn cung cấp cho bạn 3 lựa chọn về việc sao chép chuỗi. Tuỳ chọn Sao chép dưới dạng chữ JavaScript sẽ thoát các ký tự đặc biệt thích hợp và đặt chuỗi trong dấu ngoặc đơn, dấu ngoặc kép hoặc dấu phẩy ngược tuỳ thuộc vào nội dung chuỗi. Thay vào đó, Sao chép nội dung chuỗi sẽ sao chép nguyên văn nội dung chuỗi thô (bao gồm cả các dòng mới và các ký tự đặc biệt khác) vào bảng nhớ tạm. Cuối cùng, Sao chép dưới dạng giá trị cố định JSON sẽ định dạng chuỗi thành một giá trị cố định JSON hợp lệ và sao chép chuỗi đó vào bảng nhớ tạm.

Vấn đề về Chromium: 1208389

Cải thiện tính năng gỡ lỗi CORS

TypeErrors liên quan đến CORS trong Bảng điều khiển hiện được liên kết với bảng điều khiển Mạng và thẻ Vấn đề.

Nhấp vào hai biểu tượng mới bên cạnh thông báo lỗi liên quan đến CORS để xem yêu cầu mạng hoặc tìm hiểu thêm về thông báo lỗi và xem các giải pháp tiềm năng trong thẻ Vấn đề.

Vấn đề về Chromium: 1213393

Lighthouse 8.1

Bảng điều khiển Lighthouse đang chạy Lighthouse 8.1.

Nếu trang web của bạn hiển thị bản đồ nguồn cho Lighthouse, hãy tìm nút Xem bản đồ dạng cây để xem bảng chi tiết về JavaScript đã gửi. Bạn có thể lọc theo kích thước và mức độ phù hợp khi tải.

Báo cáo này cũng bao gồm một bộ lọc chỉ số mới (Tham khảo bộ lọc Hiển thị kết quả kiểm tra liên quan đến trong ảnh chụp màn hình). Chọn một chỉ số để tập trung vào các cơ hội và thông tin chẩn đoán phù hợp nhất nhằm chỉ cải thiện chỉ số đó.

Danh mục hiệu suất đã có một số thay đổi về cách chấm điểm để phù hợp với các công cụ hiệu suất khác và để phản ánh chính xác hơn về trạng thái web.

Hãy xem ghi chú phát hành để biết danh sách đầy đủ các thay đổi.

Vấn đề về Chromium: 772558

Hiển thị URL ghi chú mới trong ngăn Tệp kê khai

Giờ đây, ngăn Tệp kê khai hiển thị URL ghi chú mới.

Hiện sử dụng ChromeOS (CrOS), Ứng dụng Chrome và Ứng dụng Android khai báo "ghi chú mới" chức năng có thể được chọn làm ứng dụng ghi chú trong cài đặt Bút cảm ứng (hiển thị nếu thiết bị CrOS đã được sử dụng với bút cảm ứng). Khi được chọn làm ứng dụng ghi chú, bạn có thể chạy ứng dụng đó qua mục "Tạo ghi chú" trong bảng bút cảm ứng . Việc thêm trường new-note-url vào tệp kê khai ứng dụng là một phần trong nỗ lực thêm chức năng tương đương vào ứng dụng web.

Vấn đề về Chromium: 1185678

Sửa bộ chọn so khớp CSS

Công cụ cho nhà phát triển đã khắc phục các bộ chọn so khớp CSS, bộ chọn này không hoạt động trong bản phát hành trước.

Các bộ chọn được phân tách bằng dấu phẩy trong ngăn Kiểu được tô màu khác nhau tuỳ thuộc vào việc chúng có khớp với nút DOM đã chọn hay không:

• Phần không khớp sẽ hiển thị bằng màu xám nhạt.
• Phần bộ chọn phù hợp được hiển thị bằng màu đen.

Vấn đề về Chromium: 1219153

Tạo phản hồi JSON đẹp mắt trong bảng điều khiển Mạng

Giờ đây, bạn có thể in phản hồi JSON trong bảng điều khiển Network (Mạng).

Mở phản hồi JSON trong bảng điều khiển Network (Mạng), nhấp vào biểu tượng {} để tạo bản in đẹp.

Lỗi Chromium: 998674

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ố 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.

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.