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

Sofia Emelianova
Sofia Emelianova

Gỡ lỗi 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ợ 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 các mục sau:

  • Yêu cầu mạng trong bảng điều khiển Mạng.
  • Một tệp trong thẻ Nguồn > Trang.
  • Một hoạt động trong kênh Hiệu suất > Chính.

Nút và tuỳ chọn Ask AI (Hỏi AI) trong phần Mạng, Nguồn và Hiệu suất.

Gemini sẽ xem xét ngữ 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 Hỗ trợ AI bằng cách nhấp vào nút Cuộc trò chuyện mới ở góc trên 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 tuỳ chọn trình đơn của bảng điều khiển Mạng, thẻ Nguồn > TrangHiệu suất > kênh Chính.

Để xem một trong các cuộc trò chuyện trước đó, hãy chọn lời nhắc tương ứng trong trình đơn thả xuống bên dưới nút 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 DevTools đang mở.

Nhật ký trò chuyện bằng AI trong trình đơn thả xuống bên dưới nút "Nhật ký".

Quản lý bộ nhớ tiện ích trong phần Ứ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 lưu trữ tiện ích trong mục Application (Ứng dụng) > Storage (Bộ nhớ).

Trước và sau khi thêm mục "Bộ nhớ tiện ích" vào bảng điều khiển Ứng dụng.

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 các giai đoạn đó.

Trước và sau khi thêm bảng chi tiết về các giai đoạn và thời gian của các giai đoạn đó vào các lượt tương tác.

Như đã thông báo trong bài viết Tiện ích Web Vitals, hiện có trong DevTools, 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 về yêu cầu chặn quá trình 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 hình tam giác màu đỏ trong kênh Hiệu suất > Mạng, thẻ Tóm tắt (bên cạnh chú giải công cụ (đã tái cấu trúc)) hiện cũng cho bạn biết rằng yêu cầu đó đang chặn hiển thị.

Trước và sau khi thêm thông tin chặn kết xuất vào thẻ Tóm tắt.

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

Giờ đây, kênh Hiệu suất > Chính sẽ hiển thị các sự kiện scheduler.postTask() và các mũi tên trình kích hoạt sau đây giữa:

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

Trước và sau khi thêm tính năng hỗ trợ cho các sự kiện scheduler.postTask và các mũi tên của trình khởi tạo.

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

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

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

Thẻ Elements (Thành phần) > Styles (Kiểu) hiện đặt nút 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 thuộc tính animation, nhờ đó, bạn có thể dễ dàng sửa đổi ảnh động ở đó.

Trước và sau khi thêm đường liên kết từ thẻ Kiểu vào bảng điều khiển Ảnh động.

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

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

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

Bảng điều khiển Cảm biến hiện cho phép bạn mô phỏng áp lực CPU Nominal, Fair, SeriousCritical.

Trước và sau khi thêm tuỳ chọn mô phỏng áp lực CPU vào bảng điều khiển Cảm biến.

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ớ

Bảng điều khiển Memory (Bộ nhớ) hiện phân biệt giữa các đối tượng JS có cùng tên đến từ nhiều nguồn và nhóm các đối tượng đó tương ứng.

Trước và sau khi nhóm các đối tượng JS có cùng tên theo nguồn.

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ụ của Chrome 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 phân tách rõ ràng thành "thẻ".

Trước và sau khi tách các phần 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ẻ thanh bên Thông tin chi tiết và kênh Thay đổi bố cục. Vì vậy, phiên bản này không dùng nữa 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 DevTools rất cảm ơn ý kiến phản hồi của bạn 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ư mọi khi, chúng tôi rất mong được nghe ý kiến và tìm hiểu 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 sửa lỗi và cải tiến đá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ự đối với cụm từ tìm kiếm.
    • Thêm nút Màn hình chính để đưa bạn trở lại màn hình số liệu trực tiếp.
    • Khắc phục các phím tắt thu phóng theo dấu Shift+S/W bị hỏng trước đó.
  • Elements (Thành phần) > Styles (Kiểu):
    • Thêm anchor-center để tự động hoàn thành 341991541.
    • Khắc phục lỗi trình chỉnh sửa flexbox không dùng được cho các giá trị gồm 2 từ 341964645.
  • Mạng: Các lỗi tìm nạp trước hiện là cảnh báo màu vàng hoặc 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 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.