はじめに
普段個人開発ではClaudeCodeを使っていますが、いくつか自分用にカスタマイズしています。
今回はそのうちの一つである、devtoolsMCPと呼んでいる自作MCPサーバーを紹介します。
こちらの記事のリライトになります。
Zennの方はClaudeCodeに未だ記憶があったのでそのままClaudeに書かせたものですが、リライトに当たって100%人間が書きます。
対象読者
- 誰に: ClaudeCodeを使ってwebサービスを開発している方に
- なんと言ってほしいか: devtools-mcpを使ってみようかな
何が出来るのか
こちらがリポジトリになります。
READMEが長いですね。ClaudeCodeに書かせたのがモロバレです。
中に、ローカルMCPサーバーと、chrome拡張機能が含まれています。
両方使います。
このツールが提供している機能は大きく2つあります。
npm run devといったプロセスが返ってこないコマンドに対して非同期で実行できる仕組みを提供している。- サーバーログ、ブラウザログの両方を取得する仕組みを提供している。
非同期実行
ClaudeCodeに開発をさせていると、しばしば開発環境を実行しようとすることがあります。
ユーザーにローカル環境のURLを提供してすぐテストできるようにとするその配慮は買うのですが、npm run devなどプロセスが返ってこないコマンドは、
しばらく待たされた後タイム・アウトしてしまい、割と煩わしいです。
この鬱陶しさが、devtools-mcpを自作しようと思ったトリガーでした。
と指示すれば、devtoolsのstart_dev_serverを使って起動してくれます。
これは、子プロセスで引数のコマンドを実行するが、結果を待たず即returnさせるものです。
このコマンドを叩く際に、プロセス名も指定させるので、例えばどのポート番号で起動したか忘れた場合でも、Claudeに聞けば教えてくれるようにしています。
ログの収集
サーバー側のログは、上記プロセス名を指定させることでそのプロセスが吐いているログを収集することが出来ます。
一方でブラウザ側はデフォルトのままでは収集できません。
そこで、同梱のchrome拡張機能を使って、ブラウザログを収集し、定期的にdevtoolsが別途立てているログ収集用サーバーに飛ばすようにしました。
chrome拡張機能は、console周りの関数と、fetch関数をラップして、出力内容を保管してから親メソッドを呼び出すようにしています。
ログの保管はリングバッファを用いてメモリ圧迫を防いでいます。
実際に使用してみた例
サーバー起動の例
プロセス名で指定するのでポート番号覚えてなくて良いのも良い
エラー特定の例
devtools-mcpの導入方法
導入まで3ステップ
ステップ1: リポジトリをclone
ステップ2: chrome拡張機能のインストール
- 拡張機能の管理画面（
chrome://extensions）を開く
スキーマはお使いのブラウザに依存します。 - Developer modeをONにして、
Load unpackedをクリック
/path/to/devtools-mcp/extensionを選択
エラーが出なければ成功です。
ステップ3: MCPサーバーの設定
- ビルドする
npm run install && npm run build - 以下のコマンドを実行
claude mcp add devtools node /path/to/devtools-mcp/dist/index.js - ClaudeCodeを立ち上げる
エラーが出なければ成功
よくする指示の仕方
- 開発環境を立ち上げるとき:
devtoolsで開発環境を起動 - エラーに遭遇したとき:
エラーを解決して
FAQ
Playwright MCPとどう違うの？
似た機能を提供している有名どころとして、Playwright MCPがあります。
こちらもサーバーを立てて、Claudeがブラウザを操作して、ログやスクリーンショットを収集してくれます。
とても便利で僕もdevtools-mcpと併用していますが、差別化ポイントとしては、
Playwright MCPはClaudeにテストを任せることに特化している
のに対して、
devtools-mcpは人間がテストすることに特化している
と考えています。
Playwright MCPがサーバーを立てるとchroniumが起動すると思いますが、ここには普段僕が使っているchrome拡張など何も入っていません。
しかもClaudeが操作権を持っているので、ひょんなことから勝手に閉じられたりするので、あまり僕はplaywrightで起動したブラウザは触りたくありません。
ただ、画面操作やスクリーンショットの自動取得はとても強力なので、Claudeに動作確認を一任させたい時に使います。
一方でdevtools-mcpは、Claudeが画面を操作することは出来ませんが、自分が普段使っているブラウザで動作確認が出来て、その過程でエラーが起きたとしても、コピペして伝える必要がないのがメリットです。
これだけで通じます。
もしかしたら僕がやり方を知らないだけかもしれません。
ご存じの方いらっしゃったらコメントでこっそりと教えて下さい。
拡張機能はストアにある？
ストアにはありません。
このMCP専用の拡張機能なので、使われる方は
chrome://extensionsのLoad unpackから当リポジトリのextensionディレクトリを読み込んでください。
おわりに
久々にAIに頼らず記事を書きました。たまには良いものですね。
というわけで、もしよろしければ一度使ってみてください！
感想、不具合報告、PRお待ちしています！
