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

Sofia Emelianova
Sofia Emelianova

Cải thiện phần @property trong phần tử > Kiểu

Quy tắc @property có thể chỉnh sửa

Giờ đây, bạn có thể chỉnh sửa quy tắc at-rule CSS @property trong phần tương ứng của ngăn Elements (Thành phần) > Styles (Kiểu).

Trước và sau khi bạn đặt chế độ có thể chỉnh sửa cho quy tắc tài sản.

Vấn đề về Chromium: 1471123.

Báo cáo các vấn đề về quy tắc @property không hợp lệ

Thẻ Vấn đề hiện báo cáo các vấn đề về nội dung khai báo không hợp lệ trong quy tắc @property.

Vấn đề về quy tắc cơ sở lưu trú được báo cáo trong thẻ Vấn đề.

Vấn đề về Chromium: 1473283.

Cập nhật danh sách thiết bị để mô phỏng

Chuỗi tác nhân người dùng trong Cài đặt. Cài đặt > Thiết bị đã được cập nhật để phản ánh mức sử dụng trung bình của trình duyệt và hệ điều hành. Giờ đây, bạn có thể mô phỏng nhiều thiết bị mới nhất hơn ở chế độ thiết bị.

Trước và sau khi cập nhật danh sách thiết bị.

Vấn đề về Chromium: 1479733.

In đẹp JSON cùng dòng trong thẻ tập lệnh trong phần Nguồn

Bảng điều khiển Nguồn hiện hỗ trợ in JSON cùng dòng trong thẻ HTML <script> để gỡ lỗi dễ dàng hơn.

Trước và sau khi in JSON cùng dòng đẹp trong thẻ tập lệnh.

Vấn đề về Chromium: 406900, 1473875.

Tự động hoàn thành các trường riêng tư trong Console

Giờ đây, bạn có thể tự động hoàn thành các trường lớp riêng tư khi đánh giá các trường đó bên ngoài phạm vi lớp trong Console.

Trước và sau khi hỗ trợ tính năng tự động hoàn thành cho trường lớp riêng tư nằm ngoài phạm vi lớp.

Vấn đề về Chromium: 1483848, 1381806.

Lighthouse 11.1.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 11.1.0. Xem danh sách đầy đủ các thay đổi.

Để tìm hiểu kiến thức cơ bản về cách sử dụng bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

Cải tiến khả năng hỗ trợ tiếp cận

Giờ đây, trình đọc màn hình sẽ đọc to nội dung sau:

  • Cảnh báo và lỗi trong Bảng điều khiển.
  • Văn bản trong hộp thoại Do you trust this code? (Bạn có tin tưởng mã này không?) khi dán mã vào Console (Bảng điều khiển) hoặc Sources (Nguồn).

Ngoài ra, bảng điều khiển Application (Ứng dụng) đã khắc phục các vấn đề về độ tương phản với các đường liên kết ở chế độ tương phản cao.

Vấn đề về Chromium: 1485257, 1486643, 1485263.

Ngừng sử dụng Web SQL

Phần Application (Ứng dụng) > Web SQL (SQL web) sẽ bị xoá trong Chrome 123 vì Web SQL Database API (API cơ sở dữ liệu SQL web) không còn được duy trì nữa. Phiên bản này thêm một cảnh báo vào phần về việc xoá sắp tới.

Cảnh báo về việc ngừng sử dụng Web SQL.

Để biết thêm thông tin, hãy xem phần Ngừng sử dụng và xoá Web SQL.

Vấn đề về Chromium: 1485966.

Xác thực tỷ lệ khung hình ảnh chụp màn hình trong phần Application (Ứng dụng) > Manifest (Tệp kê khai)

Phần Application (Ứng dụng) > Manifest (Tệp kê khai) hiện sẽ kiểm tra xem ảnh chụp màn hình của ứng dụng web có cùng hệ số hình dạng (wide hoặc narrow) có cùng tỷ lệ khung hình hay không.

Cảnh báo về tỷ lệ khung hình không chính xác của ảnh chụp màn hình có cùng kiểu dáng.

Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi ứng dụng web tiến bộThêm tệp kê khai ứng dụng web.

Nhóm DevTools bày tỏ lòng cảm ơn đến Alexey Rodionov vì đã triển khai thay đổi này và các điểm cải tiến khác về cảnh báo tệp kê khai trong phiên bản trước.

Vấn đề về Chromium: 1476656.

Thông tin nổi bật khác

Sau đây là một số điểm sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

  • Thành phần:
    • Bảng chọn hàm thời gian ảnh động không hiển thị cho các thuộc tính CSS viết tay trong các thuộc tính viết tắt có thể mở rộng (1149182).
    • Tính năng tự động hoàn thành cho contain-intrinsic-* hiện không cung cấp giá trị auto đơn lẻ không chính xác vì giá trị này phải là auto <length> (1480415).
    • Xoá tính năng hỗ trợ các thuộc tính -webkit-* không hợp lệ và không dùng nữa (1086089, 1030765).
  • Điểm ngắt: Khắc phục lỗi hộp thoại chỉnh sửa điểm ngắt biến mất khi thay đổi loại điểm ngắt (1485782).
  • Hiệu suất:
    • Khắc phục lỗi phân tích cú pháp màu sắc trong quá trình ghi lại hiệu suất (1480205).
    • Khắc phục lỗi LCP không hiển thị trong kênh Timings (1487136).
  • Mạng: Cột Đặt cookie hiện hiển thị chính xác số lượng cookie được đặt, ngoại trừ số lượng cookie bị chặn (1486903).
  • Các tiện ích DevTools hiện tải sau khi điều hướng đến một máy chủ lưu trữ không bị chặn (1476264).
  • Khắc phục lỗi ngữ cảnh thực thi tập lệnh không chính xác cho các tiện ích (1275331).

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.