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

Sofia Emelianova
Sofia Emelianova
GitHub

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ề Console của Gemini ở hầu hết các quốc gia Châu Âu.

Danh sách các quốc gia Châu Âu mới được hỗ trợ

Áo, Bỉ, Bulgaria, Thuỵ Sĩ, Síp, Séc, Đức, Đan Mạch, Estonia, Tây Ban Nha, Phần Lan, Pháp, Vương quốc Anh, Hy Lạp, Croatia, Hungary, Ireland, Iceland, Ý, Liechtenstein, Lithuania, Luxembourg, Latvia, Malta, Hà Lan, Na Uy, Ba Lan, Bồ Đào Nha, Romania, Thuỵ Điển, Slovenia, Slovakia.

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 chi tiết của Gemini về một lỗi trong Bảng điều khiển.

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.

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

Kênh Mạng trong bảng Hiệu suất đã được cải tiến để hiển thị những thông tin quan trọng ở phía trước, 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 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, 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.

Giờ đây, kênh Mạng sẽ thực hiện những việc 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 kết xuất bằng hình tam giác màu đỏ ở góc trên bên phải.
  • Hiển thị mũi tên cho trình khởi tạo yêu cầu khi được chọ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ú 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 hiển thị thông tin chi tiết về thời gian trong một cột ở bên phải.

Bảng theo dõi mạng nâng cao có chú giải màu, chú giải công cụ, chỉ báo chặn kết xuất và thời gian trong thẻ Tóm tắt.

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à đánh dấu yêu cầu mà bạn đang tìm kiếm trong bảng.

Trình đơn nhấp chuột phải cho yêu cầu có tuỳ chọn "Hiện trong bảng điều khiển Mạ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 các 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ề 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 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ẽ 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.

Kênh tuỳ chỉnh trong bảng Hiệu suấ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 đó.

Một sự kiện tuỳ chỉnh trong kênh Thời gian có dấu thời gian và thông tin chi tiết.

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ê.

Chỉ sao chép các lựa chọn cho 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 thẻ HTML được đặt tên và ít lộn xộn hơ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ố.

Các đối tượng được nhóm theo thẻ HTML đã đặt tên.

Hiệu suất của chế độ cài đặt 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 (cài đặt) Settings (Cài đặt) > Experiments (Thử nghiệm) > 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 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 để 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, 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.

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 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 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 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, thuộc tính này 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 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ẽ 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.
  • Elements (Phần tử) > Styles (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òn đượ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 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 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 mọi nội dung đã được đề cập trong loạt bài viết Tính năng mới trong DevTools.