MCP công cụ dành cho nhà phát triển Chrome

Hãy để Tác nhân mã hóa gỡ lỗi phiên trình duyệt của bạn bằng Chrome DevTools MCP

Chúng tôi đã đưa ra một cải tiến cho máy chủ Chrome DevTools MCP mà nhiều người trong số chúng tôi đã thực hiện. người dùng đã yêu cầu: khả năng các tác nhân mã hóa kết nối trực tiếp với phiên trình duyệt đang hoạt động.

Với cải tiến này, tác nhân mã hóa có thể:

1. Sử dụng lại phiên trình duyệt hiện có: Hãy tưởng tượng bạn muốn tác nhân mã hóa của mình để khắc phục sự cố bị kiểm soát sau quá trình đăng nhập. Tác nhân mã hóa của bạn bây giờ có thể truy cập trực tiếp phiên duyệt hiện tại của bạn mà không yêu cầu thêm đăng nhập.
2. Truy cập các phiên gỡ lỗi đang hoạt động: Tác nhân mã hóa hiện có thể truy cập phiên gỡ lỗi đang hoạt động phiên gỡ lỗi trong giao diện người dùng DevTools. Ví dụ: khi bạn phát hiện ra một yêu cầu mạng không thành công trong bảng điều khiển mạng Chrome DevTools, hãy chọn yêu cầu và yêu cầu đại lý mã hóa của bạn điều tra nó. Điều tương tự cũng hoạt động với các phần tử được chọn trong bảng Elements. Chúng tôi rất vui mừng về điều mới này khả năng chuyển đổi liền mạch giữa gỡ lỗi thủ công và gỡ lỗi được AI hỗ trợ.

Xem nó hoạt động:

Tính năng kết nối tự động là sự bổ sung cho những cách hiện có của Chrome DevTools MCP để kết nối với phiên bản Chrome. Lưu ý rằng bạn vẫn có thể:

• Chạy Chrome với hồ sơ người dùng dành riêng cho máy chủ Chrome DevTools MCP (hiện tại mặc định).
• Kết nối với phiên bản Chrome đang chạy bằng cổng gỡ lỗi từ xa.
• Chạy nhiều phiên bản Chrome riêng biệt với mỗi phiên bản chạy trong một hồ sơ tạm thời.

Cách thức hoạt động

Chúng tôi đã thêm một tính năng mới vào Chrome M144 (hiện đang ở giai đoạn Beta) cho phép Máy chủ MCP Chrome DevTools để yêu cầu kết nối gỡ lỗi từ xa. Cái mới này luồng được xây dựng dựa trên khả năng gỡ lỗi từ xa hiện có của Chrome. Theo mặc định, từ xa kết nối gỡ lỗi bị tắt trong Chrome. Các nhà phát triển phải rõ ràng trước tiên hãy bật tính năng này bằng cách truy cập chrome://inspect#remote-debugging.

Khi máy chủ MCP DevTools của Chrome được định cấu hình bằng --autoConnect tùy chọn, máy chủ MCP sẽ kết nối với phiên bản Chrome đang hoạt động và yêu cầu phiên gỡ lỗi từ xa. Để tránh bị các tác nhân độc hại lạm dụng, mỗi khi Máy chủ MCP Chrome DevTools yêu cầu phiên gỡ lỗi từ xa, Chrome sẽ hiển thị một hộp thoại cho người dùng và xin phép họ cho phép gỡ lỗi từ xa phiên. Ngoài ra, trong khi phiên gỡ lỗi đang hoạt động, Chrome hiển thị banner "Chrome đang được kiểm soát bởi phần mềm kiểm tra tự động" tại trên cùng.

Bắt đầu

Để sử dụng khả năng gỡ lỗi từ xa mới. Trước tiên bạn phải kích hoạt điều khiển từ xa gỡ lỗi trong Chrome rồi định cấu hình máy chủ Chrome DevTools MCP để sử dụng tính năng kết nối tự động mới.

Bước 1: Thiết lập gỡ lỗi từ xa trong Chrome

Trong Chrome (>=144), hãy thực hiện như sau để thiết lập gỡ lỗi từ xa:

1. Điều hướng tới chrome://inspect/#remote-debugging để bật gỡ lỗi từ xa.
2. Thực hiện theo giao diện người dùng của hộp thoại để cho phép hoặc không cho phép các kết nối gỡ lỗi đến.

Bước 2: Định cấu hình máy chủ MCP DevTools của Chrome để tự động kết nối với Phiên bản Chrome đang chạy

Để kết nối máy chủ chrome-devtools-mcp với phiên bản Chrome đang chạy, hãy sử dụng Đối số dòng lệnh --autoConnect cho nhóm máy chủ MCP.

Đoạn mã sau đây là cấu hình ví dụ cho gemini-cli:

{
 "mcpServers": {
 "chrome-devtools": {
 "lệnh": "npx",
 "args":  [
 "chrome-devtools-mcp@latest",
 "--autoConnect",
 "--channel=beta"
 ]
 
 

Bước 3: Kiểm tra thiết lập của bạn

Bây giờ hãy mở gemini-cli và chạy dấu nhắc sau:

Kiểm tra hiệu suất của https://developers.chrome.com

Máy chủ MCP DevTools của Chrome sẽ cố gắng kết nối với Chrome đang chạy của bạn ví dụ. Nó hiển thị hộp thoại yêu cầu sự cho phép của người dùng:

Nhấp vào Cho phép dẫn đến việc mở máy chủ Chrome DevTools MCP developers.chrome.com và biểu diễn dấu vết.

Để biết hướng dẫn đầy đủ, hãy xem README trên GitHub.

Hãy để tác nhân mã hóa của bạn đảm nhận phiên gỡ lỗi của bạn

Có thể kết nối với phiên bản Chrome trực tiếp có nghĩa là bạn không phải chọn giữa tự động hóa và điều khiển thủ công. Bạn có thể tự mình sử dụng DevTools hoặc tự tay qua tác vụ gỡ lỗi cho tác nhân mã hóa của bạn. Nếu bạn phát hiện ra một vấn đề trên trang web, bạn có thể mở DevTools để xem xét và xác định phần tử gây ra vấn đề. Nếu bạn muốn tác nhân mã hóa của mình khắc phục sự cố, bây giờ bạn có thể làm như vậy với Máy chủ MCP của Chrome DevTools. Bạn có thể chọn phần tử trong Bảng điều khiển các thành phần và yêu cầu tác nhân mã hóa điều tra vấn đề.

Điều tương tự cũng xảy ra với bảng Mạng. Bạn có thể chọn một yêu cầu mạng và hãy yêu cầu tác nhân mã hóa của bạn điều tra nó.

<điều khiển video="" width="3840" chiều cao="2160">

Nhưng đây chỉ là bước đầu tiên. Chúng tôi dự định sẽ dần dần phơi bày nhiều hơn nữa dữ liệu bảng cho các tác nhân mã hóa thông qua Máy chủ MCP DevTools của Chrome. Hãy theo dõi!