Chrome DevTools cho tác nhân AI (MCP)

• Bản xem trước công khai của máy chủ Chrome DevTools MCP đã được phát hành, cho phép các tác nhân lập trình AI sử dụng các tính năng gỡ lỗi và hiệu năng của Chrome DevTools
• Trước đây, tác nhân không thể kiểm tra kết quả thực thi mã, nhưng giờ đây có thể tận dụng dữ liệu thời gian chạy thực tế như mạng, console, DOM và theo dõi hiệu năng
• Với máy chủ DevTools MCP, có thể thực hiện nhiều dạng tự động hóa như xác minh mã theo thời gian thực, phân tích lỗi mạng·console, mô phỏng hành vi người dùng, gỡ lỗi style·layout, và kiểm tra hiệu năng tự động
• Nhà phát triển chỉ cần thêm máy chủ vào cấu hình ứng dụng khách MCP là có thể dùng ngay, và có thể chạy các tác vụ như kiểm tra LCP hoặc chẩn đoán lỗi gửi biểu mẫu bằng các prompt mẫu
• Google có kế hoạch mở rộng các tính năng MCP dựa trên phản hồi từ cộng đồng

---

Tổng quan

• Google đã phát hành bản xem trước công khai của máy chủ Chrome DevTools Model Context Protocol (MCP) mới
• Nhờ đó, trợ lý lập trình AI có thể trực tiếp sử dụng các tính năng gỡ lỗi và đo hiệu năng của Chrome DevTools ngay trong trình duyệt
• Nói cách khác, điều này giúp giải quyết khó khăn vốn phát sinh khi tác nhân lập trình không thể kiểm tra hành vi thực tế của mã đang chạy trong trình duyệt

Giới thiệu về Model Context Protocol (MCP)

• Model Context Protocol (MCP) là một tiêu chuẩn mã nguồn mở để kết nối các mô hình ngôn ngữ lớn (LLM) với công cụ bên ngoài và nguồn dữ liệu
• Máy chủ Chrome DevTools MCP sử dụng tiêu chuẩn này để liên kết với các tác nhân AI, hỗ trợ sử dụng nhiều công cụ như gỡ lỗi web và truy vết hiệu năng
• Ví dụ, với công cụ performance_start_trace, LLM có thể khởi chạy trình duyệt, thu thập và phân tích thông tin hiệu năng, rồi đề xuất các cải thiện
• Thông qua giao thức MCP, các tác nhân lập trình có thể nhận được sự hỗ trợ mạnh mẽ hơn trong việc phát triển website và xử lý sự cố
• Có thể xem chi tiết cách MCP hoạt động trong tài liệu MCP chính thức

Các trường hợp sử dụng chính

• Xác minh thay đổi mã theo thời gian thực

  • Sau khi AI tác nhân sửa mã, có thể dùng Chrome DevTools MCP để ngay lập tức kiểm tra hành vi trong trình duyệt
  • Prompt ví dụ:

    Verify in the browser that your change works as expected.  
    

• Chẩn đoán lỗi mạng và console

  • Hỗ trợ chẩn đoán tự động như phân tích yêu cầu mạng, phát hiện vấn đề CORS và kiểm tra log console
  • Prompt ví dụ:

    A few images on localhost:8080 are not loading. What's happening?  
    

• Mô phỏng hành vi người dùng

  • Hỗ trợ kiểm thử tự động các luồng sử dụng thực tế như điều hướng trong trình duyệt, điền biểu mẫu, nhấn nút và tái hiện lỗi
  • Prompt ví dụ:

    Why does submitting the form fail after entering an email address?  
    

• Gỡ lỗi vấn đề style và layout theo thời gian thực

  • Tự động đưa ra đề xuất chi tiết về các vấn đề layout như kiểm tra DOM, CSS và overflow
  • Prompt ví dụ:

    The page on localhost:8080 looks strange and off. Check what's happening there.  
    

• Tự động hóa kiểm tra hiệu năng

  • Tự động hóa truy vết hiệu năng của trình duyệt và phân tích
  • Prompt ví dụ:

    Localhost:8080 is loading slowly. Make it load faster.  
    

• Danh sách các công cụ MCP khả dụng có thể xem trong tài liệu tham chiếu công cụ chính thức

Cách bắt đầu

• Có thể tích hợp máy chủ Chrome DevTools MCP bằng cách thêm cấu hình sau vào ứng dụng khách MCP

  {  
    "mcpServers": {  
      "chrome-devtools": {  
        "command": "npx",  
        "args": ["chrome-devtools-mcp@latest"]  
      }  
    }  
  }  
  

• Có thể kiểm tra hoạt động bằng prompt mẫu

  Please check the LCP of web.dev.  
  

• Thông tin chi tiết và tài liệu được cung cấp trong tài liệu Chrome DevTools MCP trên GitHub

Kế hoạch tham gia và mở rộng

• Google dự định sẽ tiếp tục phát triển Chrome DevTools MCP bắt đầu từ đợt phát hành bản xem trước công khai này
• Công ty có kế hoạch quyết định các tính năng bổ sung trong tương lai thông qua việc thu thập ý kiến từ cộng đồng
• Google hoan nghênh tích cực ý kiến và sự tham gia từ cả người dùng công cụ hỗ trợ lập trình AI lẫn các nhà cung cấp công cụ phát triển AI thế hệ tiếp theo
• Có thể báo cáo yêu cầu cải tiến hoặc vấn đề phát hiện được qua GitHub Issues

[shakespeares]

Tôi tự hỏi liệu có điểm nào về trường hợp sử dụng mà nó tốt hơn Playwright hay không.
Nếu nhìn một cách đơn giản thì có vẻ vẫn còn khá đáng tiếc.