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 Kiểu.

Truy vấn vùng chứa mang đến một phương pháp linh hoạt hơn nhiều cho thiết kế thích ứng. Quy tắc @container hoạt động 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 hiển thị và tác nhân người dùng để lấy thông tin, @container sẽ truy vấn vùng chứa gốc đáp ứng một số tiêu chí nhất định.

Trong bảng điều khiển Phần tử, hãy nhấp vào một phần tử DOM có quy tắc @ @container. Giờ đây, Công cụ cho nhà phát triển sẽ 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ử đó để 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 trong giai đoạn thử nghiệm. Vui lòng bật cờ #enable-container-queries trong chrome://flags để kiểm thử.

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

Vấn đề về Chromium: 1146422

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

Web bundle 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ử.

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 đề.

Attribution Reporting 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 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 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 mọi chuỗi dưới dạng nội dung, ký hiệu JavaScript hoặc ký hiệu JSON.

Trình đơn theo bối cảnh mới trong Bảng điều khiển

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

Giờ đây, Bảng điều khiển sẽ định dạng các đầu ra chuỗi dưới dạng các chữ số JavaScript hợp lệ, đồng thời cung cấp cho bạn 3 lựa chọn sao chép chuỗi. Lựa chọn Sao chép dưới dạng ký tự 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 nhá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ả 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ạ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 quy trình gỡ lỗi CORS

Các TypeError 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 có thể có 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 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 biểu đồ dạng cây để xem thông tin chi tiết về JavaScript đã gửi, 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 có một bộ lọc chỉ số mới (Tham khảo bộ lọc Hiện các thông tin 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 những cơ hội và thông tin chẩn đoán phù hợp nhất để 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 Manifest

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

Hiện tại, trên ChromeOS (CrOS), các ứng dụng Chrome và ứng dụng Android khai báo khả 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 (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ú, ứng dụng có thể được khởi chạy từ nút "Tạo ghi chú" trên bảng điều khiển 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 cho các ứng dụng web.

URL ghi chú mới trong ngăn Manifest

Vấn đề về Chromium: 1185678

Đã sửa các bộ chọn khớp CSS

DevTools đã sửa các bộ chọn CSS trùng khớp, tính năng 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 sắc 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ẽ có màu xám nhạt.
  • Phần bộ chọn trùng khớp sẽ có màu đen.

Bộ chọn CSS khớp

Vấn đề về Chromium: 1219153

In phản hồi JSON theo cách dễ đọc trong bảng điều khiển Mạng

Giờ đây, bạn có thể in phản hồi JSON theo định dạng dễ đọc trong bảng điều khiển 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 phản hồi đó một cách rõ ràng.

In phản hồi JSON theo cách dễ đọc 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 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.