Cách sử dụng Chrome DevTools MCP Server

Gỡ lỗi luôn là trọng tâm của phát triển web, nhưng với sự phát triển của các trợ lý mã hóa AI, các nhà phát triển phải đối mặt với một thách thức mới: làm thế nào để các tác nhân này thực sự nhìn thấy và tương tác với mã mà chúng tạo ra? Giới thiệu chrome dev tools mcp server—một cách mới để kết nối các trợ lý mã hóa AI của bạn với DevTools của Chrome để gỡ lỗi theo thời gian thực, hiểu biết sâu sắc về hiệu suất và kiểm thử luồng người dùng.

Hướng dẫn này sẽ hướng dẫn bạn về chrome dev tools mcp server là gì, cách nó hoạt động, tại sao nó quan trọng và quan trọng nhất là cách cài đặt và sử dụng nó trong VS Code, gemini cli và Cursor. Đến cuối cùng, bạn sẽ biết cách tích hợp môi trường gỡ lỗi mạnh mẽ của Chrome vào quy trình phát triển có sự hỗ trợ của AI của mình.

💡

Bạn muốn một công cụ Kiểm thử API tuyệt vời có thể tạo ra Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, tất cả trong một cho Nhóm nhà phát triển của bạn để làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi yêu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!

button

Chrome Dev Tools MCP Server là gì?

Model Context Protocol (MCP) là một tiêu chuẩn mã nguồn mở cho phép các mô hình ngôn ngữ lớn (LLM) kết nối với các công cụ và nguồn dữ liệu bên ngoài. chrome dev tools mcp server mang sức mạnh gỡ lỗi của Chrome DevTools trực tiếp vào tác nhân AI của bạn.

Thay vì tạo mã một cách “mù quáng,” trợ lý AI của bạn giờ đây có thể:

Khởi chạy Chrome và mở một trang web.
Thu thập dấu vết hiệu suất trực tiếp.
Kiểm tra DOM, CSS và môi trường chạy JavaScript.
Gỡ lỗi các vấn đề về bố cục, mạng và console.
Mô phỏng hành vi người dùng như nhấp chuột, gửi biểu mẫu và điều hướng.

Điều này làm cho tác nhân mã hóa AI hiệu quả hơn nhiều vì nó có thể xác thực, kiểm thử và tối ưu hóa các thay đổi mã theo thời gian thực, thay vì đoán xem điều gì có thể hoạt động.

Tại sao nên sử dụng Chrome Dev Tools MCP Server?

Dưới đây là các trường hợp sử dụng chính để tích hợp chrome dev tools mcp server vào quy trình làm việc của bạn:

1. Xác minh thay đổi mã theo thời gian thực
Tạo bản sửa lỗi bằng trợ lý AI của bạn và xác nhận chúng hoạt động ngay lập tức trong trình duyệt.

Ví dụ về lời nhắc: “Xác minh trong trình duyệt rằng thay đổi của bạn hoạt động như mong đợi.”

2. Chẩn đoán lỗi mạng và console
Xác định các vấn đề CORS, lỗi API hoặc cảnh báo thời gian chạy không mong muốn.

Ví dụ về lời nhắc: “Một vài hình ảnh trên localhost:8080 không tải được. Chuyện gì đang xảy ra vậy?”

3. Mô phỏng hành vi người dùng
Tự động hóa các luồng người dùng như gửi biểu mẫu hoặc điều hướng để tái tạo lỗi.

Ví dụ về lời nhắc: “Tại sao việc gửi biểu mẫu lại thất bại sau khi nhập địa chỉ email?”

4. Gỡ lỗi các vấn đề về kiểu dáng và bố cục trực tiếp
Kiểm tra DOM và CSS để tìm lỗi tràn, sai lệch hoặc các vấn đề hiển thị.

Ví dụ về lời nhắc: “Trang trên localhost:8080 trông lạ. Kiểm tra xem có chuyện gì đang xảy ra ở đó.”

5. Tự động hóa kiểm tra hiệu suất
Kích hoạt các kiểm tra kiểu Lighthouse trực tiếp thông qua trợ lý AI.

Ví dụ về lời nhắc: “Localhost:8080 đang tải chậm. Hãy làm cho nó tải nhanh hơn.”

Cách cài đặt Chrome Dev Tools MCP Server

Cài đặt rất đơn giản cho dù bạn đang sử dụng VS Code, Gemini CLI và Cursor.

1. Cài đặt trong VS Code

Mở VS Code
Nhấn Ctrl + Shift + P (trên Windows hoặc Linux) hoặc Cmd + Shift + P (đối với Mac).
Bây giờ, tìm kiếm “MCP” và nhấp vào “Add MCP Server.”
Chọn “Browse MCP Servers.”

Trong thanh bên dưới Extensions, nhấp lại vào “Browse MCP Servers”. Bạn sẽ được chuyển hướng đến một trang web liệt kê các máy chủ MCP có sẵn.
Trên trang web đó, tìm kiếm “Chrome Dev Tools MCP Server” bằng từ khóa "chrome."

Nhấp vào Install, sau đó chọn “Install in VS Code.”

Sau khi cài đặt, trợ lý AI của VS Code của bạn sẽ có thể kết nối với Chrome để gỡ lỗi trực tiếp.

Install Chrome Dev Tools MCP Server in VS Code

2. Cài đặt trong Cursor

Mở Cursor Editor.
Vào Cài đặt > Công cụ & MCP.

Cuộn xuống và nhấp vào New MCP Server.
Thao tác này sẽ mở tệp JSON cấu hình MCP, nơi bạn sẽ phải dán cấu hình MCP sau:

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

Sau đó lưu và khởi động lại Cursor.

Bây giờ, Cursor sẽ nhận dạng máy chủ chrome dev tools mcp và kết nối nó với trợ lý mã hóa AI của bạn để gỡ lỗi.

3. Cài đặt trong Gemini (Khuyến nghị)

Nếu bạn đang sử dụng Gemini, bạn cũng có thể kết nối nó với chrome dev tools mcp server. Trên thực tế, Chrome đặc biệt khuyến nghị bật tính năng này trong Gemini để tận dụng tối đa khả năng gỡ lỗi và kiểm tra của nó.

Đầu tiên, định vị tệp settings.json trong thư mục .gemini trong thư mục gốc của người dùng. Đây là nơi chúng ta sẽ thêm cấu hình MCP của mình. Bạn có thể thực hiện việc này theo hai cách:

1. Điều hướng thủ công qua các thư mục của bạn:

Tìm thư mục .gemini trong hồ sơ người dùng của bạn và sau đó mở tệp settings.json bằng trình chỉnh sửa mã của bạn (ví dụ: vs code).

2. Sử dụng terminal:

Vào thư mục gốc và mở thư mục .gemini bằng các lệnh dưới đây:

cd ~
cd .gemini

Bên trong thư mục .gemini, mở tệp settings.json bằng vs code bằng lệnh:

code settings.json

3. Thêm Máy chủ Chrome DevTools MCP vào Gemini CLI

Dán cấu hình sau vào tệp để thêm Máy chủ Chrome DevTools MCP:

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

Lưu tệp và đóng nó lại.

Tệp cấu hình sẽ trông giống như:

Bây giờ hãy mở Gemini và chạy lệnh sau để xác nhận máy chủ đã được cài đặt:

/mcp

Bây giờ bạn sẽ thấy chrome dev tools mcp server được liệt kê trong số các máy chủ có sẵn. Từ đây, Gemini có thể kết nối trực tiếp với Chrome DevTools, giúp gỡ lỗi các ứng dụng trực tiếp dễ dàng hơn với sự hỗ trợ của AI.

Cách sử dụng Chrome Dev Tools MCP Server

Sau khi cài đặt, bạn có thể bắt đầu tương tác trực tiếp với nó thông qua các lời nhắc trong trợ lý AI của mình. Ví dụ:

1. Phân tích hiệu suất
“Vui lòng kiểm tra LCP (Largest Contentful Paint) của web.dev.”

using the chrome devtools mcp server for performance analysis

2. Gỡ lỗi các vấn đề về CSS
“Kiểm tra localhost:8080 và sửa các phần tử bị tràn trong tiêu đề.”

3. Nhật ký Console & Mạng
“Phân tích các lỗi console khi gửi biểu mẫu đăng nhập trên localhost:3000.”

4. Mô phỏng luồng người dùng
“Điều hướng đến trang đăng ký, điền biểu mẫu và cho tôi biết tại sao việc gửi lại thất bại.”

Trợ lý AI của bạn giờ đây không chỉ viết mã mà còn kiểm thử và gỡ lỗi nó như một nhà phát triển con người, trực tiếp trong Chrome.

Các tính năng nâng cao

1. Theo dõi tự động
Công cụ performance_start_trace cho phép tác nhân AI của bạn ghi lại dấu vết và tự động phân tích các nút thắt cổ chai về hiệu suất.

2. Kiểm tra DOM & CSS
Các trợ lý AI có thể kiểm tra cấu trúc DOM trực tiếp và cung cấp các bản sửa lỗi CSS hoặc HTML có mục tiêu.

3. Quy trình làm việc có khả năng mở rộng
Vì nó được cung cấp bởi MCP, thiết lập tương tự hoạt động trên các trình chỉnh sửa và tác nhân khác nhau hỗ trợ MCP, đảm bảo tính nhất quán.

Tham gia và Triển vọng tương lai

chrome dev tools mcp server vẫn đang trong bản xem trước công khai. Điều đó có nghĩa là nó đang phát triển nhanh chóng và Google đang tích cực tìm kiếm phản hồi từ nhà phát triển. Các cải tiến trong tương lai có thể bao gồm:

Tích hợp sâu hơn với Lighthouse và Core Web Vitals.
Mô phỏng đầu vào người dùng phong phú hơn (luồng nhiều bước).
Trực quan hóa mạnh mẽ hơn các vấn đề do AI phát hiện.
Hỗ trợ mở rộng cho gỡ lỗi đa tab và đa thiết bị.

Bạn có thể theo dõi các cập nhật trên Blog dành cho nhà phát triển Chrome và đóng góp các vấn đề hoặc đề xuất trên GitHub.

Kết luận

chrome dev tools mcp server không chỉ là một công cụ dành cho nhà phát triển khác—đó là cầu nối giữa các quy trình gỡ lỗi truyền thống và thế giới mã hóa được hỗ trợ bởi AI đang nổi lên. Bằng cách trao cho các tác nhân mã hóa khả năng nhìn, kiểm thử và gỡ lỗi theo thời gian thực, nó biến chúng từ các trình tạo mã thành các đối tác gỡ lỗi toàn diện.

Cho dù bạn là nhà phát triển chuyên nghiệp sử dụng VS Code, sinh viên thử nghiệm trong Cursor, hay người đam mê AI khám phá tự động hóa, việc cài đặt và sử dụng Chrome DevTools MCP Server có thể tăng đáng kể năng suất và chất lượng mã.

Bây giờ Chrome DevTools có thể giao tiếp trực tiếp với tác nhân AI của bạn, câu hỏi duy nhất còn lại là: bạn sẽ xây dựng, kiểm thử và sửa chữa điều gì tiếp theo?

button