CyberAgent là một công ty CNTT hàng đầu tại Nhật Bản, cung cấp nhiều dịch vụ trực tuyến, trong đó có nền tảng blog Ameba nổi tiếng. Nhóm này gặp phải một thách thức đáng kể với các lỗi thời gian chạy khó phát hiện thông qua kiểm thử tự động, đòi hỏi phải có sự can thiệp thủ công tốn thời gian.
Tài liệu này khám phá cách CyberAgent sử dụng máy chủ Giao thức ngữ cảnh mô hình (MCP) của Chrome DevTools để chuyển từ quy trình thủ công sang quy trình tự động, giúp nhà phát triển tiết kiệm thời gian và cải thiện độ tin cậy của quy trình kiểm thử.
Thách thức: quy trình làm việc thủ công và hạn chế
Hệ thống thiết kế Ameba (Spindle) là một tập hợp các thành phần giao diện người dùng có thể tái sử dụng được dùng để xây dựng giao diện của nền tảng viết blog. Thư viện này dựa vào Storybook để phát triển và kiểm thử thành phần giao diện người dùng.
Trước đây, quy trình của CyberAgent để giải quyết lỗi thời gian chạy là một chu kỳ lặp lại theo cách thủ công. Nhà phát triển sẽ kiểm tra từng thành phần trong trình duyệt, áp dụng bản sửa lỗi rồi kiểm tra lại. Với số lượng lớn các trang và thành phần, việc dựa vào xác nhận trực quan này có những hạn chế, khiến việc phát hiện mọi lỗi trở nên khó khăn.
Giải pháp: Gỡ lỗi tác nhân bằng MCP của Công cụ của Chrome cho nhà phát triển
Để vượt qua thách thức này, nhóm đã chuyển sang sử dụng máy chủ MCP của Công cụ cho nhà phát triển của Chrome. Sau khi thiết lập đơn giản bằng hướng dẫn chính thức về cách bắt đầu, họ có thể ngay lập tức hướng dẫn một tác nhân AI (Claude) tự động hoá toàn bộ quy trình gỡ lỗi.
Chỉ với một câu lệnh, tác nhân có thể tương tác với Công cụ cho nhà phát triển bằng cách xử lý thông tin về trạng thái trình duyệt do MCP của Công cụ cho nhà phát triển Chrome ghi lại; truy cập vào ngữ cảnh hệ thống tệp và đọc nhật ký bảng điều khiển. Sau đó, hệ thống tự động xác định lỗi và triển khai các bản sửa lỗi mà không cần can thiệp thủ công.
Câu lệnh ban đầu mà họ sử dụng là:
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
Tác nhân AI tiến hành kiểm tra phiên bản Storybook, điều hướng qua toàn bộ câu chuyện để đọc lỗi, áp dụng các nội dung chỉnh sửa mã và xác nhận thành công của từng bản sửa lỗi.
Tác động: từ quy trình kiểm tra thủ công đến quy trình sửa lỗi tự động
Kết quả thu được rất nhanh. Trong khoảng một giờ, tác nhân AI đã tự động kiểm tra tất cả 32 thành phần và 236 câu chuyện trong hệ thống thiết kế của Spindle.
Mặc dù tác nhân đã xác định và khắc phục một lỗi thời gian chạy và hai cảnh báo, nhưng giá trị thực của thử nghiệm nằm ở sự đảm bảo về mặt tiêu cực: Xác nhận rằng phần lớn thư viện không có lỗi mà không yêu cầu nhà phát triển nhấp qua hàng trăm trạng thái theo cách thủ công.
Trước đây, loại quy trình kiểm tra toàn diện này rất tốn công sức và dễ bị bỏ sót. Bằng cách chuyển công việc này sang MCP của Công cụ của Chrome cho nhà phát triển, CyberAgent đã đạt được những điều sau:
- Đảm bảo 100% nội dung được kiểm tra: Công cụ này đã tự động xác minh từng câu chuyện, đảm bảo rằng các thành phần "sạch" thực sự sạch, một mức độ siêng năng khó duy trì theo cách thủ công.
- Không có trường hợp âm tính giả: Không giống như các bộ kiểm thử tự động có thể bỏ lỡ các điểm bất thường về thời gian chạy trực quan, máy chủ MCP cho phép tác nhân xác thực trạng thái thực tế của trình duyệt, đảm bảo độ tin cậy cao.
- Giảm tải nhận thức: Nhà phát triển có thể tin tưởng hệ thống sẽ xử lý "công việc vặt" lặp đi lặp lại, cho phép họ tập trung vào logic phức tạp thay vì các quy trình kiểm tra định kỳ.
Như nhà phát triển web Kota Yanagi đã lưu ý, lợi ích của việc này là sự thay đổi trong trách nhiệm:
"Rất thuận tiện khi có thể chuyển các lỗi thời gian chạy và kiểm tra cảnh báo mà trước đây tôi phải thực hiện theo cách thủ công trong trình duyệt. Tôi cũng thích việc giờ đây tôi có thể mô tả các thao tác phức tạp bằng ngôn ngữ tự nhiên và để công cụ này chuyển từ việc đọc nhật ký lỗi sang khắc phục vấn đề ngay lập tức."
Thành công của quy trình tự động này thậm chí đã giúp CyberAgent cập nhật Hướng dẫn về các tác nhân Spindle nội bộ cho các tác nhân AI của họ. Hướng dẫn này hiện thiết lập MCP của Công cụ cho nhà phát triển Chrome làm máy chủ gỡ lỗi mặc định cho Claude (trợ lý AI của họ), chính thức hoá việc sử dụng MCP như một phương pháp hay nhất và thể hiện sự tin tưởng của họ vào quy trình mới dựa trên AI này.
Các bản sửa lỗi cụ thể đã được triển khai trong 2 yêu cầu kéo mà bạn có thể xem xét trên GitHub:
CyberAgent tiếp tục cải tiến câu lệnh và xuất bản kết quả cuối cùng này.
Ý kiến phản hồi và kế hoạch trong tương lai
CyberAgent hài lòng với tính linh hoạt và số lượng lựa chọn có trong MCP của Chrome DevTools. Họ cũng đưa ra ý kiến phản hồi có giá trị cho những điểm cải thiện trong tương lai, lưu ý rằng mặc dù công cụ này rất mạnh mẽ, nhưng việc sử dụng các tính năng nâng cao hơn của công cụ đòi hỏi người dùng phải có một trình độ kiến thức nhất định.
Trong tương lai, nhóm muốn tích hợp sâu hơn với bảng điều khiển Hiệu suất của Công cụ cho nhà phát triển. Họ hình dung một quy trình làm việc trong đó một tác nhân có thể xác thực Chỉ số quan trọng chính của trang web, sau đó tiến hành phân tích hiệu suất chuyên sâu hơn bằng cách sử dụng bảng điều khiển Hiệu suất để phân tích và đề xuất các điểm cải thiện.
Kazunari Hara, Chuyên gia phát triển tại CyberAgent, đã bày tỏ sự kinh ngạc của mình, đồng thời nhấn mạnh tính hiệu quả và tiềm năng ứng dụng của công cụ này trong tương lai:
"Tôi rất ngạc nhiên khi thấy trình duyệt tự động sửa lỗi ngay từ nhật ký. Những tác vụ từng bị bỏ lỡ hoặc mất nhiều thời gian giờ đây có thể được tự động hoá một cách đáng tin cậy, giúp cải thiện hiệu quả phát triển. Vì MCP của Công cụ cho nhà phát triển Chrome cung cấp rất nhiều tính năng trong môi trường thời gian chạy thực, nên tôi hy vọng công cụ này sẽ hữu ích trong nhiều tình huống khác nhau trong tương lai."
Kết luận
Bằng cách tích hợp MCP của Chrome DevTools vào quy trình làm việc, CyberAgent đã tự động hoá thành công một tác vụ gỡ lỗi phức tạp và tốn thời gian. Kinh nghiệm của họ cho thấy tiềm năng to lớn của các công cụ dựa trên AI trong việc tăng năng suất của nhà phát triển.
Quá trình này đã đạt được mức độ tự động hoá hoàn toàn, giúp loại bỏ nhu cầu kiểm tra thủ công và đảm bảo không bỏ sót lỗi. Mặc dù việc triển khai hiện tại đã chứng minh được giá trị của mình, nhưng ý kiến phản hồi từ CyberAgent cho thấy một tương lai thú vị, trong đó MCP của Công cụ cho nhà phát triển Chrome có thể cho phép họ thực hiện các tác vụ phân tích và tối ưu hoá hiệu suất tinh vi hơn nữa ngay trong trình duyệt.