与「ChromeDevTools」相关的搜索结果

兄弟们，推荐一个真香工具：Chrome DevTools MCP🔥 我最近搞 AI Agent 的时候发现这个官方项目，直接爽到飞起。 它能让 Claude、Cursor 这些 AI 直接操控真实的 Chrome 浏览器，调试、自动化、看性能全都能干。 具体好在哪： - 实时看网络请求、Console 日志，还带 Source Map - 录制性能 Trace，结合真实用户数据分析瓶颈 - 自动化操作稳得很（点、输、截图、跳转） - 还有 Heap 快照对比，调内存问题超实用 用 npx 就能跑，支持主流 AI 客户端，一配就行。 以前 AI 写代码老是猜，现在直接进浏览器实战，效率高太多了。做网页、SaaS、自动化脚本的都值得试试。 Star 已经 4w+ 了，官方出的，更新也勤。 链接放评论了 👇 有玩 Agent 的快去看看，欢迎评论区交流玩法！ #AI工具# #ChromeDevTools# #Cursor# #独立开发者#

Grok Build is becoming a complete environment for building, deploying and managing real-world applications Its plugin marketplace brings the entire development stack into one connected workflow: • Vercel for deployment • Sentry for monitoring • Chrome DevTools for debugging • Cloudflare for infrastructure • Supabase, MongoDB and Neon for databases • Firecrawl for web data • Figma for design • Railway for hosting • Stripe for payments You are not just asking Grok to write code You can build, test, debug, connect infrastructure, deploy and manage production without constantly switching between tools Grok Build combines a frontier model, a powerful agentic harness and all the tools needed to go from an idea to a shipped product

Here’s everything you need to know about Grok Build’s changelog since release Grok Build is moving fast from a coding CLI into a full terminal-native agent workspace Since launch, it has added or improved plan/review/approve workflows, clean diffs, project-aware context through AGENTS.md, skills, hooks, plugins, MCP servers, parallel subagents, headless mode, ACP support, web/X search, image and video tools, compaction, memory handling, and long-running sessions The biggest upgrade people should not miss is the rendering layer Grok Build can now keep more technical output directly inside the terminal: math, formulas, LaTeX, Mermaid diagrams, ER diagrams, UML/class diagrams, state diagrams, sequence diagrams, tables, media outputs, and richer terminal views That matters a lot for research, ML, simulations, algorithms, database design, infra diagrams, paper implementation, and serious code review The terminal is no longer just where you run commands. It is becoming the place where you understand the work, inspect the logic, review diagrams, and keep moving without constantly copying output into another app The workspace layer is also got much more serious upgrades Agent Dashboard lets you manage multiple coding sessions from one screen, see what is working, idle, blocked, or waiting for input, peek at the latest output, reply inline, and dispatch new work without jumping between sessions The Plugin Marketplace turns Grok Build into an extensible developer environment Plugins can bundle skills, slash commands, agents, hooks, MCP servers, and LSPs. Launch partners include MongoDB, Vercel, Sentry, Chrome DevTools, Cloudflare, and Superpowers. Plugin installs can now resolve directly from registered marketplaces instead of only local paths The latest releases are mostly about making all of this reliable during real work Long responses can resume after network blips. MCP servers recover better after drops or noisy output. Compaction no longer hangs forever. Notifications only fire when user attention is actually needed. Linux clipboard support is stronger. Windows and iTerm rendering are cleaner. Very long sessions can scroll, resume, and quit without falling apart Grok Build is becoming a full terminal-native agent workspace: multi-session, plugin-driven, MCP-connected, diagram-aware, math-capable, media-capable, long-context, and built for developers who actually live in the terminal

The Grok Build Plugin Marketplace is now in beta. Build with MongoDB, Vercel, Sentry, Cloudflare, and Chrome DevTools plugins from your terminal. Read more

Chrome DevTools for agents 1.0正式发布：让Agent能真正看见浏览器 ·Agent能写代码，但Agent和代码的实际运行环境是割裂的，看不到代码在浏览器里跑成什么样 ·Chrome DevTools for agents给Agent接通了浏览器调试能力，让它能像真实用户一样验证、调试、优化代码 ·1.0稳定版提供了三种接入方式：MCP服务器、CLI命令行、专家级Agent Skills 官方介绍：

Chrome DevTools for Agents 1.0 正式发布 它在真实浏览器中观察行为、检查输出，让 Agent "能看见浏览器"，有三种接入方式： 1. MCP server：将 LLM 连接到 DevTools 调试能力的标准协议 2. CLI：Token 更省的替代方案，支持 Agent 把动作打包成脚本批量执行 3. Agent skills：教 Agent 何时、如何调用具体工具的专家指令 (如无障碍、性能调试) 共开放了七个能力 1. 自动化质量审计：Agent 可直接跑 Lighthouse，覆盖无障碍、SEO、最佳实践、agentic browsing。可作为"质量门"，拦截阻塞性问题进入生产。 2. 真实用户环境模拟：窗口尺寸、地理位置、网络/CPU 节流均可由 Agent 操控，无需手动调整浏览器即可测试响应式与移动端行为 (如汉堡菜单)。 3. Chrome 扩展开发与调试：安装、reload、触发扩展动作，介入 background script 与扩展页面，自动化"保存-刷新"循环。 4. WebMCP 工具调试：配合 WebMCP Origin Trial。让站点向 Agent 暴露结构化工具，Agent 不再靠 DOM 猜测意图，而是直接列出、调用、验证工具，显著降低集成门槛。 5. 内存泄漏检测：支持堆快照，识别 detached DOM 节点等典型泄漏。配合内存调试 skill，Agent 扮演性能专家角色。 6. Auto-connect 会话接管：可把当前已登录的浏览器上下文交给 Agent，而非让其打开沙箱实例。适合调试需要鉴权的页面 (如后台仪表板)，省去重新登录。 7. 第三方开发者工具暴露内部状态：Web 应用可主动向 Agent 暴露内部状态与组件细节，使调试建议基于真实运行时数据，而非黑盒推断。

昨晚睡前给 AI 布置了一个任务，让它帮我做一个社交媒体管理工具，能够一键发布到多平台，也能从多平台中将互动信息收集回来。提示词大概写了一两千字，样式让它直接一比一复刻 Twitter，一觉醒来，完成度非常高，基本能用了😄 自动化登录流程太麻烦了，我让它通过 Chrome devtools MCP 直接读取了我在浏览器上的已有登录态，然后在数据抓取时将 cookies/localstorage 再传递给 playwright，走 headless 完成自动化。 网页元素分析的工作难度也比较高，我让它直接参考开源的 opencli —— gihtub 接近 1w stars，它做到了几乎所有主流媒体网站的信息抓取能力。其实原理也很简单， opencli 先让用户先安装它提供的 Chrome 插件，插件具备 page debugging 能力，原理跟 Chrome devtools MCP 一样，都走的 cdp 协议驱动，它支持对网页的 DOM/Request 做劫持和分析。 样式复刻就更绝了🤣。我让 AI 一边写代码，一边打开 Chrome 去对比当前网页和 Twitter 网页的 DOM 和 style 差异，并且做完之后还得 review 了三次，结果就是，还原效果异常地高！ 这个程序，我在五六年前也写过，当时前前后后调了十来天，适配了四个社交媒体，全部是体力活儿，后面也因为媒体网站改版弃坑了。今天有了 AI 之后，睡一觉的功夫，效果就出来了，生产力简直是爆炸啊！💥

这个小红书全自动运行Skills功能很强大，支持 OpenClaw、Codex、CC 等所有支持 Skill 的编辑器，感谢white0dew大佬开源🤗 核心原理还是通过 Chrome DevTools Protocol (CDP) 控制测试浏览器完成自动化。 目前已经支持的功能有： 图文笔记自动发布（含话题标签写入） 视频笔记发布（本地视频 / 视频 URL） 多账号管理（账号隔离、切换、默认账号） 浏览器的无头模式 / 有头模式 / 远程 CDP 搜索相关话题笔记、获取笔记详情 对指定笔记自动评论 抓取「评论和@通知」数据 抓取内容数据表并支持导出 CSV（曝光、观看、点赞等） 登录状态缓存、复用标签页、随机延迟等稳定性优化 项目地址：

话说用 Tailwind 的各位，对在一个 class 里写一大堆样式声明的体验不觉得难受吗？如果有一个类似 Chrome DevTools 的 Element panel 那样的视图，选一个节点右边可以有一个单独的视图去编辑每一条声明，这样会不会更好一点？

AI Agent 要变强，有两条完全不同的路。 一条是 Skill，也就是给自己装技能，把新能力直接塞进脑子里。 另一条是 SubAgent，就像派小弟去干活，自己只看汇报。 这两条路听起来都能让 Agent 更厉害，但适用的场景还是有所不同，用错了的话，你的 Agent 可能反而会越用越慢、越用越乱。 Skills，就像是给主 Agent 装插件。 比如你的 Agent 原本只会聊天，现在你想让它能写 PPT。Skills 的做法是：把写 PPT 的能力说明、工具调用方式、注意事项，全都塞进主 Agent 的上下文中。主 Agent 通过上下文学会了这项技能，它可以自己来写 PPT。 第二种叫 SubAgent，就像是委托外包。 同样是写 PPT，SubAgent 的做法是：主 Agent 把任务派给一个专门写 PPT 的 SubAgent，SubAgent 独立完成后把结果交回来。主 Agent 全程不参与具体执行，只负责派活和验收。 一个是内化能力，一个是外包能力。听起来都能搞定任务，区别在哪？ 区别在上下文管理，上下文就是 AI 的记忆。 你可以把 AI 的上下文想象成一张工作桌。桌子大小是固定的，你放的东西越多，就越难找到需要的那份文件。这就是上下文容量的问题。 Skills 模式下，所有能力说明都铺在同一张桌上。好处是信息互通，主 Agent 能看到所有中间结果，推理过程连贯。坏处是桌子很快就乱了，Prompt 越来越长，能力之间可能打架，AI 开始犯糊涂。 SubAgent 模式下，SubAgent 在另一张桌子上干活。干完把结果递过来，过程中产生的草稿、中间文件全留在那边。主 Agent 的桌面保持干净。代价是信息传递要设计好，不然关键信息可能在交接时丢了。 这就是上下文污染问题，这里的污染不是夸张的比喻，是真实的工程瓶颈。 什么时候用哪种？ 判断标准其实很简单：子任务有多复杂，以及你需不需要完成任务过程中产生的信息。 Skills 适合的场景：任务本身不太复杂，或者你需要主 Agent 全程掌控。 比如让 Agent 充当入口路由，根据用户请求加载不同的“场景模式”，像进入 YouTube 总结模式、进入写报告模式。这时候 Skills 的懒加载特性很香：先只加载能力名字和简介，真正要用时才加载完整说明。不像 MCP 那样一股脑把所有工具的详细文档全塞进上下文。 SubAgent 适合的场景：子任务很重、很耗时、中间过程很啰嗦。 最典型的例子是浏览器调试工具。Chrome DevTools 的 MCP 功能很强，但工具说明太臃肿，放进主 Agent 会严重占用上下文。把它封装成 SubAgent，你只需要说“去查日志、截图、分析一下”，它跑完把分析结论递回来。中间那些截图、DOM 树、网络请求细节，全都留在 SubAgent 那边，不污染主 Agent 的上下文。 进阶玩法 有意思的是，Skills 和 SubAgent 这两种模式可以结合。这技巧是从 @yan5xu 那里学来的（ 第一种思路叫“先展开再压缩”。 打个比方：你开了一个两小时的头脑风暴会，白板上写满了草稿、争论、被否决的方案。但最后写进会议纪要的只有三条结论。那些中间过程对得出结论很重要，但对后续执行的人来说是噪音。 Agent 也可以这样操作。主 Agent 发现需要某个 Skill，加载进来，一通操作拿到结果。然后把从“加载 Skill”到“拿到结果”这整段过程折叠掉，只保留最终结论。对后续推理来说，就像开了一个会但只留下了会议纪要。 第二种思路是用文件系统做“中转站”。 想象你管理一个外包团队。你不会把所有需求细节都塞进一条微信消息里，而是说“需求文档在这个链接，去看”。外包团队交付时也不会把源码复制粘贴给你，而是说“代码在这个仓库，部署文档在这里”。 Agent 之间也可以这样协作。主 Agent 委托任务时，不把冗长的背景资料直接写进指令，而是存成文档，只传一个地址。SubAgent 返回时也一样：交付一个简短的状态摘要——“完成了/卡住了/需要你决策”——加一个详细记录的文档地址。主 Agent 根据情况决定要不要点进去看细节。这样双方的上下文都保持精简。 第三种是 Claude Code 里的实战技巧。 上下文快见底时，让 Claude 把当前完成的工作总结成一份文档。然后用 rewind 功能回滚到任务开始前的状态，告诉它：“这件事我已经做完了，记录在这个文件里。” 相当于什么？相当于你跑了一场马拉松，快到终点时发现体力不支。于是你把已经跑过的路线画成地图存档，然后“瞬移”回起点，精力充沛地说“我知道怎么走了，地图在这”。上下文被清空了，但成果保留了下来。用这个方法能在上下文耗尽前抢救一把。 最后 Agent 的竞争正在从“能调用多少工具”转向“怎么优雅地管理这些工具”。 很多人追逐最新的 Agent 框架、最花哨的能力扩展，却忽略了最基础的问题：AI 的工作记忆是有限的，你怎么组织它，决定了它能做多复杂的事。Skills 和 SubAgent 不是非此即彼的选择，而是两种工具，用对场景才能发挥价值。 说到底，Agent 架构设计和软件架构设计还是有很多相通之处。 是把逻辑写在一个巨型函数里，还是拆成模块化的微服务？ 是共享全局变量图省事，还是严格隔离状态保持干净？ 这些老问题换了个皮，又回来了。