MCP配置教程
文章最后更新时间：2026年05月22日
MCP（Model Context Protocol，模型上下文协议）是由 Anthropic 公司推出的一种开放标准。简单来说，它的目标是解决 AI 模型（如 Claude、ChatGPT、Gemini）与外部数据、工具之间“语言不通”的问题。
如果把 AI 模型比作一个聪明的大脑，那么 MCP 就是一套标准的“插座和数据线”，让这个大脑能以统一的方式连接到你的本地文件、数据库、GitHub 仓库或 Google 日历。
核心架构
MCP 采用类似于客户端-服务器（Client-Server）的结构：
-
MCP Host（宿主/客户端）： 指你正在使用的 AI 软件（如 Claude Desktop、IDE、或其他 AI 助手）。
-
MCP Server（服务器）： 这是一个轻量级的中间件，专门负责连接特定的数据源（如 SQLite 数据库、Google Drive 或某个 API）。
-
Local/Remote Resources： 最终的数据源。
功能支持
-
搜索代码
-
追踪调用栈
-
打断点调试
-
Hook 函数
-
查看变量值
Trae CN，Cursor，VScode
MCP 辅助流程
AI 直接操作浏览器 → 自动分析 → 自动验证 → 输出结果
下载脚本：https://www.123912.com/s/pha5Td-3Jpod
解压，打开cmd进入目录
node版本：20+
安装命令
npm install
打包命令
npm run build
配置mcp server
{
"mcpServers": {
"js-reverse": {
"command": "D:/nodejs/node.exe",
"args": [
"D:/js_nx/js-reverse-mcp-1.2.0/build/src/index.js",
"--browser-url=http://127.0.0.1:9222"
],
"env": {}
}
}
}
浏览器启动命令
"chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-debug"
常用指令
-
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">new_page</font>：新建页面并打开 URL -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">select_page</font>：列出/切换当前调试页面 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">navigate_page</font>：页面跳转（url/back/forward/reload） -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">take_screenshot</font>：截图（整页或视口） -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">list_scripts</font>：列出当前页面已加载脚本 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">search_in_sources</font>：在已加载 JS 源码中搜索字符串/正则 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">get_script_source</font>：按行号或偏移读取脚本片段 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">save_script_source</font>：保存完整脚本源码到本地 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">set_breakpoint_on_text</font>：按代码文本搜索并下断点 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">list_breakpoints</font>：列出所有断点 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">remove_breakpoint</font>：删除指定/全部断点 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">break_on_xhr</font>：按 URL 关键字对 XHR/Fetch 断点 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">pause_or_resume</font>：暂停/继续 JS 执行 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">get_paused_info</font>：获取暂停态调用栈与作用域 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">step</font>：单步执行（over/into/out） -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">trace_function</font>：函数调用追踪（logpoint，不一定暂停） -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">evaluate_script</font>：在页面上下文执行 JS 函数 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">inject_before_load</font>：页面脚本前注入 JS（可移除） -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">select_frame</font>：列出/切换 iframe/frame 上下文 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">list_network_requests</font>：查看网络请求列表/详情 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">get_request_initiator</font>：查看请求发起调用栈 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">list_console_messages</font>：查看控制台消息 -
<font style="color:rgba(20, 20, 20, 0.92);background-color:rgb(252, 252, 252);">get_websocket_messages</font>：查看 WebSocket 连接与消息（支持分组分析）
还没有评论，来说两句吧...