慣性聚合 高效追讀感興趣之博客、新聞、科技資訊
閱原文 以慣性聚合開啟

推薦訂閱源

博客园 - 司徒正美
V
V2EX
T
Tailwind CSS Blog
有赞技术团队
有赞技术团队
aimingoo的专栏
aimingoo的专栏
Apple Machine Learning Research
Apple Machine Learning Research
IT之家
IT之家
Blog — PlanetScale
Blog — PlanetScale
A
About on SuperTechFans
月光博客
月光博客
T
The Blog of Author Tim Ferriss
宝玉的分享
宝玉的分享
Martin Fowler
Martin Fowler
博客园 - 聂微东
The GitHub Blog
The GitHub Blog
V
Visual Studio Blog
WordPress大学
WordPress大学
酷 壳 – CoolShell
酷 壳 – CoolShell
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant Common SOC 2 Failures (Real World) Stop Vibe-Checking Your AI App: A Practical Guide to Evals How to Use SonarQube and SonarScanner Locally to Level Up Your Code Quality Your Next To-Do App Is Dead — I Replaced Mine with an OpenClaw AI Sign a Nostr event in 60 lines of Python using coincurve — no nostr-sdk, no nbxplorer, no rust toolchain ITGC Audit Explained Like You’re in Big 4 Patch Tuesday abril 2026: Microsoft parcha 163 vulnerabilidades y un zero-day en SharePoint Stop scraping everything: a better way to track competitor price changes Listing on MCPize + the Official MCP Registry while routing payments OUTSIDE the marketplace — how I kept 100% of my x402 revenue Building an AI-Powered Risk Intelligence System Using Serverless Architecture Why We Ripped Function Overloading Out of Our AI Toolchain Testing AI-Generated Code: How to Actually Know If It Works SaaS Churn Is Killing Your Business. Here Is What to Do About It (Without a Support Team) The Speed of AI Is No Longer Linear - And Self-Improving Models Are Why How to Implement RBAC for MCP Tools: A Practical Guide for Engineering Teams From Standard Quote to Persuasive Proposal: AI Automation for Arborists I built a CLI that scaffolds complete multi-tenant SaaS apps Axios CVE-2025–62718: The Silent SSRF Bug That Could Be Hiding in Your Node.js App Right Now The dashboard that ended our friendship Data Pipelines Explained Simply (and How to Build Them with Python)
WebMCP乃Google I/O之悄然宣告,或使Web应用得备代理之能
Nitin Kalra · 2026-05-24 · via DEV Community

此乃投献于谷歌I/O写作挑战

WebMCP cover image showing agent-ready web apps and structured tool panels

于谷歌IO二六之会,喧呼之声易辨:有双子座三·五、抗重力二·零、安卓代理、AI工作室之升格,及以AI构建软件之新法甚夥。

吾所思返之告,甚澹然也。

网络管理控制平台(WebMCP).

《谷歌文档》称之为一项拟议之开放网络标准,可于本地以谷歌标志测试之,并借演示应用探索之。

然其下之理念甚重:

若诸网站不再强使代理猜测按钮与表单之意,而始直接显露结构化、类型化之动作,将如何?

此似微末,然较之今时所存之工具,则不然。Chrome DevTools MCP,乃Google之正式MCP服务器,使编程之代理得以通过DevTools控制并检视Chrome。

既观二者,吾之见简矣:

Chrome DevTools MCP助代理洞悉吾辈既成之网。WebMCP则命吾辈构建一网,使代理得用而无须臆测。

此别于每一名网师皆有关焉。

今之网,犹为目与指而设

众网应用,多假用户为人,观象于像素,逐点而行于界面

此法于人尚可,于器则远不若矣

吏或可察视DOM。其或用无障碍树。其或摄屏。其或点按按钮。其或填入字段。然若应用未显其意,吏犹须臾度之甚多:

  • 此按钮为毁抑为可逆?
  • 此日期字段欲求MM/DD/YYYYYYYY-MM-DD,抑或自择之流程?
  • 显价终乎?抑或税后见之?
  • 此表立呈,抑或存草稿?
  • 此禁钮待验,待权,待库,或待JavaScript之态乎?

人处暧昧,依境辨之;代理处暧昧,重试, brittle heuristic,时出妄言。

WebMCP之妙,在能于本源以减其暧昧。

WebMCP所增益者何

Chrome WebMCP 文档谓WebMCP乃网页示结构化之器于AI之使也。页可注册JavaScript之函数,或注HTML之表单,俾使能知可为之事,明输入之式,而呼此等事于当前浏览器之境中。

换言之,此网可曰:

// Conceptual example, not exact production code
registerTool("searchFlights", {
  description: "Search available flights",
  input: {
    origin: "string",
    destination: "string",
    date: "string",
    passengers: "number"
  }
});

入全屏模式 出全屏模式

此契不同彼契,彼契云:"觅文本框,疑为原点,入之,移光至某处,冀定制日期选择器能顺行,乃击蓝钮。"

官文载明,支持探查、JSON架构及页态。复举例以明之,如支持流程、旅订、结构表单、日期选择器,及隐式诊断动作。

要言在兹结构化.

网络既已有API。然WebMCP非后端API,乃存于浏览器之境。工具调用可更新用户所见之界面。是使用户参与其中,存可见之产品体验,而予智能体以更可靠之路径,较之原始驱动为善。

何以较之Chrome DevTools MCP

谷歌I/O开发者大会将WebMCP与代理Chrome开发者工具置于同一更广之部:"重塑代理时代之网页开发。"此配对甚为有益.

代理Chrome开发者工具 赋予编程之灵以交互 Chrome 之力,察看页面,调试运行之态,摹拟世人之体验,行审计,检视控制台之讯,析网络之请,取可及性树之影,运性能之务。

GitHub 之 README 为chrome-devtools-mcp 谓之 MCP 之服务器也,使诸如 Antigravity、Claude、Cursor、Copilot、Codex 之属,得以控之察之,于 Chrome 浏览器之活态。其工之引,含导航、输入之自动、模拟、网络之检、控制台之检、截图、无障碍之快照、Lighthouse 之审、性能之迹、内存之器、插件之器,及实验性之 WebMCP 工具.

是乃大权也。

然此层殊异.

Chrome DevTools MCP者,大抵为开发之侧调试与自动化之器.

WebMCP者,乃站点之侧能力契约.

一则使代理察其所存,二则使站点宣其所为.

Chrome DevTools MCP compared with WebMCP: inspecting rendered pages vs exposing product tools

吾之小试

吾欲亲验之,非欲再作"人工智能将变改万事"之文也。

WebMCP之文,指陈演示,兼及命令式与声明式之实:

  • WebMCP zaMaker,此乃用WebMCP命令式API者。
  • 游历之演示,亦用WebMCP命令式API。
  • Le Petit Bistro。,用WebMCP声明式API。

吾初用WebMCP zaMaker,盖因其命令式版本使核心之理昭然若揭。非令智能体自像素中推知披萨之控,乃使页面注册显明之具,供检视者所察。

吾于Chrome启WebMCP之试,启zaMaker之示,而用之。WebMCP - 模型上下文工具检视器延展也。

WebMCP zaMaker demo with Model Context Tool Inspector showing registered pizza tools

此插件现出数种页定之器,其列如:

  • add_topping
  • manage_pizza
  • remove_topping
  • set_pizza_size
  • set_pizza_style

此乃吾心所契之所在。此非泛泛之浏览器操作,如"于X坐标处点击"或"于Y输入框中输入",乃页面所现之产品级功能也。

譬如,检者示之add_topping具构架而含一topping枚举与asize者,亦显set_pizza_size,具结构之size输入,复有number_of_persons之域,可助推其宜。

继而,吾于检视器中,用自然之语为示:

add pizza with large toppings

全屏模式入 全屏模式出

检视器译此为器之唤:

{
  "size": "Large",
  "topping": "🍕"
}

全屏模式入 退出全屏模式

复尝试之:

make the pizza extra large

进入全屏模式 退出全屏模式

所唤插件名为:

{
  "size": "Extra Large"
}

进入全屏模式 退出全屏模式

页面应之,更易披萨之状。

彼小试之,较之独观文牍,显其异尤明。一浏览器自动化之使,可巡游于披萨构建之器。一洞悉WebMCP之页,则曰:"此物所支之动作在此,所许之参数在此,尔呼之一,所生之效亦在此。"

然Chrome DevTools MCP,犹若匠者之镜。可察页面,读其无障碍树,观控制台之输出,自动交互,助代理调试已呈于Chrome之景。

是诚有力,然犹自外窥之。zaMaker之示,显此意之他面:页面自身可发布若干有意之行,俾代理所用。

吾亲验之果为:

今日Chrome DevTools MCP实为检视测试页面之利器。WebMCP检视器显其页自现产品级工具时之变。

WebMCP 與 Chrome DevTools MCP 之比較

此乃吾今所思之最洁之辨也。

疑問 网络控制平台(WebMCP) Chrome DevTools MCP
孰揭其能? 此网站或此网页应用 瀏覽器 / 開發工具層
此为何人主耶? 網絡間行者於域中行 编程之使、质询之使,及开发者之流程
此何所显也? 应用自定之器,输入,输出,及页面之状 瀏覽器之狀,DOM/a11y快照,控制台,網絡,效能,截圖
此何弊也? 代理人揣度使用之方 開發者親自檢視、排錯瀏覽器之行為
當下最佳之用 實驗性代理人適用之產品流程 真實排錯,測試,效能,可訪問性檢查
至大之限 需浏览器支持及应用程序实现 犹常依页面结构、快照及推度之意

若使代理欲究为何结账页面有弊,Chrome DevTools MCP乃适之器。

若使代理人欲订程、呈请支援、设制仪表盘,或于应用内成其多步之工,WebMCP乃其久远之妙解也。

何以此事大于"AI可点按钮"

昔在WebMCP未兴,浏览器代理人之路若此:

  1. 见其页。
  2. 度用户之次行。
  3. 点之或书之.
  4. 察其果.
  5. 若谬,则复之.

此道或可通,然其脆而易破。亦迟且费,盖每一步皆增模型之思、视觉之析、DOM之解,或兼而有之.

WebMCP另辟蹊径,曰:

  1. 察其地之可用之器.
  2. 择其器,合乎用者之志。
  3. 輸入所擬之參數.
  4. 使此處執行動作於可見之瀏覽器境中.
  5. 返結構化之輸出或明確之誤.

此近於API,然用者猶視此產品。

此故吾谓WebMCP之重也。非惟增代理之能,实乃还责于应用之师。欲使代理行止安泰,信实有据,岂可令其自像素始,逆推每项流程乎?

吾辈当显其意。

WebMCP未普行之际,开发者可为之者何

吾辈多不能于明日运WebMCP之制。浏览器之支,尚在初阶,而议犹变易。

然吾辈可始筑易解之境,俾人与灵均皆明。

吾所取之实用清单,自此而来。

  • 宜先施语义化HTML,后用定制组件。
  • 于无障碍树中,显要按钮与表单。
  • 赐输入以恒名与标识。
  • 勿独于形貌隐要旨。
  • 行破坏之事,必待明示而后为。
  • 分清"预览"、"存草稿"、"提交"与"购买"之流程。
  • 使验证之误,既可机器识,亦可人识。
  • 以浏览器自动化、无障碍快照及Lighthouse之法,测重要流程。
  • 思将来何种应用操作宜备结构化之具。

若吾为WebMCP备产,不欲初显诸钮为具。当先从流程之少,而暧昧伤之甚者:

  • 结账
  • 订约
  • 支持工单创建
  • 退货/退款启动
  • 仪表盘筛选
  • 诊断
  • 账户设置变更

此乃代理经由界面臆断,致用户实痛之所在

安全问题

此中显有风险:若诸网暴露行于吏,恶器之设或使恶行易行。

是故吾喜WebMCP之模,存行于浏览器之境,非使每网皆为盲后端API。敏行犹需显之UI,用户之认,及页级之态。

然开发者需有纪律。

善之WebMCP工具有:

  • 专一之旨
  • 明著之名
  • 严整之式
  • 有益之误报
  • 昭然之施行
  • 不可逆之行为必证
  • 无突兀之副作用

其旨非使诸器无所不为也。

其旨在于使代理行事得宜,少费猜度。

吾之见

Chrome DevTools MCP,似为今时网师所用之器。

WebMCP,似为来日网师所须之约。

是故吾以为,此乃Google I/O 2026之要闻。其示人以变:

之代理,乃更优之屏幕刮取器也

之代理,为结构化网络能力之超一流用户也

此变非旦夕可成,需浏览器之助,标准之作,开发者之工具,安全之范式,及大量现实之测试。

然方向明矣。若使代理代吾用网,则网应用须非徒具形貌之用也。

彼辈须得通晓。

彼辈须得可察。

终将需为从者备。

资源