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

Jecelyn Yeen

Các cụm từ tìm kiếm 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 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 tương tự như truy vấn nội dung đa phương tiện với @media. Tuy nhiên, thay vì truy vấn thông tin về khung nhìn và tác nhân người dùng, @container sẽ truy vấn vùng chứa gốc khớp với một số tiêu chí nhất định.

Trong bảng điều khiển Elements (Phần tử), hãy nhấp vào một phần tử DOM có quy tắc at-rule @container, giờ đây, DevTools sẽ hiển thị thông tin @container trong ngăn Styles (Kiểu). Nhấp vào hình ảnh đó để chỉnh sửa kích thước. Ngăn Kiểu cũng hiển thị thông tin tương ứng về vùng chứa. Di chuột qua phần tử này để 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 phần tử đó để 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 thử.

Các cụm từ tìm kiếm vùng chứa CSS có thể chỉnh sửa trong ngăn Kiểu

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à một định dạng tệp để đóng gói một hoặc nhiều tài nguyên HTTP trong 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 thử.

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

Vấn đề về Chromium: 1182537

Gỡ lỗi Attribution Reporting API

Giờ đây, các lỗi 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 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.

Lỗi Attribution Reporting API trong thẻ Vấn đề

Vấn đề về Chromium: 1190735

Xử lý chuỗi hiệu quả hơn trong Console

Trình đơn theo bối cảnh mới trong Console (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.

Trình đơn theo bối cảnh mới trong Console

Trong Chrome 90, DevTools đã cập nhật Bảng điều khiển để luôn định dạng đầu ra chuỗi dưới dạng giá trị cố định JSON hợp lệ. Chúng tôi nhận được ý kiến 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ố người cảm thấy lượng ký tự thoát quá nhiều và khiến kết quả không đọc được.

Console hiện định dạng đầu ra chuỗi dưới dạng giá trị cố định JavaScript hợp lệ, đồng thời cung cấp cho bạn 3 tuỳ 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à gói chuỗi trong dấu ngoặc đơn, dấu ngoặc kép hoặc dấu ngã 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 nội dung chuỗi thô (bao gồm cả dòng mới và các ký tự đặc biệt khác) nguyên văn vào bảng nhớ tạm. Cuối cùng, Sao chép ở dạng ký hiệu JSON sẽ định dạng chuỗi dưới dạng ký hiệu 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

Các lỗi TypeError liên quan đến CORS trong Console 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à nhận các giải pháp tiềm năng trong thẻ Vấn đề.

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

Vấn đề về 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 Xem bản đồ cây để xem thông tin chi tiết về JavaScript đã phân phối, 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 (Xem bộ lọc Hiển thị các quy trình 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 với việc cải thiện chỉ số đó.

Danh mục hiệu suất đã có một số thay đổi về điểm số để 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 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ề Chromium: 772558

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

Ngăn Tệp kê khai hiện hiển thị URL ghi chú mới.

Hiện tại trên ChromeOS (CrOS), bạn có thể chọn Ứng dụng Chrome và Ứng dụng Android khai báo chức năng "ghi chú mới" làm ứng dụng ghi chú trong phần cài đặt Bút cảm ứng (xuất hiện 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 đó từ nút "Tạo ghi chú" của bảng chế độ bút cảm ứng. Việc thêm trường new-note-url trong 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.

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

Vấn đề về Chromium: 1185678

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

DevTools đã 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 gần đây nhất.

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

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

Bộ chọn khớp CSS

Vấn đề về Chromium: 1219153

In đẹp phản hồi JSON trong bảng điều khiển Mạng

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

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

In đẹp phản hồi JSON trong bảng điều khiển Mạng

Lỗi Chromium: 998674

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

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