ホーム / 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.

How it was tried: I used Google's chrome-devtools-mcp (usage statistics and CrUX reporting turned off, run with `--isolated --headless` in a clean temporary browser so it never touches your everyday Chrome or logged-in sessions) and let the model operate only a local page I built. The page contained deliberate problems: a missing image, a request that fails, and submit logic that uppercases the email address. The model found all of them and correctly reported the page text shown after the form was submitted. Note: this Skill itself carries no safety prompt, and it can drive a real browser.

できること

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` で抑えられます。

SKILL.md 原文パッケージ内 2 ファイル