Tính năng mới trong DevTools, Chrome 137

Google I/O 2025

Chrome DevTools sẽ có mặt tại sự kiện Google I/O năm nay. Sẽ có cả các phiên trực tiếp và các phiên được ghi lại.

Để tìm hiểu về các tính năng mới thú vị, hãy theo dõi:

• Tính năng mới trong Chrome, ngày 20 tháng 5 năm 2025 | 15:30 (giờ Thái Bình Dương)
• Làm được nhiều việc hơn với Công cụ của Chrome cho nhà phát triển và ít dùng tổ hợp phím CTRL + TAB
• Gỡ lỗi hiệu suất trong Công cụ cho nhà phát triển

Ngoài ra, đừng quên theo dõi phiên Có gì mới trên web của Rachel Andrew vào lúc 4:30 chiều ngày 20 tháng 5 năm 2025 (giờ Thái Bình Dương).

Hãy xem video mới nhất của chúng tôi để nắm bắt nhanh những điểm nổi bật gần đây nhất:

Sửa đổi và lưu các thay đổi về CSS vào không gian làm việc bằng Gemini

Chỉ bằng vài cú nhấp chuột, bạn có thể yêu cầu Gemini sửa đổi và khắc phục CSS cho bạn, đồng thời lưu các thay đổi trở lại tệp nguồn trên máy tính thông qua thư mục không gian làm việc được kết nối.

Không gian làm việc tự động là một tính năng thử nghiệm. Bạn có thể kết nối thư mục nguồn hiện có hoặc thử bản minh hoạ.

Khi kết nối một thư mục trong không gian làm việc, trong bảng Phần tử, hãy nhấp vào Hỏi AI, yêu cầu Gemini sửa đổi CSS, nhấp vào Tiếp tục để kiểm thử các thay đổi trực tiếp, sau đó mở rộng Các thay đổi chưa lưu, nhấp vào Áp dụng cho không gian làm việc, xem xét sự khác biệt rồi nhấp vào Lưu tất cả.

Kết nối một thư mục trong không gian làm việc và lưu các thay đổi vào tệp nguồn

Giờ đây, bạn có thể tự động (hoặc theo cách thủ công) kết nối một thư mục trong không gian làm việc để cho phép DevTools lưu các thay đổi về JavaScript, HTML và CSS trở lại các tệp nguồn được lưu trữ trên máy tính của bạn.

Xem cách hoạt động của tính năng này với JavaScript:

Vấn đề về Chromium: 404170628.

Hỏi Gemini về thông tin chi tiết về hiệu suất

Giờ đây, chỉ cần nhấp vào một nút, bạn có thể bắt đầu trò chuyện với Gemini để tìm hiểu và hành động dựa trên những thông tin chi tiết sau đây về hiệu suất:

• LCP theo giai đoạn
• Phát hiện yêu cầu LCP
• Yêu cầu chặn quá trình hiển thị
• Nguyên nhân gây ra hiện tượng thay đổi bố cục
• Độ trễ khi yêu cầu tài liệu

Bạn có thể gửi ý kiến phản hồi về tính năng này tại crbug.com/371170842.

Chú thích kết quả về hiệu suất bằng Gemini

Giờ đây, bạn có thể yêu cầu Gemini tạo chú thích về các sự kiện trong dấu vết hiệu suất.

Nhấp đúp vào một sự kiện trong bản nhạc Chính, sau đó nhấp vào Tạo nhãn bên cạnh trường nhập. Gemini có thể đề xuất nhãn dựa trên dấu vết ngăn xếp và bối cảnh.

Thêm ảnh chụp màn hình vào cuộc trò chuyện với Gemini

Trong bảng điều khiển Trợ lý AI, giờ đây, bạn có thể nhấp vào nút photo_camera Chụp ảnh màn hình để chụp ảnh màn hình của trang và gửi ảnh đó cho cuộc trò chuyện của bạn với Gemini.

Bạn có thể dùng ảnh chụp màn hình để cung cấp thêm bối cảnh trực quan cho câu lệnh, chẳng hạn như để kiểm tra xem tất cả các nút hiển thị có cùng khoảng cách hay không.

Thông tin chi tiết mới trong bảng điều khiển Hiệu suất

Phiên bản này mang đến 2 thông tin chi tiết mới cho bảng điều khiển Hiệu suất: JavaScript trùng lặp và JavaScript cũ.

JavaScript trùng lặp

Mục Hiệu suất > Thông tin chi tiết > JavaScript trùng lặp mới sẽ làm nổi bật các yêu cầu đối với các mô-đun JavaScript trùng lặp lớn trong các gói của bạn trong dấu vết Mạng nếu có trên trang của bạn.

Bạn cũng có thể nhấp vào Xem biểu đồ cây trong thông tin chi tiết để khám phá các phần phụ thuộc JavaScript.

JavaScript cũ

Mục Hiệu suất > Thông tin chi tiết > JavaScript cũ mới sẽ làm nổi bật các yêu cầu đối với JavaScript cũ trong dấu vết Mạng nếu có trên trang của bạn, chẳng hạn như polyfill và transform cho phép các trình duyệt cũ sử dụng các tính năng mới của JavaScript. Tuy nhiên, nhiều tính năng không cần thiết cho trình duyệt hiện đại.

Hoạt động suy đoán hiện hỗ trợ thẻ quy tắc

Mục Ứng dụng > Tải suy đoán hiện hiển thị các thẻ thay vì URL cho các nhóm quy tắc (nếu có thẻ).

Vấn đề về Chromium: 393408589.

Lighthouse 12.6.0

Bảng Lighthouse hiện chạy Lighthouse 12.6.0.

Đáng chú ý nhất trong phiên bản này, Lighthouse sẽ chuyển sang các bài kiểm tra thông tin chi tiết về hiệu suất. Trong danh mục Hiệu suất của báo cáo Lighthouse, giờ đây, bạn có thể Thử thông tin chi tiết.

Bạn cũng có thể 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: 40543651.

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:

• Mạng: Đã thêm quy trình phân tích cú pháp cho các định dạng đã biết về thời gian của máy chủ.
• Giờ đây, bạn có thể bỏ chọn các hàng trong bảng bằng cách nhấn tổ hợp phím Cmd/Ctrl + nhấp (vấn đề về Chromium: 409474445).
• Hiệu suất > Thông tin chi tiết > Sử dụng thời gian tồn tại hiệu quả của bộ nhớ đệm hiện bỏ qua những tài sản có TTL bằng hoặc dài hơn 30 ngày.

Hỗ trợ tiếp cận

Phiên bản này mang đến những điểm cải thiện sau đây về khả năng hỗ trợ tiếp cận:

• Hiệu suất: Giờ đây, các mũi tên của trình khởi tạo trong dấu vết sẽ hiển thị rõ ràng hơn.
• Phần tử: Giờ đây, bạn có thể bật/tắt chế độ xem cây hỗ trợ tiếp cận toàn trang bằng phím tắt A (Vấn đề trên Chromium: 40888478).

• Giờ đây, trình đọc màn hình sẽ thông báo, trong số những nội dung khác:

  • "Đã sao chép vào bảng nhớ tạm" khi bạn sao chép từ các khối mã.
  • "Đang áp dụng cho không gian làm việc" khi bạn áp dụng các thay đổi cho không gian làm việc của mình trong cuộc trò chuyện với trợ lý AI.
  • "Đang tạo nhãn" khi bạn yêu cầu AI tạo nhãn trong mục Hiệu suất > Chú thích.
  • Xin lưu ý rằng có các câu lệnh đề xuất trong cuộc trò chuyện trợ lý AI.
  • Đọc mức tiết kiệm ước tính để biết thông tin chi tiết có liên quan trong mục Hiệu suất > Thông tin chi tiết.

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.