こんにちは。ダイの大冒険エンジョイ勢のbun913と申します。
みなさんはPlaywrightのMCPサーバーを使いながら「どんなAPIリクエスト・レスポンスがあるかBodyも含めてみてほしいな」と思ったことはありませんか？私はあります。
PlaywrightのMCPサーバーを使うことでAIにブラウザを操作させるだけでなく、自分でそのサイトを動かしながら指示を出すことが可能です。
ただし、既存(2025/07/06時点)のplaywright-mcpのネットワーク監視機能ではネットワークリクエストやレスポンスのBodyなどの詳細情報を見ることができないと思われます。
そこで、playwright-mcpにPull Requestを出したことがあるのですが、メンテナーの方から「チャットをボディで溢れさせるのは実用的ではない」という理由でクローズされてしまいました。代替案として「ネットワークをHARファイルに記録し、次世代のクライアント向けにリソースとして公開する」という提案をいただきましたが、今すぐ使いたいニーズには応えられませんでした。
↓その時の記事の内容です。
実際、昨今のWebサービスではアナリティクス系も含めると相当のリクエストをバックグラウンドで送っているため、全てをキャプチャーするとコンテキストがすぐにいっぱいになってしまいます。
とはいえ適切にURLやContent-Typeを狙い通りにフィルターできたら比較的利用できるのでは？という思いがあり、playwright-mcpを拡張して使えるような形で小さなMCPサーバーを作って公開してみました。
ツールの利用イメージ
このツールでは以下のように、先にPlaywrightを利用してブラウザを立ち上げ、それを後続のPlaywright-MCPに利用できる形で提供します。
実行フロー：
設定は以下のように--cdp-endpointというPlaywright-MCPのオプションを使って、Playwrightで立ち上げたブラウザインスタンスを操作可能な状態で渡すイメージです。
{
"mcpServers": {
// playwrightのremote-debugging-portを指定して後続のplaywright mcpに操作を渡せるようにする
"network-monitor": {
"command": "npx",
"args": ["playwright-min-network-mcp"]
},
// 先ほど指定したポート（デフォルトで9222）を利用してPlaywright-MCPで操作可能にする
"playwright": {
"command": "npx",
"args": ["@playwright/mcp", "--cdp-endpoint", "http://localhost:9222"]
}
}
}
何が嬉しいのか
このMCPサーバーにより、フィルタリングされたリクエスト・レスポンス情報をAIモデルに渡して、効率的なAPIテストの作成やデバッグ、データ検証などが可能になります。
例えば、以下のような指示で一連の機能をテストし、その内容を持ってAPIテストの実装をしてもらうことも可能です：
- 今からネットワークの記録をMCPで開始してください
- このブログ入力欄に適当にbun913の評判について入力してください
- その上で「下書保存」のボタンを押してください
- 下書き一覧ページに移動して下書きがあることを確認し、次は「公開済みページ」に移動して先ほどのブログがないことを確認してください
- どのようなAPIが順に呼ばれていましたか？それを元に今のシナリオのAPIテストを実装しましょう。まずはブログの下書き保存の機能からです
単発のデバッグや、フロントエンドとバックエンド間のデータ構造確認、バグ調査など様々な場面で活用できると考えています。
開発背景と設計思想
このMCPサーバーを開発した背景には、Playwright-MCP本体には組み込みにくい機能を独立したサーバーとして提供したいという思いがありました。
詳細なネットワーク監視機能は非常に有用ですが、全てのリクエストをキャプチャすると膨大なデータサイズになってしまうため、本体への組み込みは困難です。しかし、適切にフィルタリングできれば実用的になるという仮説のもと、独立したMCPサーバーとして実装しました。
CDPの活用による拡張可能性
今回の開発で最も重要な発見は、CDP（Chrome DevTools Protocol）を活用することで、Playwright-MCPでは実現できない様々な拡張機能が開発可能ということです。
- ブラウザインスタンスを共有しながら、異なる専門機能を提供
- 既存のMCPサーバーを拡張せずに、新機能を独立して開発
- パフォーマンス監視、セキュリティチェック、アクセシビリティ検証など、様々な応用が可能
今回開発したMCPサーバーは、以下の設計思想を重視して作成しました：
- シンプル：わずか3つのツールのみ提供
- 効率的：コンテキストサイズを最小限に抑制
- 実用的：APIテストやデバッグ業務に特化したフィルタリング
- 柔軟：カスタムフィルター対応
- 独立性：他のMCPツールとの組み合わせ可能
特に、デフォルトで以下のContent-Typeのみを監視対象とすることで、実用性と効率性を両立しています：
-
application/json- APIレスポンス -
application/x-www-form-urlencoded- フォーム送信 -
multipart/form-data- ファイルアップロード -
text/plain- アナリティクスやシンプルなテキストデータ
もちろん、必要に応じて"all"を指定することで、CSS、JavaScript、画像なども含めた全てのリクエストを監視することも可能です。
まとめ
- Playwright MCPを拡張する形でブラウザ上のネットワークアクティビティを監視するMCPサーバーを作成しました
- フィルタリング機能により、効率的なAPIテスト実装やデータ検証が可能になります
- CDP（Chrome DevTools Protocol）を活用することで、既存のPlaywright MCPには組み込めない機能を独立したMCPサーバーとして実現できます
- ただし、今回のフィルターを使ってもやはり巨大なコンテキストサイズになる可能性があるため、ログファイルへの出力などの機能の追加も含めて検討しています
- 今回は初回リリースのため簡単な紹介に留めますが、利用していく中で改良をしてまた記事にしたいと思います。
参考資料
以上、長い文章を読んでいただきありがとうございました。bun913でした。
Discussion