Chrome DevTools MCP的使用

留言

官方地址: https://github.com/ChromeDevTools/chrome-devtools-mcp

https://github.com/JaxNext/devtools-mcp-workshop-gallery/blob/main/docs/install_on_vscode.md

https://github.com/JaxNext/devtools-mcp-workshop-gallery/blob/main/workshop.md

agy –add-mcp ‘{“name”:”chrome-devtools”,”command”:”npx”,”args”:[“chrome-devtools-mcp@latest”]}’

node必须大于20.19

但是vscode的有问题…
他们说vscode就是容易有问题…

那我还是用其他的~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
code  --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'       

Added MCP servers: chrome-devtools
FATAL ERROR: v8::ToLocalChecked Empty MaybeLocal
----- Native stack trace -----

 1: 0x11969a6e8 node::OnFatalError(char const*, char const*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 2: 0x11a3939e0 v8::PropertyDescriptor::set() const [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 3: 0x1196f8e84 node::modules::BindingData::GetPackageJSON(node::Realm*, std::__Cr::basic_string_view<char, std::__Cr::char_traits<char>>, node::modules::BindingData::ErrorContext*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 4: 0x1196fbdb8 void node::modules::BindingData::GetPackageScopeConfig<false>(v8::FunctionCallbackInfo<v8::Value> const&) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 5: 0x15fe10278 
 6: 0x1580dd99c 
 7: 0x15fe0e270 
 8: 0x15fe0e270 
 9: 0x1580d5194 
10: 0x1580d42dc 
11: 0x1580cf314 
12: 0x1580d56c4 
13: 0x1580cf314 
14: 0x1580d3254 
15: 0x1580d2034 
16: 0x1580c93bc 
17: 0x15fe0e270 
18: 0x15fe0b228 
19: 0x15fe0ae74 
20: 0x1170735cc v8::Function::Call(v8::Isolate*, v8::Local<v8::Context>, v8::Local<v8::Value>, int, v8::Local<v8::Value>*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
21: 0x117072968 v8::Function::Call(v8::Isolate*, v8::Local<v8::Context>, v8::Local<v8::Value>, int, v8::Local<v8::Value>*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
22: 0x1195b94b4 node::InternalMakeCallback(node::Environment*, v8::Local<v8::Object>, v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*, node::async_context, v8::Local<v8::Value>) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
23: 0x1195c83c0 node::AsyncWrap::MakeCallback(v8::Local<v8::Function>, int, v8::Local<v8::Value>*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
24: 0x1196edb40 node::worker::MessagePort::OnMessage(node::worker::MessagePort::MessageProcessingMode) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
25: 0x11938bf50 uv__async_fork [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
26: 0x11939e20c uv__io_poll [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
27: 0x11938c41c uv_run [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
28: 0x1195b9e70 node::SpinEventLoopInternal(node::Environment*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
29: 0x1197b5728 node::worker::Worker::Run() [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
30: 0x1197bac28 _register_external_reference_worker(node::ExternalReferenceRegistry*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
31: 0x19b92bc0c _pthread_start [/usr/lib/system/libsystem_pthread.dylib]
32: 0x19b926b80 thread_start [/usr/lib/system/libsystem_pthread.dylib]

----- JavaScript stack trace -----

1: getPackageScopeConfig (node:internal/modules/package_json_reader:160:33)
2: getPackageJSONURL (node:internal/modules/package_json_reader:236:25)
3: packageResolve (node:internal/modules/esm/resolve:779:81)
4: moduleResolve (node:internal/modules/esm/resolve:865:18)
5: defaultResolve (node:internal/modules/esm/resolve:995:11)
6: nextResolve (node:internal/modules/esm/hooks:748:28)
7: resolve (data:text/javascript;base64,CglleHBvcnQgYXN5bmMgZnVuY3Rpb24gcmVzb2x2ZShzcGVjaWZpZXIsIGNvbnRleHQsIG5leHRSZXNvbHZlKSB7CgkJaWYgKHNwZWNpZmllciA9PT0gJ2ZzJykgewoJCQlyZXR1cm4gewoJCQkJZm9ybWF0OiAnYnVpbHRpbicsCgkJCQlzaG9ydENpcmN1aXQ6IHRydWUsCgkJCQl1cmw6ICdub2RlOm9yaWdpbmFsLWZzJwoJCQl9OwoJCX0KCgkJLy8gRGVmZXIgdG8gdGhlIG5leHQgaG9vayBpbiB0aGUgY2hhaW4sIHdoaWNoIHdvdWxkIGJlIHRoZQoJCS8vIE5vZGUuanMgZGVmYXVsdCByZXNvbHZlIGlmIHRoaXMgaXMgdGhlIGxhc3QgdXNlci1zcGVjaWZpZWQgbG9hZGVyLgoJCXJldHVybiBuZXh0UmVzb2x2ZShzcGVjaWZpZXIsIGNvbnRleHQpOwoJfQ==:13:10)
8: nextResolve (node:internal/modules/esm/hooks:748:28)
9: resolve (node:internal/modules/esm/hooks:240:30)
10: handleMessage (node:internal/modules/esm/worker:199:24)


/usr/local/bin/code: line 38: 57895 Abort trap: 6           ELECTRON_RUN_AS_NODE=1 "$ELECTRON" "$CLI" "$@"

对自动化意义重大

https://zhuanlan.zhihu.com/p/1945424561689585525

qoder的mcp添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "mcpServers": {
    "Chrome DevTools MCP": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ],
      "env": {}
    }
  }
}




可以直接自动调试, 部署上线

可以用于日后的自动化工作流

stdio 是 Standard Input/Output 的缩写，意思是“标准输入/输出”。在编程中，它最常指代 C 语言中的一个重要头文件 stdio.h，其中包含了进行标准输入输出操作（如 printf 和 scanf 等函数）的声明。在某些其他上下文中，它也可以指代本地进程通信（例如在某些云服务模型中）或系统部署模型




surf

cursor 似乎是可以的~

还是要氪金,擦

android studio似乎可以..

https://developer.android.com/studio/gemini/add-api-key?hl=zh-cn




zed似乎也可以

https://zed.dev/docs/ai/external-agents

文章目录