Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/643https://channel.meo-ai.com/posts/643Mon, 25 May 2026 08:33:43 GMT<span class="post-title-source">《Chrome DevTools MCP v1 发布：为 </span><mark class="highlight"><span class="post-title-source">AI</span></mark><span class="post-title-source"> 编码代理赋予浏览器调试超能力》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23AI_Tools" title="#AI_Tools">#AI_Tools</a> <a href="/search/result?q=%23Chrome_DevTools" title="#Chrome_DevTools">#Chrome_DevTools</a> <a href="/search/result?q=%23MCP" title="#MCP">#MCP</a> <a href="/search/result?q=%23Browser_Automation" title="#Browser_Automation">#Browser_Automation</a> <a href="/search/result?q=%23Performance_Debugging" title="#Performance_Debugging">#Performance_Debugging</a><br /><br />总结：<br />Chrome 团队正式发布 DevTools MCP v1，通过 Model Context Protocol 将 Chrome DevTools 的完整调试能力开放给 <mark class="highlight">AI</mark> 编码代理。它让 Claude、Cursor、Copilot 等 <mark class="highlight">AI</mark> 助手能够实时控制浏览器、抓取性能 trace、分析网络请求、检查控制台日志，甚至处理 1500 万行级别的性能数据，从而把"盲写代码"的 <mark class="highlight">AI</mark> 变成能看、能测、能调优的闭环调试器。<br /><br />文章要点：<br />1. 告别盲写时代：以前 <mark class="highlight">AI</mark> 编码代理只能凭空推理代码，无法看到实际渲染效果。DevTools MCP 直接给 <mark class="highlight">AI</mark> 装上"眼睛"，让它能截图、查 DOM、读控制台、抓网络请求，基于真实浏览器状态做判断。<br />2. 40+ 工具全覆盖：从点击、填表、导航等自动化操作，到性能 trace 录制、Lighthouse 审计、内存堆快照、网络请求分析，几乎把 DevTools 面板的能力完整暴露给了 <mark class="highlight">AI</mark>。<br />3. 性能分析是杀手锏：Paul Irish 演示了如何处理 1500 万行 JSON 的复杂性能 trace，MCP 服务器会解析并提炼出关键洞察，让 <mark class="highlight">AI</mark> 帮你做原本需要资深性能专家才能完成的初步诊断。<br />4. 接入零门槛：支持 Claude Code、Cursor、Copilot、Gemini CLI、VS Code 等主流工具，一条 npx 命令即可启动，还能自动连接本地已运行的 Chrome 实例，无需额外配置。<br />5. 架构扎实可靠：底层基于 Chrome DevTools Protocol 和 Puppeteer，自动化操作自带智能等待，避免 flaky；同时支持 headless 和有头模式，适应不同场景需求。<br /><br />URL：<a href="https://developer.chrome.com/blog/devtools-for-agents-v1" target="_blank" rel="noopener" title="https://developer.chrome.com/blog/devtools-for-agents-v1">https://developer.chrome.com/blog/devtools-for-agents-v1</a><a class="tgme_widget_message_link_preview" href="https://developer.chrome.com/blog/devtools-for-agents-v1" target="_blank" rel="noopener" title="Chrome DevTools for agents provides your coding agent with the visibility it needs to verify, debug, and optimize code in real time."> <div class="link_preview_site_name accent_color">Chrome for Developers</div> <img class="link_preview_image" alt="Streamline your AI coding workflow with Chrome DevTools for agents 1.0  |  Blog  |  Chrome for Developers" src="/static/https://cdn4.telesco.pe/file/Y7-NwTh9jrKIXSNhgfw2_Fu9a3fUfChmMqWf8DifdRqJ5gFCHvWg2FxTmA-Wiw5ZLyBC5sUoAPTeq6JqPGNAsHMYUJfDrYumMu0KZRY_P6R8OuAiIiPTHtreljRj_sHbMe_-27SCH14uB0MVnRshWghR0U2C57H0EKVWXWUHHLo__0RTNaG5VczIjPnA7Wye32aLgta1avjpiXi0Yl7Hmrk_jmjC-bPveyxOtu2QfWejp-_ltsHJWheVwYOEkTSr5Beae4--jYqQ3jL1t3EBIm9u7QdWksd0jvjX9eRqvTn9p7GVvmHcN4nGar5dQKu2XgZnbF6LVK4biqKLOvQIlQ.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Streamline your <mark class="highlight">AI</mark> coding workflow with Chrome DevTools for agents 1.0  |  Blog  |  Chrome for Developers</div> <div class="link_preview_description">Chrome DevTools for agents provides your coding agent with the visibility it needs to verify, debug, and optimize code in real time.</div> </a>https://channel.meo-ai.com/posts/629https://channel.meo-ai.com/posts/629Fri, 08 May 2026 23:24:01 GMT<span class="post-title-source">《Mirage：</span><mark class="highlight"><span class="post-title-source">AI</span></mark><span class="post-title-source"> Agent的统一虚拟文件系统》</span><br /><br />标签：<a href="/search/result?q=%23AI_Tools" title="#AI_Tools">#AI_Tools</a> <a href="/search/result?q=%23AI_Agent" title="#AI_Agent">#AI_Agent</a> <a href="/search/result?q=%23%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" title="#文件系统">#文件系统</a> <a href="/search/result?q=%23Python" title="#Python">#Python</a> <a href="/search/result?q=%23TypeScript" title="#TypeScript">#TypeScript</a> <a href="/search/result?q=%23SDK" title="#SDK">#SDK</a> <a href="/search/result?q=%23S3" title="#S3">#S3</a> <a href="/search/result?q=%23Slack" title="#Slack">#Slack</a> <a href="/search/result?q=%23GitHub" title="#GitHub">#GitHub</a> <a href="/search/result?q=%23Redis" title="#Redis">#Redis</a> <a href="/search/result?q=%23%E7%BC%93%E5%AD%98" title="#缓存">#缓存</a> <a href="/search/result?q=%23OpenAI" title="#OpenAI">#OpenAI</a> <a href="/search/result?q=%23Vercel_AI_SDK" title="#Vercel_AI_SDK">#Vercel_AI_SDK</a> <a href="/search/result?q=%23LangChain" title="#LangChain">#LangChain</a><br /><br />总结：<br />Mirage 是一个专为 <mark class="highlight">AI</mark> Agent 设计的统一虚拟文件系统，它将 S3、Google Drive、Slack、Gmail、Redis 等数十种后端服务挂载到同一棵文件树下。Agent 只需用熟悉的 Unix/bash 工具（如 grep、cat、cp）就能跨服务读写数据，无需学习 N 个 SDK 或 MCP。支持 Python/TypeScript SDK 和 CLI，可嵌入 FastAPI、Express 等应用，并内置双层缓存（索引缓存 + 文件缓存）减少网络开销，兼容 OpenAI Agents SDK、Vercel <mark class="highlight">AI</mark> SDK、LangChain 等主流框架。<br /><br />文章要点：<br />- 统一挂载，万物皆文件：把 S3、GDrive、Slack、GitHub、MongoDB、Redis 等后端并排挂载到同一个根目录下，Agent 看到的始终只有一棵树<br />- 零学习成本：任何懂 bash 的 LLM 都能直接上手，用 <code>grep</code>、<code>cat</code>、<code>cp</code>、<code>wc</code> 这些经典命令跨服务操作，不用记新 API<br />- 双层缓存省流量：自带索引缓存（目录列表）和文件缓存（对象字节），默认用内存，也可切 Redis 共享给多进程/多机器<br />- 多语言 SDK + CLI：提供 Python 和 TypeScript（Node / Browser / Core）SDK，以及轻量 CLI，可嵌入你的 FastAPI、Express 或浏览器应用<br />- 主流框架即插即用：已适配 OpenAI Agents SDK、Vercel <mark class="highlight">AI</mark> SDK、LangChain、Pydantic <mark class="highlight">AI</mark>、CAMEL、OpenHands 等<br />- 工作空间可移植：支持克隆、快照、版本化管理，Agent 运行环境能在机器间迁移而不必重新配置<br /><br />文章URL：<a href="https://github.com/strukto-ai/mirage" target="_blank" rel="noopener" title="https://github.com/strukto-ai/mirage">https://github.com/strukto-ai/mirage</a><a class="tgme_widget_message_link_preview" href="https://github.com/strukto-ai/mirage" target="_blank" rel="noopener" title="The World's First Virtual Terminal for AI Agents. Contribute to strukto-ai/mirage development by creating an account on GitHub."> <div class="link_preview_site_name accent_color">GitHub</div> <div class="link_preview_title">GitHub - strukto-<mark class="highlight">ai</mark>/mirage: The World's First Virtual Terminal for <mark class="highlight">AI</mark> Agents</div> <div class="link_preview_description">The World's First Virtual Terminal for <mark class="highlight">AI</mark> Agents. Contribute to strukto-<mark class="highlight">ai</mark>/mirage development by creating an account on GitHub.</div> </a>