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

Sofia Emelianova
Sofia Emelianova
GitHub

Cải thiện 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 có thêm thông tin chi tiết mới:

  • HTTP hiện đại làm nổi bật những 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 của bạn.
  • Hiển thị phông chữ cho biết thời gian ước tính bạn có thể tiết kiệm được nếu 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 đánh dấu trong dấu vết và làm mờ phần còn lại khi bạn duyệt xem dấu vết hiệu suất.

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

Thẻ Tóm tắt trong bảng Hiệu suất hiện cho bạn biết thời gian phản hồi của 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 phản hồi của máy chủ" trong phần Tóm tắt yêu cầu mạng.

Bảng 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 phần 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, nhờ đó 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 các bảng trên các bảng điều khiển

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

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

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

Tính năng tự động hoàn thành trong Elements (Phần tử) > 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 lựa 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ới 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 Phần tử hiện có thể làm nổi bật các vấn đề với phần tử hoặc thuộc tính DOM bằng một đường gạch chân ngoằn ngoèo màu đỏ. Di chuột lên những phần tử hoặc thuộc tính như vậy để 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 đề.

Hình ảnh trước và sau khi làm nổi bật một vấn đề về DOM trong cây DOM bằng một chú thích và một đường liên kết đến bảng điều khiển Vấn đề.

Hiện tại, bảng điều khiển Phần tử 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 Lighthouse hiện chạy Lighthouse 12.5.0.

Đáng chú ý nhất là trong phiên bản này, legacy-javascript hiện sử dụng Đường cơ sở thay vì esmodules. Xem danh sách đầy đủ các thay đổi.

Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng 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 cải tiến và bản sửa lỗi đáng chú ý trong bản phát hành này:

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