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">《</span><mark class="highlight"><span class="post-title-source">Chrome</span></mark><span class="post-title-source"> </span><mark class="highlight"><span class="post-title-source">DevTools</span></mark><span class="post-title-source"> MCP v1 发布：为 AI 编码代理赋予浏览器调试超能力》</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 /><mark class="highlight">Chrome</mark> 团队正式发布 <mark class="highlight">DevTools</mark> MCP v1，通过 Model Context Protocol 将 <mark class="highlight">Chrome</mark> <mark class="highlight">DevTools</mark> 的完整调试能力开放给 AI 编码代理。它让 Claude、Cursor、Copilot 等 AI 助手能够实时控制浏览器、抓取性能 trace、分析网络请求、检查控制台日志，甚至处理 1500 万行级别的性能数据，从而把"盲写代码"的 AI 变成能看、能测、能调优的闭环调试器。<br /><br />文章要点：<br />1. 告别盲写时代：以前 AI 编码代理只能凭空推理代码，无法看到实际渲染效果。<mark class="highlight">DevTools</mark> MCP 直接给 AI 装上"眼睛"，让它能截图、查 DOM、读控制台、抓网络请求，基于真实浏览器状态做判断。<br />2. 40+ 工具全覆盖：从点击、填表、导航等自动化操作，到性能 trace 录制、Lighthouse 审计、内存堆快照、网络请求分析，几乎把 <mark class="highlight">DevTools</mark> 面板的能力完整暴露给了 AI。<br />3. 性能分析是杀手锏：Paul Irish 演示了如何处理 1500 万行 JSON 的复杂性能 trace，MCP 服务器会解析并提炼出关键洞察，让 AI 帮你做原本需要资深性能专家才能完成的初步诊断。<br />4. 接入零门槛：支持 Claude Code、Cursor、Copilot、Gemini CLI、VS Code 等主流工具，一条 npx 命令即可启动，还能自动连接本地已运行的 <mark class="highlight">Chrome</mark> 实例，无需额外配置。<br />5. 架构扎实可靠：底层基于 <mark class="highlight">Chrome</mark> <mark class="highlight">DevTools</mark> 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 AI coding workflow with <mark class="highlight">Chrome</mark> <mark class="highlight">DevTools</mark> for agents 1.0  |  Blog  |  <mark class="highlight">Chrome</mark> for Developers</div> <div class="link_preview_description"><mark class="highlight">Chrome</mark> <mark class="highlight">DevTools</mark> 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/625https://channel.meo-ai.com/posts/625Thu, 07 May 2026 02:07:37 GMT<span class="post-title-source">《Obscura：专为AI代理和爬虫打造的轻量级无头浏览器》</span><br /><br />标签：<a href="/search/result?q=%23%E5%90%8E%E7%AB%AF" title="#后端">#后端</a> <a href="/search/result?q=%23Rust" title="#Rust">#Rust</a> <a href="/search/result?q=%23HeadlessBrowser" title="#HeadlessBrowser">#HeadlessBrowser</a> <a href="/search/result?q=%23WebScraping" title="#WebScraping">#WebScraping</a> <a href="/search/result?q=%23AI_Agent" title="#AI_Agent">#AI_Agent</a> <a href="/search/result?q=%23Chrome_DevTools_Protocol" title="#Chrome_DevTools_Protocol">#Chrome_DevTools_Protocol</a> <a href="/search/result?q=%23Puppeteer" title="#Puppeteer">#Puppeteer</a> <a href="/search/result?q=%23Playwright" title="#Playwright">#Playwright</a> <a href="/search/result?q=%23Anti_Detection" title="#Anti_Detection">#Anti_Detection</a><br /><br />总结：<br />Obscura是一款基于Rust编写的开源无头浏览器引擎，专为大规模网页抓取和AI自动化场景设计。它通过内置V8引擎运行真实JavaScript，完整支持Chrome <mark class="highlight">DevTools</mark> Protocol，可直接替代Puppeteer和Playwright依赖的Headless <mark class="highlight">Chrome</mark>，在内存占用（30MB vs 200MB+）、启动速度和反检测能力上具有显著优势。<br /><br />文章要点：<br />- **极致轻量，资源友好**：相比Headless Chrome动辄200MB+的内存占用和300MB+的体积，Obscura仅需30MB内存和70MB二进制文件，启动几乎瞬时完成，页面加载速度提升约6倍<br />- **零依赖，开箱即用**：无需安装Chrome或Node.js，单个二进制文件即可运行，支持Linux、macOS（Intel/Apple Silicon）和Windows平台<br />- **无缝兼容现有生态**：完整实现Chrome <mark class="highlight">DevTools</mark> Protocol，可作为Puppeteer和Playwright的底层浏览器直接连接使用，现有爬虫脚本迁移成本低<br />- **内置隐身模式**：自带反指纹追踪（随机化GPU、屏幕、Canvas等参数）和3520个域名级别的追踪器拦截，无需额外配置即可绕过常见反爬机制<br />- **并行爬取能力**：提供`obscura scrape`命令支持多URL并发抓取，配合`--concurrency`参数可灵活控制worker数量，适合批量数据采集场景<br />- **开源承诺与商业化路径**：核心引擎采用Apache 2.0协议且承诺永不功能阉割，同时正在开发托管版Obscura Cloud提供代理和基础设施服务<br /><br />文章URL：<br /><a href="https://github.com/h4ckf0r0day/obscura" target="_blank" rel="noopener" title="https://github.com/h4ckf0r0day/obscura">https://github.com/h4ckf0r0day/obscura</a><a class="tgme_widget_message_link_preview" href="https://github.com/h4ckf0r0day/obscura" target="_blank" rel="noopener" title="The headless browser for AI agents and web scraping - h4ckf0r0day/obscura"> <div class="link_preview_site_name accent_color">GitHub</div> <img class="link_preview_image" alt="GitHub - h4ckf0r0day/obscura: The headless browser for AI agents and web scraping" src="/static/https://cdn4.telesco.pe/file/gChSsl6aMr4ytvpAYe2sqt4326N2b2LchfrOxhI-lQn4e2QmfwcwYB8w99V7JTZJuiTDtJFoZzH41lvUZSsjFss5icuIDdnpi98TWsu_P0rR0KpKh9f6w4_BEMqpNknE-qhcB73aRW4wYxYYTBAehJ_2umG_p3BN-NlywNU9GkH2DlTD98kfRItAavVgFYRYe5F16FNZrpPgE4XC4KOoEylumyNW-BVjM_f7bxJq0_Q2FOHF1vR_N9yNMoZP5YuNyhxvsk_6orbVKo4UYZUsjwebaOcWFERVhJYVH5hih9bwOy35thfkI7MVnWQaS5w91P2llAdftVa_6AeovKUGfA.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">GitHub - h4ckf0r0day/obscura: The headless browser for AI agents and web scraping</div> <div class="link_preview_description">The headless browser for AI agents and web scraping - h4ckf0r0day/obscura</div> </a>