公式発表・概要
動画で知る：Modern Web GuidanceとDevTools for agentsの組み合わせ
「知識を与える道具」と「実際のブラウザで確かめる道具」を組み合わせた、エージェントによるWeb開発の流れを紹介する動画です。
動画の内容
コーディングエージェントは動くWebアプリを作れます。ただ、構造化された手がかりがないと、古いAPIに寄ったり、大事なアクセシビリティ要件を見落としたりします。
そこで役割を分けます。Modern Web Guidanceは、専門家が確認したWebプラットフォームのベストプラクティスと、Baselineのブラウザ互換データをエージェントに与え、重いJavaScriptではなくブラウザ内蔵の機能を使わせます。Chrome DevTools for agentsは、その結果を実際のChromeブラウザでテストし、確かめます。
狙いは、AIの出力の手直しやデバッグに人が割く時間を減らすことです。動画は、両方をエージェントに入れるよう案内して締められています。
見る
組み合わせの考え方
| 道具 | 担当 |
|---|---|
| Modern Web Guidance | 書く前の知識。どの標準機能を、どのフォールバックで使うか |
| Chrome DevTools for agents | 書いた後の確認。実際のブラウザで描画、性能、コンソール、アクセシビリティを見る |
この組み合わせが現場でどう働いたかは、Policybazaarの事例とWeTVの事例が具体例です。どちらも「書く→ブラウザで見る→直す」の輪をエージェントに回させています。
原文を読む：Agentic web development with Modern Web Guidance and Chrome DevTools for agents（YouTube動画）
短縮URL（投稿の記載）：https://goo.gle/4C2w7W1 ／ 解決先：https://www.youtube.com/watch?v=mogYbZ4CFB8