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

Gỡ lỗi các yêu cầu mạng, tệp nguồn và dấu vết hiệu suất bằng Gemini

Ngoài kiểu CSS, giờ đây, bạn có thể trò chuyện với Gemini về các yêu cầu mạng, tệp nguồn và dấu vết hiệu suất.

Tương tự như trình đơn theo bối cảnh trong bảng điều khiển Phần tử, để mở bảng điều khiển Hỗ trợ của AI và bắt đầu trò chuyện với Gemini, hãy nhấp chuột phải rồi chọn Hỏi AI hoặc nhấp vào nút Hỏi AI bên cạnh:

• Một yêu cầu mạng trong bảng điều khiển Mạng.
• Một tệp trong thẻ Sources (Nguồn) > Page (Trang).
• Một hoạt động trong bản theo dõi Hiệu suất > Chính.

Gemini sẽ xem xét bối cảnh của yêu cầu, tệp hoặc hoạt động đã chọn.

Nhóm Công cụ cho nhà phát triển rất mong nhận được ý kiến phản hồi của bạn tại crbug.com/364805393.

Nhật ký trò chuyện với AI

Giờ đây, bạn có thể khôi phục và xem các cuộc trò chuyện trước đây với Gemini trong bảng điều khiển Trợ lý AI bằng cách nhấp vào nút thêm Cuộc trò chuyện mới ở góc trên cùng bên trái của bảng điều khiển hoặc bằng cách sử dụng các nút Hỏi AI và các lựa chọn trong trình đơn của bảng điều khiển Mạng, Nguồn > thẻ Trang và Hiệu suất > thẻ Chính.

Để xem một trong những cuộc trò chuyện trước đây, hãy chọn câu lệnh tương ứng trong trình đơn thả xuống bên dưới nút nhật ký Nhật ký. Bảng điều khiển Trợ lý AI sẽ ghi nhớ nhật ký trò chuyện của bạn trong khi Công cụ cho nhà phát triển đang mở.

Quản lý bộ nhớ tiện ích trong phần Application > Storage (Ứng dụng > Bộ nhớ)

Tương tự như bộ nhớ cục bộ và bộ nhớ phiên, giờ đây, bạn có thể xem và thay đổi các mục trong bộ nhớ của tiện ích trong phần Ứng dụng > Bộ nhớ.

Vấn đề về Chromium: crbug.com/40963428.

Điểm cải tiến về 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.

Các giai đoạn tương tác trong chỉ số trực tiếp

Giờ đây, bạn có thể mở rộng các lượt tương tác trong chỉ số hiệu suất trực tiếp để xem thông tin chi tiết về các giai đoạn và thời gian của từng giai đoạn.

Như đã thông báo trong bài viết Tiện ích Web Vitals hiện có trong Công cụ cho nhà phát triển, việc phát hành các tính năng này đánh dấu sự kết thúc của việc hỗ trợ tiện ích Web Vitals.

Vấn đề về Chromium: crbug.com/369097528.

Thông tin chặn hiển thị trong thẻ Tóm tắt

Khi bạn chọn một yêu cầu mạng được đánh dấu bằng một hình tam giác màu đỏ trong mục Hiệu suất > Mạng, ngoài chú thích (được tái cấu trúc), thẻ Tóm tắt hiện cũng cho biết rằng yêu cầu này đang chặn quá trình hiển thị.

Hỗ trợ các sự kiện scheduler.postTask và mũi tên khởi tạo của các sự kiện đó

Giờ đây, mục Hiệu suất > Chính sẽ cho thấy các sự kiện scheduler.postTask() và các mũi tên khởi tạo sau đây giữa:

• Schedule postTask -> Fire postTask
• Schedule postTask -> Abort postTask

Vấn đề về Chromium: crbug.com/40775984.

Bảng điều khiển Ảnh động và thẻ Phần tử > Kiểu cải tiến

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Ảnh động và thẻ Thành phần > Kiểu.

Chuyển từ Elements > Styles (Thành phần > Kiểu) sang Animations (Ảnh động)

Thẻ Elements (Phần tử) > Styles (Kiểu) hiện đặt biểu tượng animation (ảnh động) Jump to Animations panel (Chuyển đến bảng điều khiển Ảnh động) bên cạnh giá trị của các thuộc tính animation, nhờ đó bạn có thể dễ dàng kiểm tra ảnh động tại đó.

Thông tin cập nhật theo thời gian thực trong thẻ Đã tính toán

Thẻ Elements (Phần tử) > Computed (Đã tính toán) hiện cập nhật các giá trị đã tính toán theo thời gian thực, chẳng hạn như khi ảnh động cập nhật các giá trị đó.

Mô phỏng áp suất tính toán trong Cảm biến

Giờ đây, bảng điều khiển Cảm biến cho phép bạn mô phỏng áp lực CPU Nominal, Fair, Serious và Critical.

Vấn đề về Chromium: crbug.com/362277525.

Các đối tượng JS có cùng tên được nhóm theo nguồn trong bảng điều khiển Bộ nhớ

Giờ đây, bảng Bộ nhớ sẽ phân biệt các đối tượng JS có cùng tên nhưng đến từ các nguồn khác nhau và nhóm chúng tương ứng.

Vấn đề về Chromium: crbug.com/357902505.

Giao diện mới cho phần cài đặt

Để điều chỉnh thiết kế giao diện người dùng cho phù hợp hơn, chế độ cài đặt Công cụ cho nhà phát triển hiện có giao diện gần giống với chế độ cài đặt Chrome. Cụ thể, các phần hiện được tách biệt bằng hình ảnh thành "thẻ".

Bảng điều khiển Thông tin chi tiết về hiệu suất không được dùng nữa và đã bị xoá khỏi Công cụ cho nhà phát triển

Tất cả các tính năng quan trọng và hữu ích trong bảng điều khiển Thông tin chi tiết về hiệu suất hiện đã có trong bảng điều khiển Hiệu suất, cụ thể là trong các chỉ số trực tiếp, thẻ bên Thông tin chi tiết và theo dõi Sự thay đổi bố cục. Vì vậy, phiên bản này sẽ ngừng dùng và xoá bảng điều khiển Thông tin chi tiết về hiệu suất khỏi Công cụ cho nhà phát triển.

Nhóm Công cụ cho nhà phát triển rất cảm ơn ý kiến phản hồi mà bạn đã cung cấp về việc ngừng sử dụng bảng điều khiển này và trải nghiệm gỡ lỗi hiệu suất tổng thể. Như thường lệ, chúng tôi rất mong nhận được ý kiến và quan điểm của bạn. Hãy tiếp tục gửi!

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:
  • Đã xoá giới hạn không cần thiết là 3 ký tự cho cụm từ tìm kiếm.
  • Thêm nút màn hình chính Màn hình chính để đưa bạn quay lại màn hình số liệu trực tiếp.
  • Đã sửa lỗi các phím tắt thu phóng dấu vết Shift+S/W bị hỏng trước đó.
• Phần tử > Kiểu:
  • Đã thêm anchor-center vào tính năng tự động hoàn thành 341991541.
  • Đã khắc phục lỗi trình chỉnh sửa hộp linh hoạt không dùng được cho các giá trị có 2 từ 341964645.
• Mạng: Giờ đây, các lỗi tìm nạp trước là cảnh báo màu vàng thay vì lỗi màu đỏ để chỉ định rằng việc hiển thị nội dung không bị ảnh hưởng 372055494.

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 more_vert 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.
• Để lại 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 về 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.