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 hiện đã có ở 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 trên Bảng điều khiển của Gemini cho hầu hết các quốc gia Châu Âu.

Nếu sinh sống ở 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 để có thể 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 vài điểm cải tiến cho bảng điều khiển Hiệu suất.

Theo dõi Mạng nâng cao

Kênh Mạng trong bảng Hiệu suất đã được cải tiến để hiển thị trước những thông tin quan trọng, chẳng hạn như cây khởi tạo mạng và thời lượng chi tiết hơn, đồng thời cung cấp thông tin rõ ràng hơn về tín hiệu hình ảnh và màu sắc. Do đó, bạn không phải chuyển giữa bảng Network (Mạng) và bảng Performance (Hiệu suất) > Thẻ 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, thì chúng tôi đã giúp bạn thực hiện việc này nhanh chóng và dễ dàng hơn.

Kênh Network (Mạng) nay có những chức năng sau:

• Hiện 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 hiển thị 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 chọn bằng một mũi tên. Việc này giúp bạn hiểu được sơ đồ trình khởi tạo mạng mà trước đây chỉ có trong bảng điều khiển Mạng.
• Khi di chuột, chú thích được làm lại sẽ hiển thị thông tin thời gian có cấu trúc, bao gồm trạng thái chặn hiển thị và các thay đổi về mức độ ưu tiên, nếu có.
• Giờ đây, thẻ Tóm tắt cũng cho thấy bảng phân tích 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 thị 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à đánh dấu yêu cầu mà bạn đang tìm kiếm trong bảng.

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

Phiên bản này hỗ trợ bảng Hiệu suất cho dữ liệu tiện ích. Giờ đây, bạn có thể thêm kênh tuỳ chỉnh có sự kiện và nội dung mô tả ở dạng chú giải công cụ vào dấu vết hiệu suất, thêm thông tin chi tiết vào thẻ Tóm tắt và nhiều nội dung 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ề bản nhạc tuỳ chỉnh trên trang minh hoạ này. Trong mục Hiệu suất > Cài đặt quay, bật check_box Dữ liệu tiện ích. Bắt đầu ghi hiệu suất, nhấp vào Add new Corgi (Thêm Corgi mới) trên trang minh hoạ rồi dừng ghi. Bạn sẽ nhìn thấy một bản nhạc tuỳ chỉnh trong dấu vết chứa các sự kiện có chú thích 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ể vào 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 bạn là nhà phát triển web sử dụng phần Thời gian người dùng trong API hiệu suất để thêm mục nhập 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ả cá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, bảng điều khiển Mạng giờ đây cho phép bạn áp dụng các bộ lọc và chỉ sao chép những yêu cầu được liệt kê.

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

Ảnh chụp nhanh của vùng nhớ khối xếp trong bảng điều khiển Memory (Bộ nhớ) thậm chí còn nhanh hơn nữa. Giờ đây, các đối tượng được nhóm theo thẻ HTML được đặt tên, phù hợp hơn với ngữ nghĩa ngôn ngữ JavaScript nhờ 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ế độ check_box Bao gồm các giá trị số khi chụp đã được tăng tốc, được bật theo mặc định và được xoá khỏi bảng điều khiển 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 chế độ cài đặt Cài đặt > Thử nghiệm > check_box Hiện tuỳ chọn hiển thị nội bộ trong ảnh chụp nhanh của vùng nhớ khối xếp, sau đó bật check_box Hiển thị nội bộ (...) trong bảng điều khiển Bộ nhớ.

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

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

Giờ đây, bảng điều khiển Animations sẽ thực hiện những việc sau:

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

Mời bạn xem cách hoạt động của cả hai tính năng trong video dưới đây.

Vấn đề về Chromium: 352718055.

Lighthouse 12.1.0

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

Bản cập nhật này mang đến một số thay đổi, bao gồm việc loại bỏ chỉ số Hiển thị nội dung đầu tiên (FMP) cũ và thay vào đó là Nội dung lớn nhất hiển thị (LCP). Xem danh sách đầy đủ các thay đổi.

Để tìm hiểu thông tin 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ề khả năng hỗ trợ tiếp cận như sau:

• Nhấn Tab sau khi tự động hoàn tất 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 lấy nét tiếp theo. Trước đây, nó sẽ thụt lề văn bản.
• Khi nhấp vào trình thay đổi kích thước, bạn sẽ đặt tiêu điểm vào đó, vì vậy, bạn có thể di chuyển trình thay đổi kích thước bằng các phím mũi tên phải và trái.
• Trình đọc màn hình giờ đây thông báo trường chỉnh sửa Add watch icon (Thêm biểu thức theo dõi) trong Sources (Nguồn) và Delete watch icon (Xoá biểu thức xem) nay sẽ hiển thị rõ ràng khi điều hướng bằng bàn phím.

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

Nội dung nổi bật khác

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

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, 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 đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
• Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @ChromeDevTools.
• Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong 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.