ホーム / Skills / 開発効率化 / Chrome DevTools エージェント
開発効率化

Chrome DevTools エージェント

awesome-copilot communityMITSkill の言語: 英語
ライセンス確認済みスクリプトなし外部サービスが必要高リスク
デモ実行記録 · claude-sonnet-5-5 · 2026年10月
I need browser debugging and performance analysis on a page using Chrome DevTools. Open file:///private/tmp/claude-501/-Users-huipeizhu-git-aibars-portal/1db8d52d-0133-4843-9915-dc2b4b4fafd0/scratchpad/t_cd/site/index.html . Check the console messages and network requests for errors, record a performance trace with a reload and report the key findings (LCP and anything notable), then fill in the form with the email "[email protected]", choose the "Monthly" plan, submit it and tell me exactly what the page shows afterwards. Only use this page; do not visit any other site.
Skill: chrome-devtools

Here's what I found on the page.

Console errors

  • missing-logo.png failed to load (ERR_FILE_NOT_FOUND). The "Brew & Co logo" image is broken.
  • fetch of api/plans.json was blocked by CORS, because the page is opened from file:// and the origin is null. The page logged "Failed to load plans: Failed to fetch". That failure is most likely a side effect of opening the page from file://, so serving it over http:// should clear it.
  • One DevTools issue: an input has no autocomplete attribute.
  • There was also a plain page loaded log.

Network requests (3 total)

  • index.html returned 200.
  • missing-logo.png failed with ERR_FILE_NOT_FOUND.
  • api/plans.json failed with ERR_FAILED, the CORS block above.

Performance trace (reload)

  • LCP was 194 ms. TTFB was 0.2 ms, and the other ~194 ms was render delay.
  • CLS was 0.00.
  • There is no CrUX field data for this page.
  • The trace surfaced only the LCPBreakdown insight, so I didn't dig into further insights. The long render delay is the one thing worth a closer look.

Form submission
I entered [email protected], selected "Monthly" and clicked Subscribe. The page then showed this text below the form:

Subscribed [email protected] to Monthly

The email appears in uppercase in that message, although I typed it in lowercase. The page may be transforming it with JavaScript or CSS, which is worth checking if that wasn't intended. The form fields kept their values ([email protected], Monthly).

I only used this local page and visited no other sites.

试用方式:我用 Google 的 chrome-devtools-mcp(关闭使用统计和 CrUX 上报,用 `--isolated --headless` 的临时干净浏览器,不碰你的日常 Chrome 和登录状态),让模型只操作我做的一个本地页面。页面里有故意放的问题:缺失的图片、一个会失败的请求、把邮箱转成大写的提交逻辑。模型找到了这些,并正确报告了表单提交后的页面文字。注意:这个 Skill 本身没有安全提示,它能操控真实浏览器。

できること

chrome-devtools MCP サーバーを使うための手引きをモデルに提供します。ツールは 4 つに分かれます。ページ管理(開く、移動、切り替え、閉じる、文字の出現待ち)、入力(クリック、フォーム入力、ホバー、キー操作、ドラッグ、ファイルのアップロード、ダイアログ処理)、デバッグ(アクセシビリティツリーのスナップショット、スクリーンショット、コンソールメッセージ、ページ内での JavaScript 実行、ネットワークリクエストの確認)、エミュレーションとパフォーマンス(サイズ変更、CPU やネットワークの制限、Core Web Vitals のためのトレースの記録と分析)です。

動き方

  1. まずスナップショット:テキストのスナップショットで要素の uid を取得し、uid でクリックや入力を行い、ページが変わったら取り直します。
  2. 原因調査:コンソールのエラーと失敗したネットワークリクエストを見て、スクリプトで特定の値を確認します。
  3. 計測:リロード付きでトレースを開始し、LCP やレイアウトシフトなどの所見を分析します。

向いている場面

ページのデバッグ、性能の確認、自分の開発サイトでのブラウザ操作の自動化。

補足とリスク

高リスク:モデルに実際に動作中の Chrome を操作させます。そのブラウザはあなたのアカウントにログインしている可能性があり、モデルはクリック、フォーム入力と送信、ファイルのアップロード、ページ内の任意の JavaScript 実行、ネットワークリクエスト(トークンや個人情報を含みうる)の読み取りができ、あなたとして行動したりデータを漏らしたりしえます。Skill 自体に安全上の注意はありません。ログインのない独立したクリーンなプロファイルを使い、本番や金融サイトを避け、動きを見守ってください。Google の chrome-devtools-mcp を `--isolated --headless` のクリーンなブラウザで、ローカルページ 1 つに対して試用し、コンソール・ネットワーク・トレース・フォーム送信が仕込んだ問題どおりに動作しました。既定では Google に利用統計、CrUX API にトレース内の URL を送り、更新確認を行い、永続プロファイルを使います。`--usageStatistics=false`、`--performanceCrux=false`、`--isolated` で抑えられます。