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 do Gemini cung cấp 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.

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

Áo, Bỉ, Bulgaria, Thuỵ Sĩ, Síp, Cộng hoà 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 ở 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 Console, nhờ đó bạn có thể hiểu rõ hơn về các lỗi và cảnh báo.

Thông tin chi tiết do Gemini cung cấp 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 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

Đã cải tiến bản ghi Mạng trong bảng điều khiển Hiệu suất để hiển thị thông tin quan trọng ngay từ đầu, 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. Vì vậy, 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, bản theo dõi Mạng sẽ thực hiện những việc sau:

  • Cho biết 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 các hình tam giác màu đỏ ở góc trên bên phải.
  • Hiện trình khởi tạo yêu cầu khi chọn bằng một mũi tên. Điều này giúp bạn hiểu được cây của các 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, một chú thích được thiết kế 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 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 thông tin chi tiết về thời gian trong một cột ở bên phải.

Dấu vết mạng nâng cao có chú giải màu, chú thích, chỉ báo chặn hiển thị 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 dấu vết 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 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ó lựa 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 có khả năng 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 dấu vết tuỳ chỉnh có sự kiện và nội dung mô tả chú thích vào dấu vết hiệu suất, thông tin chi tiết vào thẻ Tóm tắt, v.v. 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ó tính năng đo lường tuỳ chỉnh.

Xem ví dụ về một bản nhạc tuỳ chỉnh trên trang minh hoạ này. Trong phần Hiệu suất > Cài đặt chụp, hãy bật 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 dấu vết tuỳ chỉnh trong dấu vết chứa các sự kiện có chú thích và thông tin chi tiết tuỳ chỉnh trong thẻ Tóm tắt.

Một bản nhạc tuỳ chỉnh trong bảng điều khiển Hiệu suất.

Nói 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 bản ghi 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 Performance API để thêm các mục vào bản ghi Timings, thì giờ đây, bạn có thể xem thông tin chi tiết tuỳ ý của mình trong thẻ Summary (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 bản theo dõi 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 những yêu cầu được liệt kê.

Ảnh chụp nhanh về heap nhanh hơn với các thẻ HTML được đặt tên và ít dữ liệu rác hơn

Ảnh chụp nhanh của vùng nhớ khối xếp trong bảng điều khiển Bộ nhớ thậm chí còn nhanh hơn, hiện có các đối tượng được nhóm theo thẻ HTML có tên, phù hợp 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ị bằng số.

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

Hiệu suất của chế độ cài đặt Đưa các 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 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 lựa chọn để hiển thị các thành phần nội bộ trong ảnh chụp nhanh heap), sau đó bật Expose internals (...) (Hiển thị các thành phần nội bộ (...)) trong bảng Memory (Bộ nhớ).

Các vấn đề về Chromium: 41490040, 343341610, 42203857.

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

Bảng điều khiển Ảnh động hiện có những chức năng sau:

  • Ghi lại những ả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ợ chỉnh sửa trực tiếp @keyframes. Nói cách khác, thao tác này sẽ cập nhật ảnh động đã chụp khi bạn chỉnh sửa phần @keyframes trong Elements (Phần tử) > Styles (Kiểu).

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

Vấn đề về Chromium: 352718055.

Lighthouse 12.1.0

Bảng 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ố cũ Hiển thị nội dung đầu tiên (FMP) để thay 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 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: 772558.

Hỗ trợ tiếp cận

Phiên bản này có những điểm cải thiện sau đây về khả năng hỗ trợ tiếp cận:

  • Khi bạn nhấn phím Tab sau khi tính năng tự động hoàn thành trong trường chỉnh sửa của biểu thức trực tiếp, tiêu điểm sẽ di chuyển đến điểm lấy tiêu điểm tiếp theo. Trước đây, thao tác này sẽ thụt lề văn bản.
  • Khi nhấp vào một công cụ đổi kích thước, tiêu điểm sẽ chuyển sang công cụ đó, nhờ vậy bạn có thể di chuyển công cụ này bằng các phím mũi tên phải và trái.
  • Giờ đây, trình đọc màn hình sẽ thông báo trường chỉnh sửa Thêm biểu thức theo dõi trong Nguồn và Xoá biểu thức theo dõi hiện có thể thấy rõ 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 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:
    • Theo dõi Mạng: Đã thêm các sự kiện kết nối WebSocket 331351979.
    • Giờ đây, bảng Hiệu suất sẽ thu phóng chính xác hoạt động bận rộn nhất của luồng chính 345599356.
    • Khắc phục lỗi tải lên các loại tệp dấu vết không chính xác, hiện ngăn việc tải lên mọi loại tệp ngoại trừ loại tệp .json hoặc .gz chính xác 349864878.
  • Phần tử > Kiểu:
    • Trình đơn thả xuống đơn vị trong các giá trị thuộc tính chiều dài hiện không được dùng nữa 41495618.
    • Khắc phục vấn đề giải quyết các thuộc tính đang hoạt động cho các quy tắc @ được lồng 346732737.
    • Các phần @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 người dùng 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 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.