Tính năng mới trong DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Các điểm cải tiến về bảng điều khiển Hiệu suất

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Hiệu suất.

Thông tin chi tiết mới về hiệu suất

Thẻ Hiệu suất > Thông tin chi tiết sẽ có các thông tin chi tiết mới:

  • HTTP hiện đại làm nổi bật các yêu cầu sử dụng giao thức HTTP/1.1 cũ.
  • Sử dụng thời gian hữu dụng của bộ nhớ đệm hiệu quả để làm nổi bật những yêu cầu có thể hưởng lợi từ thời gian hữu dụng của bộ nhớ đệm dài hơn và tăng tốc thời gian tải trang web.
  • Font display (Hiển thị phông chữ) cho biết thời gian tiết kiệm được ước tính nếu bạn tối ưu hoá font-display.

Ba thông tin chi tiết mới trong thẻ Thông tin chi tiết.

Nhấp để làm nổi bật

Giờ đây, bạn có thể nhấp vào các mục trong bảng Tóm tắt, Từ dưới lên, Cây lệnh gọi và Nhật ký sự kiện để giữ cho các sự kiện tương ứng được làm nổi bật trong dấu vết và làm mờ các sự kiện còn lại khi bạn duyệt qua dấu vết hiệu suất.

Thời gian máy chủ trong phần Tóm tắt yêu cầu mạng

Thẻ Tóm tắt trong bảng điều khiển Hiệu suất hiện cho bạn biết thời gian máy chủ cho các yêu cầu mạng triển khai công nghệ kết xuất phía máy chủ.

Bảng "Thời gian máy chủ" trong phần Tóm tắt yêu cầu mạng.

Bảng điều khiển Hiệu suất lấy dữ liệu từ tiêu đề Server-Timing phản hồi.

Lọc cookie trong phần "Quyền riêng tư và bảo mật"

Bảng trong mục Quyền riêng tư và bảo mật > Quyền riêng tư > Cookie của bên thứ ba sẽ có bộ lọc để bạn có thể tìm thấy cookie mà mình quan tâm nhanh hơn.

Bộ lọc trong bảng "Cookie của bên thứ ba".

Kích thước tính bằng đơn vị kB trong bảng trên các bảng điều khiển

Để giữ nguyên đơn vị trong cùng một ngữ cảnh, các bảng trong bảng điều khiển Mạng và Bộ nhớ, cũng như Bảng 1 bên / 3 bên trong phần Hiệu suất > Tóm tắt hiện hiển thị tất cả kích thước theo kB. Nhờ đó, bạn có thể trực tiếp so sánh các con số trong cùng một cột và trên các bảng điều khiển thay vì theo dõi các đơn vị MB so với kB so với B.

Trước và sau khi hợp nhất các đơn vị kích thước.

Tính năng tự động hoàn thành hỗ trợ corner-shape và corner-*-shape trong phần Elements (Thành phần) > Styles (Kiểu)

Tính năng tự động hoàn thành trong Elements (Thành phần) > Styles (Kiểu) hiện có thể đề xuất các giá trị tương ứng cho thuộc tính corner-shape và corner-*-shape.

Các tuỳ chọn tự động hoàn thành cho thuộc tính "corner-shape".

Vấn đề về Chromium: 402346406.

Thử nghiệm: Làm nổi bật các vấn đề về phần tử và thuộc tính trong DOM

Với tính năng thử nghiệm mới này, bảng điều khiển Elements (Phần tử) hiện có thể làm nổi bật các vấn đề về phần tử hoặc thuộc tính DOM bằng một đường gạch dưới ngoằn ngoèo màu đỏ. Di chuột qua các phần tử hoặc thuộc tính đó để xem chú giải công cụ có đường liên kết đến lỗi tương ứng trong bảng điều khiển Vấn đề.

Trước và sau khi làm nổi bật một vấn đề về DOM trong cây DOM bằng chú giải công cụ và đường liên kết đến bảng điều khiển Issues (Vấn đề).

Bảng điều khiển Elements (Phần tử) hiện làm nổi bật các phần tử con không hợp lệ của <select>, các định nghĩa ARIA không khớp và các thuộc tính ARIA không hợp lệ.

Vấn đề về Chromium: 378738916.

Lighthouse 12.5.0

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

Đáng chú ý nhất trong phiên bản này là legacy-javascript hiện sử dụng Baseline (Đường cơ sở) thay vì esmodules. 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: 40543651.

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:

  • Hiệu suất > Thông tin chi tiết > Cây phần phụ thuộc mạng: Giờ đây, sẽ hiển thị thời gian cho tất cả các yêu cầu mạng trong cây mạng (400708304).
    • Cây phần phụ thuộc mạng: Giờ đây, hiển thị thời gian cho tất cả các yêu cầu mạng trong cây mạng (400708304).
  • Ảnh động: Khắc phục lỗi khiến các phần tử đã tách xuất hiện trong bảng điều khiển Memory (Bộ nhớ) do ảnh động đã chụp 400635410.
  • Trình ghi: Giờ đây, sử dụng cùng một hộp thoại xác nhận như khi dán mã khi chạy tính năng ghi lần đầu tiên.
  • Lớp: Giờ đây, hiển thị tổng số lớp và tổng bộ nhớ cho tất cả các lớp hiển thị trong thanh trạng thái ở dưới cùng.
  • Bộ nhớ: Quá trình khởi chạy ảnh chụp nhanh vùng nhớ khối xếp đã được cải thiện bằng cách chạy song song các tác vụ giữa hai worker thay vì sử dụng một worker (42203857).
  • Vấn đề: Giờ đây, báo cáo lỗi CORS về Quyền truy cập mạng cục bộ (LNA) (395895368).
  • Hỗ trợ tiếp cận:
    • Chú giải công cụ: Giờ đây, chú giải công cụ sẽ xuất hiện khi nhấn phím tắt thay vì khi lấy tiêu điểm (396311936).
    • Elements (Thành phần) > Styles (Kiểu): Giờ đây, bạn có thể tương tác với hàm var() bằng bàn phím, nghĩa là bạn có thể chọn --custom-property rồi nhấn Enter để chuyển đến đích liên kết của hàm đó (401212692).

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 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, 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 mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.