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

Thông tin chi tiết về bảng điều khiển của Gemini sẽ ra mắt ở hầu hết các quốc gia ở Châu Âu

Phiên bản này hỗ trợ thông tin chi tiết về bảng điều khiển của Gemini ở hầu hết các quốc gia Châu Âu.

Nếu đang ở một trong những quốc gia đó, giờ đây, bạn có thể yêu cầu Gemini cung cấp thông tin chi tiết ngay trong Bảng điều khiển để hiểu rõ hơn về các lỗi và cảnh báo.

Thông tin cập nhật về bảng điều khiển Hiệu suất

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

Bản nhạc Mạng nâng cao

Chúng tôi đã cải tiến kênh Mạng trong bảng điều khiển Hiệu suất để hiển thị trước thông tin quan trọng, chẳng hạn như thời lượng và cây trình khởi tạo mạng chi tiết hơn, đồng thời cung cấp thông tin rõ ràng hơn về các tín hiệu và màu sắc trực quan. Do đó, bạn không cần phải chuyển đổi giữa bảng điều khiển Mạng và thẻ Hiệu suất > Tóm tắt nữa. Ngoài ra, nếu bạn vẫn cần chuyển sang bảng điều khiển Mạng, chúng tôi đã giúp bạn thực hiện việc này dễ dàng và nhanh chóng hơn.

Giờ đây, kênh Mạng sẽ thực hiện những việc sau:

• Cho thấy bảng chú giải màu cho các loại yêu cầu.
• Đánh dấu các yêu cầu chặn kết xuất bằng hình tam giác màu đỏ ở góc trên bên phải.
• Hiển thị trình khởi tạo yêu cầu khi được chọn bằng mũi tên. Điều này giúp bạn hiểu được cây của trình khởi tạo mạng trước đây chỉ có trong bảng điều khiển Mạng.
• Khi di chuột, chú giải công cụ được làm lại hiện cho thấy thông tin về thời gian có cấu trúc, bao gồm cả trạng thái chặn kết xuất và thay đổi về mức độ ưu tiên (nếu có).
• Giờ đây, thẻ Tóm tắt cũng hiển thị thông tin chi tiết về thời gian trong một cột ở bên phải.

Ngoài ra, giờ đây, bạn có thể nhấp chuột phải vào yêu cầu trong kênh hoặc URL của yêu cầu đó trong thẻ Tóm tắt rồi chọn Hiện trong bảng điều khiển Mạng trong trình đơn thả xuống. Công cụ cho nhà phát triển sẽ đưa bạn đến bảng điều khiển Mạng và làm nổi bật yêu cầu bạn đang tìm kiếm trong bảng.

Tuỳ chỉnh dữ liệu hiệu suất bằng API mở rộng

Phiên bản này hỗ trợ dữ liệu tiện ích cho bảng điều khiển Hiệu suất. Giờ đây, bạn có thể thêm các kênh tuỳ chỉnh có sự kiện và nội dung mô tả chú giải công cụ vào dấu vết hiệu suất, thông tin chi tiết vào thẻ Tóm tắt, và nhiều tính năng khác. Tính năng này có thể hữu ích cho các nhà phát triển khung, thư viện và ứng dụng phức tạp có khả năng đo lường tuỳ chỉnh.

Xem ví dụ về kênh tuỳ chỉnh trên trang minh hoạ này. Trong phần Hiệu suất > Cài đặt tính năng ghi lại, hãy bật check_box Dữ liệu tiện ích. Bắt đầu ghi lại hiệu suất, nhấp vào Add new Corgi (Thêm Corgi mới) trên trang minh hoạ, sau đó dừng ghi. Bạn sẽ thấy một kênh tuỳ chỉnh trong dấu vết chứa các sự kiện có chú giải công cụ tuỳ chỉnh và thông tin chi tiết trong thẻ Tóm tắt.

Tóm lại, để mở rộng dữ liệu hiệu suất, hãy truyền một cấu trúc cụ thể đến các tham số measureOption.detail hoặc markOption.detail của lệnh gọi API performance.measure() hoặc performance.mark().

Thông tin chi tiết trong kênh Thời gian

Nếu là nhà phát triển web sử dụng phần Thời gian của người dùng trong API Hiệu suất để thêm mục vào kênh Thời gian, thì giờ đây, bạn có thể xem thông tin chi tiết tuỳ ý trong thẻ Tóm tắt cho các sự kiện mark và measure cũng như dấu thời gian của các sự kiện đó.

Vấn đề về Chromium: 345418915.

Sao chép tất cả yêu cầu được liệt kê trong bảng điều khiển Mạng

Thay vì sao chép toàn bộ nhật ký mạng, giờ đây, bảng điều khiển Mạng cho phép bạn áp dụng bộ lọc và chỉ sao chép các yêu cầu được liệt kê.

Ảnh chụp nhanh vùng nhớ khối xếp nhanh hơn với các thẻ HTML được đặt tên và ít lộn xộn hơn

Ảnh chụp nhanh vùng nhớ khối xếp trong bảng điều khiển Memory (Bộ nhớ) nhanh hơn nữa, hiện có các đối tượng được nhóm theo thẻ HTML được đặt tên, khớp tốt hơn với ngữ nghĩa ngôn ngữ JavaScript bằng cách hiển thị ít đối tượng nội bộ hơn và luôn bao gồm các giá trị số.

Hiệu suất của chế độ cài đặt check_box Include numerical values in capture (Thêm giá trị số vào ảnh chụp) đã được tăng tốc, bật theo mặc định và xoá khỏi bảng điều khiển Memory (Bộ nhớ).

Để đưa các đối tượng nội bộ vào ảnh chụp nhanh theo cách thủ công, trước tiên, hãy bật settings (cài đặt) Settings (Cài đặt) > Experiments (Thử nghiệm) > check_box Show option to expose internals in heap snapshots (Hiện tuỳ chọn để hiển thị nội dung bên trong trong ảnh chụp nhanh vùng nhớ khối xếp), sau đó bật check_box Expose internals (...) (Hiện nội dung bên trong (...)) trong bảng điều khiển Memory (Bộ nhớ).

Vấn đề về Chromium: 41490040, 343341610, 42203857.

Mở bảng điều khiển Ảnh động để quay ảnh động và chỉnh sửa @keyframes trực tiếp

Bảng điều khiển Animations (Ảnh động) hiện thực hiện những việc sau:

• Ghi lại ảnh động đang diễn ra khi bạn mở bảng điều khiển, vì vậy, bạn không cần phải làm mới trang để ghi lại ảnh động.
• Hỗ trợ tính năng chỉnh sửa trực tiếp @keyframes. Nói cách khác, cập nhật ảnh động đã chụp khi bạn chỉnh sửa mục @keyframes trong Elements (Thành phần) > Styles (Kiểu).

Hãy xem cả hai tính năng này hoạt động trong video sau.

Vấn đề về Chromium: 352718055.

Lighthouse 12.1.0

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

Bản cập nhật này mang đến một số thay đổi, bao gồm cả việc xoá chỉ số Hiển thị nội dung đầu tiên (FMP) cũ để thay thế bằng Thời gian hiển thị nội dung lớn nhất (LCP). 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.

Hỗ trợ tiếp cận

Phiên bản này có các điểm cải tiến về hỗ trợ tiếp cận sau:

• Thao tác nhấn phím Tab sau khi tự động hoàn thành trong trường chỉnh sửa của biểu thức trực tiếp sẽ di chuyển tiêu điểm đến điểm tiêu điểm tiếp theo. Trước đây, thuộc tính này sẽ thụt lề văn bản.
• Khi nhấp vào công cụ đổi kích thước, tiêu điểm sẽ được đặt vào công cụ đó để bạn có thể di chuyển công cụ bằng phím mũi tên phải và trái.
• Trình đọc màn hình hiện thông báo trường chỉnh sửa Thêm biểu thức đồng hồ trong Nguồn và Xoá biểu thức đồng hồ hiện hiển thị rõ ràng khi di chuyển bằng bàn phím.

Vấn đề về Chromium: 349939551, 343942719, 349334243, 349428374.

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:
  • Kênh Mạng: Thêm sự kiện kết nối WebSocket 331351979.
  • Giờ đây, bảng điều khiển Hiệu suất sẽ thu phóng chính xác hoạt động luồng chính bận rộn nhất 345599356.
  • Khắc phục lỗi tải lên sai loại tệp theo dõi, hiện ngăn việc tải lên bất kỳ loại nào ngoại trừ .json hoặc .gz chính xác 349864878.
• Elements (Thành phần) > Styles (Kiểu):
  • Trình đơn thả xuống đơn vị trong giá trị thuộc tính chiều dài hiện không còn được dùng nữa 41495618.
  • Khắc phục lỗi phân giải các thuộc tính đang hoạt động cho các quy tắc at-rule lồng nhau 346732737.
  • Các mục @position-try không hoạt động hiện có màu xám 40246493.
• Ứng dụng:
  • Cookie: Khắc phục lỗi không làm mới cookie khi nhấp vào Làm mới 348683488.
  • Bộ nhớ cục bộ: Giờ đây, bạn có thể sắp xếp theo khoá theo thứ tự bảng chữ cái 341129585.

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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại crbug.com.
• Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.