Recorder hỗ trợ xuất sang Puppeteer cho Firefox
Trong quá trình hỗ trợ WebDriver BiDi, bảng điều khiển Trình ghi hiện có thể xuất bản ghi âm sang Puppeteer cho Firefox. Nhờ Puppeteer hỗ trợ Firefox, 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 các luồng đó trên cả Firefox và Chrome.
Để biết thêm thông tin, hãy xem bài viết WebDriver BiDi – Tương lai của quy trình tự động hoá trên nhiều trình duyệt.
Cải thiệ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.
Lượt quan sát chỉ số trực tiếp
Giờ đây, bảng điều khiển Hiệu suất cho bạn biết thông tin quan sát trực tiếp về Các chỉ số quan trọng chính về trang web, cả trên máy cục bộ và dựa trên dữ liệu thực tế tại trang trong 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 phải ghi lại dấu vết hiệu suất và hiểu được mức độ đại diện của trải nghiệm so với trải nghiệm của người dùng.
Để xem các chỉ số LCP và CLS được quan sát trực tiếp, 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 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 phần Dữ liệu trường ở bên phải, hãy nhấp vào Thiết lập, rồi nhấp vào Ok trong cửa sổ hộp thoại. Di chuột lên một giá trị chỉ số để xem chú thích có thêm thông tin.
Bảng điều khiển Hiệu suất làm nổi 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ộ của bạn 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 chỉnh tốc độ 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 Recording settings (Chế độ cài đặt ghi) ở bên phải.
Yêu cầu tìm kiếm trong bản ghi Mạng
Giờ đây, hộp Tìm kiếm trong bảng điều khiển Hiệu suất cũng hoạt động trên cả theo dõi Mạng, vì vậy, bạn có thể tìm thấy các yêu cầu bằng tổ hợp phím Ctrl / Cmd + F.
Xem dấu vết ngăn xếp của các lệnh gọi performance.mark và performance.measure
Trong thẻ Tóm tắt, bảng Hiệu suất hiện hiển thị cho bạn các dấu vết ngăn xếp của lệnh gọi performance.mark và performance.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.
Để 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 có 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 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ử các biểu mẫu địa chỉ trên trang web của mình 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 biểu mẫu địa chỉ bằng dữ liệu kiểm thử, hãy mở bảng Tự động điền, bật Hiện địa chỉ kiểm thử 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 điền sẵn trên trang của bạn rồi chọn một trong các lựa chọn trong trình đơn Công cụ cho nhà phát triển.
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 Phần tử.
Buộc thực thi nhiều trạng thái hơn cho các phần tử cụ thể
Giờ đây, mục :hov trong Elements (Phần tử) > Styles (Kiểu) cung cấp cho bạn nhiều lớp giả hơn mà bạn có thể buộc bật. Nhóm lựa 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ử mà bạn chọn. Ví dụ: <label> và <input> có các nhóm lựa chọn khác nhau.
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 (Phần tử) > Styles (Kiểu) hiện cung cấp các lựa chọn tự động hoàn thành khi bạn chỉnh sửa tên đường kẻ và vù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 biệt là phần Hiện tên dòng.
Lighthouse 12.2.0
Giờ đây, bảng Lighthouse chạy 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 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.
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:
- Phần tử:
- Khắc phục lỗi hiển thị không chính xác các thuộc tính độ dài bị quá tải 357020613.
- Đổi tên
position-try-optionsthànhposition-try-fallbackstheo quy cách. - Thao tác làm mới trang hiện 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 về nút Hiện phần tử 357382536.
- Hiệu suất > Mạng: Giờ đây, lựa 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:
- Bộ nhớ: Khắc phục lỗi khi tính năng 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 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.
- Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại crbug.com.
- Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng biểu tượng Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
- Đăng bài trên X cho @ChromeDevTools.
- Hãy bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo sử dụng Công cụ cho nhà phát triển" trên YouTube.
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.
- Thông tin cập nhật về máy chủ MCP của Công cụ cho nhà phát triển
- Cải thiện tính năng chia sẻ dấu vết
- Hỗ trợ cho @starting-style
- Tiện ích trình chỉnh sửa cho chế độ hiển thị: masonry
- Lighthouse 13
- Đề xuất mã của Gemini
- Các điểm cải tiến cho máy chủ MCP của Công cụ cho nhà phát triển
- Truy cập nhanh hơn vào tính năng hỗ trợ của AI
- Gỡ lỗi toàn bộ dấu vết hiệu suất bằng Gemini
- Bật/tắt nút chuyển hướng ngăn
- Chương trình dành cho nhà phát triển của Google
- Những điểm nổi bật khác
- Chrome DevTools (MCP) cho tác nhân AI của bạn
- Gỡ lỗi cây phần phụ thuộc mạng bằng Gemini
- Xuất các cuộc trò chuyện của bạn với Gemini
- Cấu hình bản nhạc được duy trì trong bảng điều khiển Hiệu suất
- Lọc các yêu cầu mạng được bảo vệ bằng địa chỉ IP
- Elements > Layout tab adds masonry layout support
- Lighthouse 12.8.2
- Những điểm nổi bật khác
- Gỡ lỗi nhiều thông tin chi tiết hơn bằng Gemini
- Mô phỏng tiêu đề "Save-Data" trong "Network conditions" (Điều kiện mạng)
- Xem trạng thái Baseline trong chú giải công cụ thuộc tính CSS
- Ghi đè hệ số hình dạng trong thông tin mô tả của ứng dụng tác nhân người dùng
- Lighthouse 12.8.0
- Những điểm nổi bật khác
- Chrome DevTools đáng tin cậy và hiệu quả hơn
- Tải hình ảnh lên tính năng hỗ trợ AI để tạo kiểu
- Thêm tiêu đề yêu cầu vào bảng trong Mạng
- Xem những nội dung nổi bật tại Google I/O 2025
- Những điểm nổi bật khác
- Cải thiện bảng điều khiển hiệu suất
- Điểm gốc được kết nối trước trong thông tin chi tiết "Cây phần phụ thuộc mạng"
- Thời gian phản hồi và chuyển hướng của máy chủ trong thông tin chi tiết "Độ trễ của yêu cầu về tài liệu"
- Lệnh chuyển hướng trong phần Tóm tắt yêu cầu mạng
- Giảm nhiễu trong dấu vết hiệu suất
- Ngừng sử dụng "Tắt mẫu JavaScript"
- Tham số độ chính xác của vị trí địa lý trong Cảm biến
- Cải tiến bảng điều khiển Phần tử
- Gỡ lỗi các giá trị CSS phức tạp dễ dàng hơn
- Hỗ trợ@function trong Elements > Styles (Phần tử > Kiểu)
- Cải tiến bảng điều khiển Mạng
- bộ lọc has-request-header
- Direct Sockets trong Ứng dụng web tách biệt
- Những điểm nổi bật khác
- Hỗ trợ tiếp cận
- Phiên bản Google I/O 2025
- Sửa đổi và lưu các thay đổi về CSS vào không gian làm việc bằng Gemini
- Kết nối một thư mục trong không gian làm việc và lưu các thay đổi trở lại tệp nguồn
- Hỏi Gemini về thông tin chi tiết về hiệu suất
- Chú thích kết quả hiệu suất bằng Gemini
- Thêm ảnh chụp màn hình vào cuộc trò chuyện với Gemini
- Thông tin chi tiết mới trong bảng điều khiển Hiệu suất
- JavaScript trùng lặp
- JavaScript cũ
- Các suy đoán hiện hỗ trợ thẻ quy tắc
- Lighthouse 12.6.0
- Những điểm nổi bật khác
- Hỗ trợ tiếp cận
- Cải thiện bảng điều khiển hiệu suất
- Thông tin chi tiết mới về hiệu suất
- Nhấp để đánh dấu
- Thời gian phản hồi của máy chủ trong phần Tóm tắt các yêu cầu mạng
- Lọc cookie trong phần "Quyền riêng tư và bảo mật"
- Kích thước tính bằng đơn vị kB trong các bảng trên các bảng điều khiển
- Tính năng tự động hoàn thành hỗ trợ corner-shape và corner-*-shape trong Elements > Styles (Phần tử > Kiểu)
- Thử nghiệm: Làm nổi bật các vấn đề về phần tử và thuộc tính trong DOM
- Lighthouse 12.5.0
- Những điểm nổi bật khác
- Cải thiện bảng điều khiển hiệu suất
- Đường liên kết đến nguồn và tập lệnh cho hồ sơ và lệnh gọi hàm trong Performance
- Hỗ trợ dữ liệu trường LCP theo giai đoạn
- Thông tin chi tiết về cây phần phụ thuộc mạng
- Thời lượng thay vì tổng thời gian và thời gian tự thực hiện trong phần Tóm tắt
- Đánh dấu ngăn xếp nặng nhất
- Cải thiện trạng thái trống cho nhiều bảng điều khiển
- Chế độ xem dạng cây hỗ trợ tiếp cận trong thẻ Elements
- Lighthouse 12.4.0
- Những điểm nổi bật khác
- Bảng điều khiển về quyền riêng tư và bảo mật
- Cải thiện bảng điều khiển hiệu suất
- Chế độ điều tiết CPU đặt sẵn đã hiệu chỉnh
- Chọn các sự kiện hiệu suất khác nhau trong cùng một cuộc trò chuyện với AI
- Điểm nổi bật của bên thứ nhất và bên thứ ba trong mục Hiệu suất
- Dữ liệu trên thực địa trong chú thích và thông tin chi tiết của điểm đánh dấu
- Thông tin chi tiết về việc buộc chỉnh lại luồng
- Thông tin chi tiết "Tối ưu hoá kích thước DOM"
- Mở rộng dấu vết hiệu suất bằng console.timeStamp
- Cải tiến bảng điều khiển Phần tử
- Giá trị theo thời gian thực của các kiểu có ảnh động
- Hỗ trợ lớp giả :open và nhiều phần tử giả
- Sao chép tất cả thông báo trên bảng điều khiển
- Đơn vị byte trong bảng điều khiển Bộ nhớ
- Những điểm nổi bật khác
- Nhật ký trò chuyện liên tục với AI
- Cải thiện bảng điều khiển hiệu suất
- Thông tin chi tiết về việc phân phối hình ảnh
- Thao tác điều hướng bằng bàn phím theo kiểu cổ điển và hiện đại
- Bỏ qua các tập lệnh không liên quan trong biểu đồ hình ngọn lửa
- Đánh dấu dòng thời gian và làm nổi bật phạm vi khi di chuột
- Chế độ cài đặt điều tiết được đề xuất
- Điểm đánh dấu thời gian trong lớp phủ
- Dấu vết ngăn xếp của các lệnh gọi JS trong phần Tóm tắt
- Chuyển chế độ cài đặt huy hiệu sang trình đơn trong phần Thành phần
- Bảng điều khiển "Tính năng mới" mới
- Lighthouse 12.3.0