Chrome DevTools在Agent编程工具上的安装

1.Cursor上安装

vscode打开Agent Settings

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

claude code和codex

在CLI中

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Codex

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Gemini

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

Gemini限流中

Figma就是前端设计的一个工具 会把图片内CSS 什么的样式设计好

让chrome devetools进行网页自动化

相关推荐
老虎06272 小时前
前端超全总结-----html,css,flex,vue,Ajax,ElementPlus,vueRouter语法应用讲解
前端·css·html
坚持学习前端日记2 小时前
AgentAi视频模型开发对接部署使用
前端·人工智能·python·flask·音视频
兆子龙2 小时前
深入探究 React 史上最大安全漏洞
前端·javascript
广州华水科技2 小时前
单北斗GNSS形变监测在水库安全中的应用与技术优势
前端
摸鱼的春哥2 小时前
Agent🤖记忆的提取与压缩!再也不担心我的Agent记忆混乱了
前端·javascript·后端
海石7 小时前
微信小程序开发01:XR-FRAME的快速上手
前端·增强现实·trae
叶梅树10 小时前
DocsJS npmjs 自动化发布复盘(Trusted Publisher)
前端·npm
我命由我1234510 小时前
Element Plus - Form 的 resetField 方法观察记录
开发语言·前端·javascript·vue.js·html·html5·js
清空mega11 小时前
《Vue3 项目结构详解:components、views、assets、router、stores 到底该怎么理解?》
前端·javascript·vue.js