Chrome DevTools cho tác nhân cho phép tác nhân mã hoá của bạn phân tích và khắc phục tình trạng rò rỉ bộ nhớ phía máy khách (bao gồm cả JavaScript và WebAssembly) trong ứng dụng. Bằng cách tự động hoá việc thu thập và phân tích snapshot của vùng nhớ heap, tác nhân của bạn có thể xác định chính xác các đối tượng không được thu gom rác đúng cách và đề xuất tái cấu trúc mã có mục tiêu.
Trong quy trình làm việc dựa trên tác nhân, tác nhân lập trình của bạn sẽ chụp nhiều ảnh nhanh trên các trạng thái ứng dụng khác nhau và sử dụng các công cụ phân tích chuyên biệt.
Bật công cụ gỡ lỗi bộ nhớ
Theo mặc định, Chrome DevTools cho tác nhân chỉ hiển thị công cụ take_heapsnapshot. Các công cụ phân tích snapshot của vùng nhớ heap (ví dụ: compare_heapsnapshots, get_heapsnapshot_summary và get_heapsnapshot_retaining_paths) chỉ có sẵn khi bạn khởi động máy chủ bằng cờ --memoryDebugging. Nếu không có cờ này, tác nhân của bạn có thể chụp ảnh nhanh nhưng không thể phân tích ảnh nhanh.
Để bật các công cụ gỡ lỗi bộ nhớ, hãy thêm --memoryDebugging vào đối số máy chủ:
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
Để biết thêm các lựa chọn, hãy xem phần Cấu hình.
Các mẫu rò rỉ bộ nhớ phổ biến
Phân tích bộ nhớ tập trung vào việc tìm các mẫu rò rỉ phổ biến, bao gồm:
- Trình nghe sự kiện chưa được xoá: Trình nghe sự kiện được đính kèm vào các đối tượng chung (như
windowhoặcdocument) ngăn chặn việc thu gom rác. - Nút DOM đã tách: Các nút bị xoá khỏi cây tài liệu nhưng vẫn được một biến JavaScript tham chiếu.
- Biến toàn cục không chủ ý: Các biến được khai báo mà không có phạm vi thích hợp và tồn tại vĩnh viễn trong bộ nhớ.
- Closure: Closure vô tình giữ lại tham chiếu đến các đối tượng lớn trong phạm vi của riêng chúng.
- Cấu trúc dữ liệu không giới hạn: Cấu trúc dữ liệu dùng để lưu vào bộ nhớ đệm và tăng lên không giới hạn.
Những điểm cần cân nhắc khi phân tích bộ nhớ
Khi sử dụng tính năng phân tích bộ nhớ, hãy lưu ý những điều sau:
Không đọc trực tiếp ảnh chụp nhanh thô: Không cho phép tác nhân đọc trực tiếp các tệp
.heapsnapshotthô. Chúng quá lớn và vượt quá giới hạn ngữ cảnh. Kỹ năng gỡ lỗi rò rỉ bộ nhớ hướng dẫn rõ ràng cho các tác nhân tránh đọc các tệp này.Phương pháp 3 ảnh chụp nhanh: Để tìm ra các rò rỉ một cách đáng tin cậy, tác nhân của bạn thường cần chụp 3 ảnh chụp nhanh: một ảnh chụp nhanh cơ sở trước khi thực hiện hành động, một ảnh chụp nhanh mục tiêu sau khi thực hiện hành động và một ảnh chụp nhanh cuối cùng sau khi đảo ngược hành động. Xin lưu ý rằng một số hành động, chẳng hạn như hành động do bộ hẹn giờ (
setTimeout) hoặc ảnh động (requestAnimationFrame) kích hoạt, sẽ xảy ra mà không có sự tương tác của người dùng và có thể không yêu cầu bước đảo ngược.Xin lưu ý rằng một số hành động, chẳng hạn như hành động do bộ hẹn giờ (
setTimeout) hoặc ảnh động (requestAnimationFrame) kích hoạt, xảy ra mà không có hoạt động tương tác của người dùng và vẫn có thể làm tăng mức sử dụng bộ nhớ.Xác minh trước khi sửa: Luôn xem xét các phát hiện của tác nhân để đảm bảo các hành động được đề xuất của tác nhân có thể áp dụng và chính xác cho logic của ứng dụng. Ví dụ: xác nhận xem một nút tách rời có phải là một phần của bộ nhớ đệm có chủ đích hay không trước khi hướng dẫn tác nhân vô hiệu hoá các tệp đối chiếu.
Các trường hợp sử dụng để phân tích rò rỉ bộ nhớ
Hướng dẫn tác nhân lập hồ sơ bộ nhớ trong các hành động lặp lại, bao gồm cả bộ hẹn giờ và hoạt động tương tác của người dùng, thay vì chụp nhanh và so sánh theo cách thủ công. Tích hợp tính năng phân tích bộ nhớ vào quy trình gỡ lỗi bằng các quy trình công việc này.
Lưu ý: Các bước thực thi của tác nhân là ví dụ về hành vi tiềm năng. Tác nhân của bạn có thể hành động theo cách khác.
Phát hiện trình nghe sự kiện chưa được xoá trong quá trình điều hướng
Các ứng dụng một trang (SPA) thường bị rò rỉ bộ nhớ khi nhà phát triển quên xoá trình nghe sự kiện chung sau khi một thành phần huỷ gắn kết. Bạn có thể giao cho tác nhân của mình nhiệm vụ xác minh rằng bộ nhớ được giải phóng đúng cách khi điều hướng giữa các khung hiển thị.
Câu lệnh mẫu:
Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.
Ví dụ về quá trình thực thi tác nhân: Tác nhân của bạn chụp nhanh một snapshot của vùng nhớ heap cơ sở trên trang chủ, chuyển đến trang tổng quan rồi chuyển về trang chủ để chụp nhanh một snapshot cuối cùng. Sau đó, Gemini sử dụng các công cụ phân tích nội bộ để đánh giá ảnh chụp nhanh, phát hiện thấy trình nghe scroll đính kèm vào đối tượng window chưa bao giờ được xoá và cung cấp mã cụ thể để gọi removeEventListener trong hàm dọn dẹp của thành phần.
Xác định các nút DOM đã tách rời trong thành phần giao diện người dùng
Cửa sổ phụ, trình đơn thả xuống và các thành phần giao diện người dùng phức tạp thường để lại các nút DOM tách rời nếu tham chiếu đến các nút đó được giữ trong các biến JavaScript sau khi chúng bị xoá khỏi DOM.
Câu lệnh mẫu:
Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.
Ví dụ về quá trình thực thi tác nhân: Tác nhân của bạn tương tác với phương thức cài đặt trong khi thu thập các ảnh chụp nhanh cơ sở, mục tiêu và cuối cùng cần thiết. Phân tích cho thấy một số đối tượng đang tăng lên được gắn nhãn là Detached HTMLDivElement. Tác nhân thông báo cho bạn về kết quả tìm được và yêu cầu bạn xác nhận trước khi thay đổi mã để đặt các biến chứa các tham chiếu DOM thành null.
Tìm bộ nhớ đệm không giới hạn trong các hoạt động tương tác liên tục
Các tính năng như cuộn vô hạn hoặc tìm nạp dữ liệu liên tục có thể làm rò rỉ bộ nhớ nếu các mảng hoặc bản đồ cơ bản tăng vô hạn mà không có giới hạn.
Câu lệnh mẫu:
Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.
Ví dụ về cách thực thi tác nhân: Tác nhân của bạn phân tích trạng thái bộ nhớ trước và sau khi cuộn. Nó xác định một hàm đóng vô tình thu thập một mảng lớn phát triển không giới hạn. Tác nhân đề xuất triển khai giới hạn lưu vào bộ nhớ đệm hoặc sử dụng WeakMap cho dữ liệu liên kết với vòng đời của đối tượng để cho phép thu gom rác đúng cách.
Gỡ lỗi rò rỉ bộ nhớ trong các tiến trình nền
Bộ hẹn giờ ảnh động và bộ hẹn giờ nền có thể làm rò rỉ bộ nhớ mà không cần người dùng tương tác rõ ràng. Bạn có thể hướng dẫn tác nhân theo dõi mức tăng trưởng bộ nhớ theo thời gian để tìm lỗi rò rỉ bộ nhớ cho các quy trình này.
Câu lệnh mẫu:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
Ví dụ về cách thực thi tác nhân: Tác nhân của bạn khám phá ứng dụng canvas và tự động chụp nhanh định kỳ để theo dõi mức sử dụng bộ nhớ theo thời gian. Công cụ này phân tích vùng nhớ khối xếp và xác định rằng vòng lặp kết xuất sẽ đẩy các lưới WebGL mới vào một mảng trên mỗi khung hình mà không thu gom rác các lưới trước đó, đề xuất các phương án tối ưu hoá để sử dụng lại đối tượng.