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

Phiên bản Google I/O 2025

Công cụ của Chrome cho nhà phát triển sẽ có mặt nổi bật tại 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 những nội dung sau:

• Tính năng mới trong Chrome, ngày 20 tháng 5 năm 2025 | 3:30 chiều theo giờ Thái Bình Dương
• Làm được nhiều việc hơn với Chrome DevTools và ít phải dùng tổ hợp phím CTRL + TAB hơn
• 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 Hội thảo về tính năng mới trên web của Rachel Andrew vào lúc 4:30 chiều (giờ Thái Bình Dương) ngày 20 tháng 5 năm 2025.

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 mới nhất:

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

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

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 thư mục không gian làm việc đã kết nối, trong bảng điều khiển Elements (Thành phần), hãy nhấp vào Ask AI (Hỏi AI), yêu cầu Gemini sửa đổi CSS, nhấp vào Continue (Tiếp tục) để kiểm thử trực tiếp các thay đổi, sau đó mở rộng Unsaved changes (Thay đổi chưa lưu), nhấp vào Apply to workspace (Áp dụng cho không gian làm việc), xem lại nội dung thay đổi rồi nhấp vào Save all (Lưu tất cả).

Kết nối thư mục 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 thủ công) kết nối một thư mục 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.

Hãy 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

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

• 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 làm thay đổi bố cục
• Độ trễ khi yêu cầu tài liệu

Vui lòng để lại ý kiến phản hồi về tính năng này tại crbug.com/371170842.

Chú thích các phát hiện 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 kênh Main (Chính), rồi nhấp vào Generate label (Tạo nhãn) bên cạnh trường nhập. Gemini có thể đề xuất một nhãn dựa trên dấu vết ngăn xếp và ngữ 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ợ giúp bằng 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 trang và gửi ảnh đó đến cuộc trò chuyện với Gemini.

Bạn có thể sử dụng ảnh chụp màn hình để cung cấp thêm ngữ cảnh hình ảnh cho lời nhắc, ví dụ: để 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 cung cấp hai 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 trong phần theo dõi Mạng các yêu cầu đối với các mô-đun JavaScript trùng lặp lớn trong gói của bạn nếu có trên trang.

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

JavaScript cũ

Thẻ mới Hiệu suất > Thông tin chi tiết > JavaScript cũ sẽ làm nổi bật trong phần theo dõi Mạng các yêu cầu về JavaScript cũ nếu có trên trang của bạn, ví dụ: các polyfill và transform cho phép 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.

Thông tin suy đoán hiện hỗ trợ thẻ quy tắc

Application (Ứng dụng) > Speculative loads (Tải dự đoán) hiện hiển thị 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 điều khiển Lighthouse hiện chạy Lighthouse 12.6.0.

Điểm đáng chú ý nhất trong phiên bản này là Lighthouse sẽ chuyển sang 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.

Xem thêm danh sách đầy đủ các thay đổi.

Để tìm hiểu kiến thức 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: 40543651.

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:

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

Hỗ trợ tiếp cận

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

• Hiệu suất: Các mũi tên của trình khởi tạo trong dấu vết hiện hiển thị rõ ràng hơn.
• Elements (Thành phần): 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 đề về Chromium: 40888478).

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

  • "Đã sao chép vào bảng nhớ tạm" khi bạn sao chép từ các khối mã.
  • "Á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 Trợ lý AI.
  • "Tạo nhãn" khi bạn yêu cầu AI tạo nhãn trong phần Hiệu suất > Chú thích.
  • Xin lưu ý rằng có các câu lệnh gợi ý trong cuộc trò chuyện Trợ giúp bằng AI.
  • Đọc số tiền tiết kiệm ước tính cho các 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 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 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, 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.

• 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.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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 viết Tính năng mới trong DevTools.