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 Máy ghi âm.

Để 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

Giờ đây, bảng Hiệu suất cho bạn thấy những quan sát trực tiếp về Các chỉ số quan trọng chính của trang web, cả trên máy cục bộ và dựa trên dữ liệu thực địa của 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. Hãy di chuột qua một giá trị chỉ số để xem phần chú thích có nhiều thông tin hơn.

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ẻ Tóm tắt, bảng 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.

Phần trước và sau khi hiển thị dấu vết ngăn xếp cho hiệu suất.mark và hiệu suất. đo lường các lệnh gọi.

Để 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 khả năng 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 giờ đây sẽ cung cấp dữ liệu thử nghiệm cho các biểu mẫu địa chỉ. Việc này giúp bạn dễ dàng kiểm tra các biểu mẫu địa chỉ trên trang web của mình hơn khi bạn không lưu địa chỉ nào trong Chrome hoặc đ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.

Các lựa chọn trước và sau khi thêm dữ liệu kiểm tra 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 có một vài điểm cải tiến cho bảng điều khiển 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 các trạng thái phần tử cụ thể.

Vấn đề về Chromium: 40280012.

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

Thẻ Phần tử > Kiểu hiện cung cấp các tuỳ chọn tự động hoàn thành khi bạn chỉnh sửa vùng lưới và tên đường.

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 bài viết Kiểm tra bố cục lưới CSS và cụ thể là phần Hiện tên dòng.

Lighthouse 12.2.0

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

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

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:

  • Phần tử:
    • 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: Bây giờ, tuỳ chọn trình đơn Reveal in Network (Hiển thị trong mạng) sẽ mở ra thẻ Headers (Tiêu đề) của yêu cầu mạng của relevan.
  • 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.
    • Sửa lỗi import.meta trong mô-đun JS không đánh giá khi 40743793 bị tạm dừng.
  • Bộ nhớ: Khắc phục lỗi các trình lưu giữ bị bỏ qua khi Khôi phục không xuất hiện sau khi bỏ qua 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

Sử dụng các lựa chọn sau để thảo luận về các tính năng mới, bản cập nhật hoặc bất cứ điều gì 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.