1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ブラウザMCPのトークンを実測:Playwright MCPとChrome DevTools MCPを68回計測し、削減プロキシを作った

1
Last updated at Posted at 2026-10-22

Claude CodeにブラウザMCPをつなぐとトークンを大量に使う、という話をよく見かけます。ページを見るたびに1万〜5万トークン入るという記事もあります。本当にそうなのか、減らせないのかを知りたくて、よく使われる2つ、MicrosoftのPlaywright MCPとGoogleのChrome DevTools MCPを実測しました。途中で削減ツールまで作ったので、その結果もまとめます。

測り方

  • Claude Code 2.1.295、Opus 5.5、effort medium、Windows 11(2026-10-22)
  • 1回の実行につなぐMCPサーバーは1つだけ。Web検索・ファイル操作・シェルなどの標準ツールは無効にして、ブラウザのツールだけを使わせました
  • Playwright MCP 0.0.83、Chrome DevTools MCP 1.11.0(どちらもヘッドレス)
  • タスク7種類。普段の作業は各2回、スナップショットのタスクは各5回(全体スナップショットのみ3回)、合計68回
  • トークンはClaude Codeのログに残るリクエストごとの使用量(キャッシュを含む入力全体)で数えました

結果1:普段の作業は思ったより軽い

タスク Playwright 入力トークン 費用 Chrome DevTools 入力トークン 費用
TodoMVCに3件追加、1件完了 178,408 $0.19 199,737 $0.22
Wikipedia:Pythonの設計者と初登場年 115,888 $0.17 117,240 $0.17
Hacker News:上位5件 90,006 $0.16 93,496 $0.17
Wikipediaの表:リリース日5件 91,350 $0.16 93,683 $0.16

(2回の平均、費用はOpus 5.5のAPI価格。$0.16は約25円、$0.22は約35円)

16回すべて正解で、ツールが一度に返した結果は最大でも6,012文字でした。Opus 5.5はページ全体を読まず、必要な部分だけを取り出す短いスクリプトや、Playwrightの検索ツールを使いました。

ではトークンはどこへ行ったのか。1リクエストあたり約2万3千トークンが送られていて、その大半はMCPではなく、Claude Code自身の指示文とツール定義でした。ブラウザ作業は手順が多く、この固定分が手順の数だけ繰り返されます。TodoMVCが一番高かったのも、ページが大きいからではなく、クリックと入力の手順が多かったからです。

結果2:長いページを丸ごと読むと20万トークン

次にわざと最悪のケースを作りました。英語版Wikipediaの「Python (programming language)」を開き、ページ全体のアクセシビリティスナップショットを1回撮らせました。

  • Playwright MCP:504,168文字
  • Chrome DevTools MCP:427,400文字

このテキストをOpus 5.5に送って数えると、205,642トークンと208,926トークンでした。Opusの定価で1回約260円($1.65)です。OpenAIのo200kでは13万3千〜13万8千トークンなので、同じテキストがClaudeでは50%以上多くなります。リンク先URLや要素IDが多いテキストは、Claudeのトークナイザーでは特に不利です。

幸い、Claude Codeはこれをすでに止めています。毎回「結果が大きすぎる」として受け取らず、ファイルに保存して分割して読むよう案内しました。そのためClaude Codeでは20万トークンが一度に入ることはありませんでした。ただ、こうした安全装置のないクライアントでは、ページ1枚で20万トークンがそのまま入る可能性があります。今回はClaude Codeしか測っていないので、ほかのクライアントが実際にどうするかは確認していません。

結果3:中くらいのページはそのまま入る

本当の問題は、Claude Codeが止めない中くらいのページです。Hacker Newsのトップページのスナップショットはそのまま入り、次のリクエストを次の分だけ大きくしました。

  • Playwright MCP:18,407トークン
  • Chrome DevTools MCP:14,115トークン

中身を見ると大半はノイズでした。リンクごとのURL行、「クリック可能」の印、レイアウト用の空の要素、「|」のような区切り文字、深いインデントが内容より多かったのです。

削減プロキシ tokensave-mcp-diet を作った

Playwright MCPやChrome DevTools MCPの前に挟む小さな中継サーバーで、動作は3つです。

  1. 圧縮: スナップショットが大きければ、リンク先、カーソル表示、区切り文字、空の要素を除き、インデントを詰めます。要素のrefは残るので、クリックや入力はそのまま動きます。
  2. アウトライン: それでも大きければ、見出し・入力欄・ボタン・リンクだけを送ります。Wikipediaの脚注のような長いリンクの並びは折りたたみます。
  3. 必要な部分だけ読む: 元のスナップショットはメモリに保存し、新しいツール snapshot_detail でrefや文字列から必要な部分だけを取り出せます。

導入はMCP設定を1か所変えるだけです。npmアカウントやAPIキーは不要です。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "github:johnisking/tokensave-mcp-diet", "--", "npx", "-y", "@playwright/mcp@latest"]
    }
  }
}

同じタスクをこのツールあり・なしで測りました。

タスク サーバー スナップショットのトークン(そのまま) ダイエット後 タスクの費用
Hacker News上位5件 Playwright 18,407 6,792(−63%) $0.298 → $0.205(−31%)
Hacker News上位5件 Chrome DevTools 14,115 8,066(−43%) $0.271 → $0.224(−18%)
Wikipediaで事実を探す Playwright 5回中3回拒否 9,193 $0.181 → $0.236(+30%)
Wikipediaで事実を探す Chrome DevTools 毎回拒否 8,479 $0.230 → $0.237(+3%)
Wikipedia全体スナップショット Playwright 約205,600(Claude Codeは拒否) 9,193(−96%) $0.154 → $0.222(+44%)
Wikipedia全体スナップショット Chrome DevTools 約208,900(Claude Codeは拒否) 8,479(−96%) $0.160 → $0.221(+38%)

(費用は5回の平均、全体スナップショットは3回の平均。$1=約158円で、$0.298は約47円、$0.205は約32円。Hacker Newsは5回とも費用の差が1セント以内で、スナップショットのトークンも実行ごとの差は4%以内でした。)

Hacker Newsではスナップショットのトークンが43〜63%、タスクの費用が18〜31%減り、5回とも答えも同じでした。

正直に書くと、WikipediaではClaude Codeの中では損でした。Claude Codeが短い拒否メッセージを返していたところに約9千トークンのアウトラインが入るため、タスクの費用は3〜44%増えました。一方、大きな結果をそのまま受け取るクライアントなら、20万トークンが9千トークンになり96%減ります。このツールが役立つのは、中くらいのページをよく読む作業と、Claude Codeのような安全装置がない環境です。

追記(同日):バージョン0.2でWikipediaの損を解消しました。 6万文字を超えるページは目次だけ(見出しとref、約1,100トークン)を返し、見出しのrefを指定するとその節をまるごと返すようにしました。各5回で測り直すと、Wikipediaで事実を探すタスクはPlaywrightで$0.181 → $0.173(−4%)、Chrome DevToolsで$0.230 → $0.178(−23%)、全体スナップショットだけのタスクはClaude Codeの拒否とほぼ同じ(+2%、+3%)、Hacker Newsは−30%と−17%のままでした。Wikipediaの全体スナップショットは約205,600トークンから約1,140トークン(−99%)になります。上のインストール方法で0.2が入ります。

実際に使うときのポイント

  • Claude CodeでのブラウザMCPの費用は、ページよりも手順の数で決まります。少ない手順で終わるよう、やってほしいことを一度にはっきり伝えるのが一番効きます。
  • 高くつくのは「ページ全体を読んで」という頼み方です。特定の要素、検索、短いスクリプトで必要な部分だけを求めましょう。
  • 大きなツール結果をそのまま受け取るクライアントを使うなら、tokensave-mcp-dietのようなプロキシを挟むか、スナップショットをファイルに保存させるのが安全です。Chrome DevTools MCPのtake_snapshotとevaluate_scriptにはfilePathパラメータがあり、全体スナップショットの5回中3回はOpusが指示なしで使いました。

今回の限界

  • 普段の作業は各2回、スナップショットのタスクは各5回(全体スナップショットは3回)、モデル1つ、PC1台での計測です。Hacker Newsはリアルタイムで変わるので、ポイントなどは実行ごとに少し違いました。
  • 測ったのはClaude Codeだけです。Claudeデスクトップアプリ、Cursor、Codexが20万トークンの結果をそのまま受け取るかは確認していません。
  • サーバーのバージョンが変わるとスナップショットの形式も変わります。Playwright MCPはすでに、ページ移動時のスナップショットをファイルに出す形に変わっています。
  • アウトラインは本文を省くため、モデルが必要な部分を改めて求める必要があり、手順が増えることがあります。

まとめ

ブラウザMCPが「毎回」大量のトークンを使うわけではありません。Opus 5.5はほとんどの場合必要な部分だけを読み、費用の主因はClaude Codeがリクエストごとに送る固定分と手順の数でした。ただし、長いページを一度丸ごと読むと20万トークンを超え、中くらいのページはClaude Codeでもそのまま入ります。tokensave-mcp-dietはこの2つのケースを減らすために作った無料のツールです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?