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

Jecelyn Yeen

Các 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 Styles (Kiểu).

Truy vấn vùng chứa cung cấp một phương pháp linh hoạt hơn nhiều cho thiết kế thích ứng. Quy tắc tại @container hoạt động theo cách tương tự như truy vấn nội dung nghe nhìn với @media. Tuy nhiên, thay vì truy vấn khung nhìn và tác nhân người dùng để tìm 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 Phần tử, hãy nhấp vào một phần tử DOM có quy tắc là @container, Công cụ cho nhà phát triển hiện hiển thị thông tin @container trong ngăn Kiểu. Nhấp vào đó để chỉnh sửa kích thước. Ngăn Kiểu cũng hiển thị thông tin vùng chứa tương ứng. Di chuột lên phần tử đó để đánh dấu 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 trong giai đoạn thử nghiệm. Vui lòng bật cờ #enable-container-queries trong chrome://flags để kiểm tra cờ này.

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

Vấn đề với Chromium: 1146422

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

Gói web là một đị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 việc đó.

bản xem trước gói web

Vấn đề với Chromium: 1182537

Gỡ lỗi Attribution Reporting API

Giờ đây, các lỗi về API Báo cáo phân bổ 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 vào quảng cáo hoặc lượt xem) dẫn đến một lượt chuyển đổi mà không cần sử dụng giá trị nhận dạng trên nhiều trang web.

Các lỗi về Attribution Reporting API trong thẻ Vấn đề

Vấn đề với Chromium: 1190735

Xử lý chuỗi hiệu quả hơn trong Bảng điều khiển

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 định dạng kết quả đầu ra của chuỗi dưới dạng giá trị cố định JSON hợp lệ. Chúng tôi đã nhận được phản hồi từ các nhà phát triển rằng thay đổi này có thể gây nhầm lẫn, một số người cảm thấy rằng số lần thoát là quá nhiều và khiến kết quả không đọc được.

Bảng điều khiển hiện định dạng đầu ra chuỗi dưới dạng giá trị cố định JavaScript hợp lệ và hơn nữa cung cấp cho bạn 3 lựa chọn sao chép chuỗi. Tuỳ chọn Sao chép dưới dạng giá trị cố định JavaScript sẽ thoát các ký tự đặc biệt thích hợp và đưa chuỗi vào 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 đó, thao tác 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, tính năng Sao chép dưới dạng giá trị cố định JSON sẽ định dạng chuỗi dưới dạng giá trị cố định JSON hợp lệ và sao chép chuỗi đó vào bảng nhớ tạm.

Vấn đề với 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 đề.

Hãy 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 đề.

Các biểu tượng bên cạnh thông báo lỗi liên quan đến CORS

Vấn đề với Chromium: 1213393

Lighthouse 8.1

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

Ngọn hải đăng

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

Báo cáo này cũng bao gồm một bộ lọc chỉ số mới (Hãy tham khảo bộ lọc Hiển thị các lượt kiểm tra có 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 để chỉ cải thiện chỉ số đó.

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

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

Vấn đề với Chromium: 772558

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

Ngăn Tệp kê khai giờ đây hiển thị URL của ghi chú mới.

Hiện có trên ChromeOS (CrOS), những Ứng dụng Chrome và Ứng dụng Android khai báo tính năng "ghi chú mới" có thể được chọn làm ứng dụng ghi chú trong phần cài đặt bút cảm ứng (sẽ xuất hiện nếu thiết bị CrOS đã được 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 này bằng nút "Tạo ghi chú" trên 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 các ứng dụng web.

URL của ghi chú mới trong ngăn Tệp kê khai

Vấn đề với Chromium: 1185678

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

Công cụ cho nhà phát triển đã khắc phụ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 gần đây nhất.

Các bộ chọn được phân tách bằng dấu phẩy trong ngăn Styles (Kiểu) có 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:

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

Bộ chọn so khớp CSS

Vấn đề với Chromium: 1219153

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

Giờ đây, bạn có thể in phản hồi JSON một cách đẹp mắt 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), rồi nhấp vào biểu tượng {} để tạo bản in đẹp.

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

Lỗi Chromium: 998674

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.