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

Sofia Emelianova
Sofia Emelianova

Trình ghi hỗ trợ xuất sang Puppeteer cho Firefox

Trong quá trình hỗ trợ WebDriver BiDi, bảng điều khiển Recorder (Máy ghi) hiện có thể xuất bản ghi sang Puppeteer cho Firefox. Với khả năng hỗ trợ Firefox của Puppeteer, giờ đây, bạn có thể ghi lại luồng người dùng bằng bảng điều khiển Trình ghi trong Công cụ của Chrome cho nhà phát triển, xuất và chạy luồng đó trên cả Firefox và Chrome.

Trước và sau khi thêm tuỳ chọn "Puppeteer for Firefox" vào trình đơn xuất của Trình ghi.

Để biết thêm thông tin, hãy xem bài viết WebDriver BiDi – Tương lai của tính năng tự động hoá trên nhiều trình duyệt.

Cải tiế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.

Quan sát chỉ số trực tiếp

Bảng điều khiển Hiệu suất hiện cho bạn thấy các quan sát trực tiếp về Các chỉ số quan trọng về trang web, cả trên máy cục bộ và dựa trên dữ liệu thực tế từ Báo cáo trải nghiệm người dùng trên Chrome. Nhờ đó, bạn có thể phát hiện các vấn đề về hiệu suất mà không cần ghi lại dấu vết hiệu suất và hiểu được trải nghiệm của bạn có đại diện cho trải nghiệm của người dùng hay không.

Để xem các quan sát trực tiếp về LCP và CLS, hãy mở bảng điều khiển Hiệu suất. Để xem INP, hãy thực hiện một lượt tương tác trên một trang. Để so sánh các chỉ số cục bộ với trải nghiệm người dùng tổng hợp trong Báo cáo trải nghiệm người dùng trên Chrome, hãy thêm dữ liệu trường: trong mục Dữ liệu trường ở bên phải, hãy nhấp vào Thiết lập, rồi trong cửa sổ hộp thoại, hãy nhấp vào Ok. Di chuột qua một giá trị chỉ số để xem chú giải công cụ có thêm thông tin.

Thông tin quan sát trực tiếp về các chỉ số trong bảng điều khiển Hiệu suất.

Bảng điều khiển Hiệu suất nêu bật những chỉ số có thể cải thiện, đồng thời cung cấp thông tin chi tiết và đề xuất về cách điều chỉnh trải nghiệm cục bộ cho phù hợp với trải nghiệm của người dùng. Ví dụ: bạn có thể muốn điều tiết CPU hoặc mạng. Bạn có thể thực hiện việc này trên cùng một màn hình trong phần Cài đặt bản ghi ở bên phải.

Hộp Tìm kiếm trong bảng điều khiển Hiệu suất hiện cũng hoạt động trên kênh Mạng, vì vậy, bạn có thể tìm thấy các yêu cầu bằng phím tắt Ctrl / Cmd + F.

Tìm thấy một yêu cầu mạng có hoạt động tìm kiếm.

Xem dấu vết ngăn xếp của các lệnh gọi performance.markperformance.measure

Trong thẻ Summary (Tóm tắt), bảng điều khiển Performance (Hiệu suất) hiện cho bạn thấy dấu vết ngăn xếp của các lệnh gọi performance.markperformance.measure. Bạn có thể sử dụng các lệnh gọi này để mở rộng dấu vết hiệu suất bằng dữ liệu tuỳ chỉnh.

Trước và sau khi hiển thị dấu vết ngăn xếp cho các lệnh gọi performance.mark và performance. measure.

Để biết thêm thông tin, hãy xem bài viết Tuỳ chỉnh dữ liệu hiệu suất bằng API mở rộng.

Sử dụng dữ liệu địa chỉ thử nghiệm trong bảng điều khiển Tự động điền

Bảng điều khiển Tự động điền hiện cung cấp dữ liệu kiểm thử cho biểu mẫu địa chỉ. Điều này giúp bạn dễ dàng kiểm thử biểu mẫu địa chỉ trên trang web của mình khi không có địa chỉ nào được lưu trong Chrome hoặc khi bạn đang sử dụng hồ sơ Khách.

Để tự động điền dữ liệu kiểm thử vào biểu mẫu địa chỉ, hãy mở bảng điều khiển Tự động điền, bật Hiện địa chỉ thử nghiệm trong trình đơn tự động điền, nhấp chuột phải vào một biểu mẫu địa chỉ được lưu trên trang của bạn rồi chọn một trong các tuỳ chọn trong trình đơn Công cụ dành cho nhà phát triển.

Trước và sau khi thêm các tuỳ chọn dữ liệu kiểm thử Tự động điền vào trình đơn thả xuống của trường biểu mẫu địa chỉ.

Cải tiến bảng điều khiển Phần 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 Elements (Phần tử).

Buộc thực thi nhiều trạng thái hơn cho các phần tử cụ thể

Phần :hov trong Elements (Thành phần) > Styles (Kiểu) hiện cung cấp cho bạn nhiều lớp giả mà bạn có thể buộc bật. Tập hợp các tuỳ chọn mới nằm trong trình đơn thả xuống trạng thái Buộc phần tử cụ thể và dành riêng cho một số phần tử nhất định mà bạn chọn. Ví dụ: <label><input> có các nhóm tuỳ chọn khác nhau.

Trước và sau khi thêm khả năng buộc thực thi trạng thái cụ thể của phần tử.

Vấn đề về Chromium: 40280012.

Phần tử > Kiểu hiện tự động hoàn thành nhiều thuộc tính lưới hơn

Thẻ Elements (Thành phần) > Styles (Kiểu) hiện cung cấp các tuỳ chọn tự động điền khi bạn chỉnh sửa tên dòng và vùng lưới.

Trước và sau khi thêm các tuỳ chọn tự động hoàn thành khi bạn chỉnh sửa tên đường lưới.

Để biết thêm thông tin, hãy xem phần Kiểm tra bố cục lưới CSS và cụ thể là phần Hiển thị tên dòng.

Lighthouse 12.2.0

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

Bản cập nhật này mang đến một số bản sửa lỗi. 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.

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:

  • Thành phần:
    • Khắc phục lỗi hiển thị không chính xác các thuộc tính chiều dài bị quá tải 357020613.
    • Đổi tên position-try-options thành position-try-fallbacks theo quy cách.
    • Giờ đây, thao tác làm mới trang sẽ khôi phục nút đã chọn ngay cả bên trong iframe 40719145.
    • Hỗ trợ tiếp cận: Giờ đây, trình đọc màn hình sẽ thông báo nút Hiển thị phần tử 357382536.
  • Hiệu suất > Mạng: Giờ đây, tuỳ chọn trình đơn Hiện trong mạng sẽ mở thẻ Tiêu đề của yêu cầu mạng có liên quan.
  • Bảng điều khiển:
    • Các lỗi từ tiện ích C/C++ hiện không buộc mở Console 356320158.
    • Khắc phục lỗi import.meta trong mô-đun JS không đánh giá khi tạm dừng 40743793.
  • Bộ nhớ: Khắc phục lỗi Khôi phục các trình lưu giữ đã bỏ qua không xuất hiện sau khi bỏ qua một trình lưu giữ 327337527.

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.

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.