---
title: "Console Ninjaとは？VS Codeにconsole.logを表示する使い方と料金【2026年10月に無料版終了】"
url: "https://www.issoh.co.jp/tech/details/6537/"
published: 2025-05-06
updated: 2026-11-05
categories: ["開発"]
publisher: "株式会社一創"
---

# Console Ninjaとは？VS Codeにconsole.logを表示する使い方と料金【2026年10月に無料版終了】

Console Ninjaは、ブラウザやNode.jsで動いているアプリの `console.log` と実行時エラーを、VS Codeのコードの行の横に表示する拡張機能です。開発元はテストランナー「Wallaby.js」やコード実行ツール「Quokka.js」を作っているWallaby Teamで、ブラウザのDevToolsとエディタを行き来せずにログを確認できます。

2026年10月23日に公式READMEと使用許諾契約が改訂され、これまで無料で使えたCommunity版はなくなりました。現在は全機能が有料サブスクリプションに含まれ、継続利用には契約が必要です。この記事では、2026年11月5日時点の公式README・マーケットプレイス・価格APIの情報をもとに、有料化で変わった点、料金とライセンスの選び方、導入手順、AIエージェントとのMCP連携、無料で代わりになる手段までを整理します。

## まとめ：Console Ninjaの要点

- VS Code拡張です（Marketplaceの最新版は1.0.548・2026年11月1日更新）。Open VSXにも同じ版が公開されており、CursorなどVS Code派生のエディタでも入れられます。CLIツールではなく、C++などのビルドシステム「Ninja」とも無関係です。
- 2026年10月23日から有料サブスクリプションが必須です。料金は個人向けが年58ドル（日本からの購入は税込10,320円）、組織向けが年116ドル（同20,640円）で、月払いもあります。会社の費用で買うなら組織向けを選びます。
- Vite・Webpack・Next.js（Turbopackを含む）・Nuxt・Astro・Remix・Jest・Cypressなどは、普段どおり開発サーバーを起動するだけで動きます。Expressなど素のNodeアプリはコマンドの前に `console-ninja` を付けます（Node v16.15.0以降）。
- ローカルの `node_modules` にパッチを当ててコードを計装し、値はlocalhostのWebSocketでエディタへ送られます。AI連携を使うと、エラーやログはAIサービスへ渡ります。
- お金をかけずにコードを書き換えずに値を記録したいだけなら、VS Code標準のデバッガーのログポイントで足ります。インライン表示とログの一覧・比較に年58ドルを払う価値があるかで判断します。

## Console Ninjaの正体と開発元

[公式README](https://github.com/wallabyjs/console-ninja)は、Console Ninjaを「実行中のブラウザまたはNodeアプリから、`console.log` の出力と実行時エラーをエディタに直接表示するVS Code拡張」と定義しています。ログはコードの行末にインライン表示され、ホバーすると展開できます。全件を時系列で見たいときは `Show Output` コマンドでログビューアを開きます。

### 配布先とバージョン

[Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja)での識別子は `WallabyJs.console-ninja` です。初回公開は2022年8月9日で、2026年11月5日時点の最新版は1.0.548、インストール数は約150万件、評価は93件で平均2.9です。拡張のマニフェストには動作要件として `vscode ^1.64.0` が指定されています。Cursorなどが参照するOpen VSXにも同じ識別子で1.0.548が公開されています（ダウンロード数は約61万件）。JetBrains IDE向けのプラグインはありません。

2026年1月20日には、ログビューアを作り直した「[Console Ninja v2](https://wallabyjs.com/blog/console-ninja-v2.html)」が発表されました。Marketplaceの版番号は1.0系のままで、v2はログビューアの世代を指す呼び名です。

### Quokka.js・Wallaby.js・Error Lensとの違い

Wallaby Teamの3製品と、名前が並べられやすいError Lensは、どの段階のどの情報を表示するかで分かれます。

| ツール           | 表示するもの      | 実行のされ方                   |
| ------------- | ----------- | ------------------------ |
| Console Ninja | 実行時のログとエラー  | 起動中のアプリ内（開発サーバー・テストランナー） |
| Quokka.js     | 式の評価結果      | スクラッチファイルを単独プログラムとして実行   |
| Wallaby.js    | テスト結果・カバレッジ | 入力中にテストを常時実行             |
| Error Lens    | Lint・型エラー   | 実行しない（静的解析の結果を表示）        |

アプリを実際に操作してバグを追う場面ならConsole Ninja、関数単体の挙動を試すならQuokka.jsが向いています。READMEは、テストランナー経由のログは表示できても、テストの失敗そのものはテストランナー側で処理されるためConsole Ninjaでは扱わない、と明記しています。

## 2026年10月の有料化で変わったこと

2026年10月23日、READMEと使用許諾契約（LICENSE.md）が[同じコミットで改訂され](https://github.com/wallabyjs/console-ninja/commit/22ad09f4ee)、同じ日にMarketplaceで1.0.545が公開されました。READMEの冒頭は「Console Ninja requires an active paid subscription.」に置き換わり、「Community」と「PRO」の2つの機能セットの説明は削除されています。

### Community版の廃止と既存ユーザーへの影響

改訂前の契約には無料版と有料版の区別があり、有料版の試用期間が終わると自動でCommunity版に戻る仕組みが書かれていました。改訂後の[使用許諾契約](https://github.com/wallabyjs/console-ninja/blob/main/LICENSE.md)では、使用できるのは「有料サブスクリプションが有効な間」か「試用期間中」だけです。以前から無料で使っていた人も、拡張を更新すればこの条件に従うことになります。

改訂前は有料版限定だった機能も、いまはすべてサブスクリプションに含まれます。READMEの対応一覧からは、Next.jsのTurbopackとExpoのiOS・Androidエミュレーターに付いていた「PRO」の表記が外れました。

契約しないと決めた場合は、アンインストールする前にコマンドパレットで `Console Ninja: Pause` を実行します。READMEによると、Pauseで `node_modules` に当てたパッチはすべて外れます。ブラウザにWebSocketエラーが残るなら、後述の手順でビルドツールのキャッシュを消してください。

### 料金と個人・組織ライセンスの選び方

決済代行Paddleの価格APIで2026年11月5日に確認した料金は次のとおりです。米国向けは税抜、日本向けは消費税込みの表示です。

| プラン    | 米国向け    | 日本向け（税込） |
| ------ | ------- | -------- |
| 個人・月払い | 6.05ドル  | 1,068円   |
| 個人・年払い | 58ドル    | 10,320円  |
| 組織・月払い | 12.10ドル | 2,135円   |
| 組織・年払い | 116ドル   | 20,640円  |

円建ての額は為替で変わるため、購入前に[公式の料金ページ](https://console-ninja.com/pricing)で確かめてください。

個人向けと組織向けの違いは、機能ではなく誰のお金で買うかです。使用許諾契約は、個人向けを「開発者が自分の資金で購入するもの」とし、組織が費用を負担することを禁じています。会社の経費で払うなら組織向けを選び、開発者1人ごとに1契約が必要です。どちらも複数のPCに入れられますが、同時には使えません。組織向けは組織内で別の開発者に付け替えられ、年払いならオフライン環境向けの有効化キーも発行されます。

### 試用期間の扱い

改訂後の契約では、試用は保証されていません。`Console Ninja: Manage License` コマンドから申し込めますが、許可するかどうかはWallaby側の判断で、許可された場合の期間は15日です。試用期間の終了後は、購入するか使用をやめるかのどちらかになります。

## インストールから最初のログ表示までの手順

VS Codeの拡張機能ビューで「Console Ninja」を検索してインストールし、`Console Ninja: Manage License` コマンドでサブスクリプションを有効にします。有効化にはメールでの手続きとネット接続が必要です。あとはプロジェクトのフォルダを開き、普段の手順のまま開発サーバーを起動します。

### Viteなど対応ツールの開発サーバーでの使い方

1. `npm run dev` など、アプリを開発・ウォッチ・ホットリロードモードで起動するスクリプトを実行します。
2. コードに `console.log` を書きます。多くのツールはホットリロードで即座に反映されます。
3. ボタンのクリックなど、そのコードが実行される操作をアプリ側で行います。

これで、該当行の右側に値が表示されます。何も表示されない場合は、VS Codeのステータスバーにある拡張のアイコンにカーソルを合わせると、現在の状態と次にやることが表示されます。

### ExpressなどのNode.jsアプリでの使い方

対応ツールを経由しない `node app.js` 型のアプリ（Express・Hapi・Fastify・自作サーバーなど）は、VS Codeの統合ターミナルでコマンドの先頭に `console-ninja` を付けて起動します。対象はNode v16.15.0以降です。

```
console-ninja node app.js
console-ninja npx tsx app.ts

# 以降のコマンドすべてに自動で付ける（macOS/Linux）
source console-ninja
node app1.js
```

外部のターミナルでも使うには、コマンドパレットの `Console Ninja: Install 'console-ninja' command` で `~/.console-ninja/.bin` をPATHに追加し、外部ターミナルを開き直します。Vite・Next.jsなど対応ツールで起動するプロジェクトでは、この前置きは不要です。

## 対応フレームワーク・ツールの範囲と例外

READMEの対応一覧には、サーバー側のログやエラーに例外が付いているものがあります。同じ「対応」でも、取れる情報に差があります。

| ツール                | 対応範囲                             | 例外・条件              |
| ------------------ | -------------------------------- | ------------------ |
| Vite               | React・Vue・Svelte等、Nuxt、SvelteKit | なし                 |
| Webpack            | CRA・Angular CLI・Gatsby           | なし                 |
| Next.js            | ブラウザ・サーバー（Node・Edge）、Turbopack   | middlewareは非対応     |
| Remix              | クライアント・サーバーのログ                   | エラーは非対応            |
| Astro              | クライアント・サーバーのログ                   | サーバー側エラーは非対応       |
| Nest.js            | Nest.js全般                        | 10以降でSWCを使う場合は追加設定 |
| Expo（React Native） | iOS・Androidエミュレーター、Webシミュレーター    | なし                 |
| Jest               | ログ                               | エラーは非対応            |
| Cypress            | E2Eテスト実行中のログ                     | なし                 |

このほか、Qwik、Shopify Hydrogen、Serverless Offline、静的サーバー（http-server・live-server・serve）に対応しています。VS Code拡張のLive ServerとLive Previewにも対応していますが、既定ではオフなので、拡張の設定でオンにします。Vitestは対応一覧にありません。一覧にないツールでも、Nodeで動くなら前述の `console-ninja` 前置きで動く可能性があります。

## node\_modulesへのパッチとローカル通信の仕組み

Console Ninjaは、ローカルにインストールされたビルドツールに入り込み、ブラウザやNodeプロセスに届く前のコードを、実行結果が変わらない形で書き換えます。そのために `node_modules` 内のパッケージにパッチを当て、`Pause` コマンドで外します。

この方式には、運用上の注意点が2つあります。

- **停止後に古いキャッシュが残る**：Pause後にブラウザでConsole NinjaのWebSocketエラーが出る場合は、ビルドツールのキャッシュを消します。READMEは `rm -rf node_modules/.cache`、`rm -rf .next`、`rm -rf .angular` を挙げており、それでも直らなければ `node_modules` を入れ直します。
- **手元で作った本番ビルドを外に出す場合**：CLIフラグと環境変数から本番モードを検知するとコードは書き換えられません。ただし、ローカルで本番ビルドを作ってそのまま配布・共有する運用なら、ビルド前にPauseすることが推奨されています。

送信される値は `console.log` とエラーの実行時の値だけで、宛先はlocalhostで動くエディタ側のWebSocketサーバーです。READMEは、この経路で実行時データがローカルマシンの外に送られることはないと明記しています。計装済みのコードが万一外部で動いても、ブラウザではホストが `127.0.0.1`・`localhost`・自機のIPv4アドレス以外なら何もせず、Nodeではlocalhostへの接続に失敗するだけでアプリは止まりません。別ホスト名から接続させたいときは `console-ninja.allowedHosts` 設定に追加します。

## ログポイント・Log Map・ネットワークログの使いどころ

契約すれば全機能が使えるので、`console.log` のインライン表示だけに使うのか、次の3つの機能まで使うのかで、料金に見合うかどうかが変わります。

- **ログポイント**：VS Codeのブレークポイント（`F9`）を置くだけで、その行の値が記録されます。デバッガーが動いていなければ処理は止まりません。`a.map(e => e.prop)` の `e` やJSXの中の値のように、`console.log` を差し込みにくい式でも、インラインブレークポイント（`Shift + F9`）で狙えます。関数やクラスの定義行に置くと、全行の値とカバレッジをまとめて取れます。
- **Log Map**：ログをコードの場所ごとにまとめて表示し、特定の行の値が操作に応じてどう変わるかを追えます。v2で旧Watchpointsを作り直した機能です。
- **ネットワークログ**：ブラウザからアプリへの `fetch` と `XMLHttpRequest` について、URL・メソッド・ステータスとリクエスト・レスポンスの本文を記録します。対象は、エディタで開いているファイルに関係するリクエストだけです。

このほか、`console.trace` の呼び出し履歴、`console.time` の経過時間、`console.warn`・`console.info`・`console.debug` の色分け、Svelteの `$inspect` もインライン表示されます。

## MCPサーバーとCopilot連携でAIにログを渡す設定

Console Ninjaには、エディタのAIエージェントがアプリの実行時ログとエラーを読み取るためのMCPサーバーが同梱されています。フルスタックアプリならブラウザ側とサーバー側の両方のログを渡せるので、エラーメッセージを手でコピーしてチャットに貼る手間がなくなります。GitHub CopilotのAgentモードでは追加設定なしで使え、それ以外のクライアントは次のように登録します。コマンドパレットの `Console Ninja: Open MCP settings` でもエディタ内に手順が表示されます。

### Cursorでの登録

全プロジェクトで使うなら `~/.cursor/mcp.json`、特定のプロジェクトだけなら `.cursor/mcp.json` に追記します。

```
{
  "mcpServers": {
    "console-ninja": {
      "command": "node",
      "args": ["~/.console-ninja/mcp/"]
    }
  }
}
```

Cursor SettingsのMCP Toolsで、console-ninjaの横のアイコンが緑になっていれば接続できています。WSL上のCursorで起動しない場合は、`node` の代わりにWSL側のNode.js実行ファイルをフルパスで書きます。

### Claude Codeでの登録

```
claude mcp add console-ninja -s project -- npx "-y" "-c" "node ~/.console-ninja/mcp"
```

`Connection failed: spawn node` と出る場合は、Claude CodeのMCPクライアントがNodeを見つけられていません。`node` を実行ファイルのフルパスに置き換えます。Claude Code自体の設定は [Claude Codeの使い方｜インストールから権限・CLAUDE.md設定、初日の進め方まで](/tech/details/17375/) で解説しています。Windsurf・Cline・Roo Codeの手順は[公式READMEのMCP Serverの節](https://github.com/wallabyjs/console-ninja#mcp-server)にまとまっています。

### AIに渡る情報と確認の設定

Copilotとの連携では、エラーの横の `Investigate with AI` アイコンを押すと、`@console-ninja` のチャットが開きます。最初に送られるのは、エラーメッセージ、スタックトレース（絶対パスやURL、関数名・変数名、各段のコード1行を含む）、ログの場所です。AIがソースコードやログを追加で求めたときは、既定では渡す前に確認が表示されます。Copilotの無料枠を使っている場合は、この連携が送るチャットも利用回数に数えられます。

ブラウザ側の画面操作やネットワークまでAIに見せたい場合は、[Chrome DevTools MCP](/tech/details/17749/)と組み合わせる選択肢もあります。Console Ninjaが渡すのは、ソースコードの行に結び付いたログとエラーで、DOMの操作はできません。

## ログが表示されないときの確認手順

1. **ステータスバーの状態表示**：拡張のアイコンにカーソルを合わせ、現在の状態とヒントを確認します。サブスクリプションが有効になっていない場合もここで分かります。
2. **VPNとファイアウォール**：エディタとの通信はローカルのWebSocketなので、VPN接続を切る、ファイアウォールを一時的に止めるなどして、通信が遮断されていないか確かめます。
3. **マルチルートワークスペース**：複数フォルダを開いている場合は `Console Ninja: Select Multi-Root Workspace Project` で対象プロジェクトを選び直します。
4. **トレースログ**：既定で `~/.console-ninja/trace.log` に記録されます。詳細が必要なら環境変数を付けて開発ツールを起動し直します。

```
# macOS/Linux
CONSOLE_NINJA_LOG_LEVEL="verbose" npm run dev

# Windows（PowerShell）
$env:CONSOLE_NINJA_LOG_LEVEL="verbose"
npm run dev
```

大きなオブジェクトを頻繁に出力すると、Console Ninjaは自動で取得範囲を絞ります（通常時はプロパティ100件・文字列51,200文字まで、負荷が高いときはプロパティ5件・文字列256文字まで）。値が途中で切れて見える場合は、`settings.json` の `console-ninja.logCaptureOptions` で上限を変え、エディタと開発ツールの両方を再起動します。

## 無料で代わりになるVS Code標準のログポイント

「コードを書き換えずに値を記録したい」だけなら、VS Codeに最初から入っているJavaScriptデバッガーのログポイントで足ります。[VS Codeの公式ドキュメント](https://code.visualstudio.com/docs/debugtest/debugging#%5Flogpoints)によると、ログポイントは実行を止めずにデバッグコンソールへメッセージを書き出す機能で、行番号の左の余白を右クリックして `Add Logpoint` を選び、`User ID: {user.id}` のように波かっこで式を埋め込みます。条件やヒット回数も付けられます。

Node.jsのアプリは、統合ターミナルの「JavaScript Debug Terminal」から起動すればデバッガーが自動で接続します。ブラウザのコードは、VS Code内蔵のEdge・Chrome用デバッガーで起動すれば同じようにログポイントを置けます。Console Ninjaとの違いは次の4点です。

| 比較点          | Console Ninja         | VS Code標準のログポイント |
| ------------ | --------------------- | ---------------- |
| 費用           | 年58ドル〜                | 無料               |
| ログの表示場所      | コードの行の横・ログビューア        | デバッグコンソール        |
| 起動の仕方        | 普段の `npm run dev` のまま | デバッグセッションとして起動   |
| 値の比較・場所ごとの集約 | 差分表示・Log Map          | なし               |

判断の目安は、1日に何度もログを足しては消す作業をしているかです。ホットリロードの開発サーバーを止めずに、行の横で値の変化を見続けたいならConsole Ninjaに払う価値があります。たまに値を確かめる程度なら、標準のログポイントで十分です。

## Console Ninjaを入れないほうがよいケース

次の条件に当てはまるなら、導入を見送るか別の手段を優先してください。

- **テストの失敗をエディタで追いたい**：Jestはログだけでエラーは非対応で、Vitestは対応一覧にありません。テスト中心の開発なら、同じチームのWallaby.jsか、[Vitestとは？Viteネイティブなテスト基盤の仕組みと採用判断を実装目線で解説](/tech/details/16023/) で扱っているVitest標準のUIとウォッチモードの方が目的に合います。
- **node\_modulesの書き換えを許可できない**：ロックファイルやパッケージの整合性を厳しく監査している環境、あるいは手元のビルド成果物をそのまま配布する運用では、パッチ方式そのものがリスクになります。
- **JetBrains IDEやNeovimで開発している**：配布先はVS CodeのMarketplaceとOpen VSXに限られます。
- **チームの一部だけが使いたいが会社負担にできない**：個人向けライセンスは組織が費用を出せないため、会社が費用を負担するなら利用する開発者の人数分の組織向けが必要です。
- **ブレークポイントで止めて状態を調べたい**：Console Ninjaはログを見るためのツールで、ステップ実行の代わりにはなりません。切り分けの考え方は [デバッグとは？バグを再現・切り分け・修正する体系的な手順と手法を実装者向けに解説](/tech/details/13572/) を参照してください。

## よくある質問

### Console Ninjaは無料で使えますか？

いいえ。2026年10月23日の改訂で無料のCommunity版はなくなり、有料サブスクリプションが必要になりました。料金は個人向けが月6.05ドルまたは年58ドル、組織向けが月12.10ドルまたは年116ドルです。試用は申し込めますが、許可されるとは限りません（許可されれば15日間）。

### Console NinjaはCLIツールですか？

いいえ。本体はVS Code拡張です。`console-ninja` コマンドはありますが、素のNode.jsアプリを起動するときに前置きして計装を有効にする補助コマンドで、単独でログを整形・表示するCLIではありません。

### Ninja CLIやninjaコマンドとは同じものですか？

別物です。`ninja` コマンドはC++などのビルドで使われるビルドシステム「Ninja」のものです。Console NinjaはJavaScript・TypeScriptのアプリのログをVS Codeに表示する拡張で、両者に関係はありません。

### Console NinjaのMCPサーバーは何に使いますか？

CursorやClaude Code、Windsurf、ClineなどのAIエージェントに、実行中アプリのブラウザ側・サーバー側のログとエラーを読み取らせるために使います。GitHub CopilotのAgentモードでは追加設定なしで使えます。

### 本番環境のコードにConsole Ninjaの処理が混ざることはありますか？

本番モードを検知するとコードは書き換えられません。ただし、ローカルで本番ビルドを作ってそのまま配布する場合は、ビルド前にエディタで `Pause` コマンドを実行するよう公式が推奨しています。

## 関連記事

- [デバッグとは？バグを再現・切り分け・修正する体系的な手順と手法を実装者向けに解説](/tech/details/13572/)
- [Chrome DevTools MCPの導入手順と設定｜58ツールの絞り込みと接続方式を実装目線で解説](/tech/details/17749/)
- [CursorのDebug Modeとは？使い方とログ収集の仕組み、Agent・Plan・Askとの違い](/tech/details/10736/)
- [Claude Codeの使い方｜インストールから権限・CLAUDE.md設定、初日の進め方まで](/tech/details/17375/)
- [Vitestとは？Viteネイティブなテスト基盤の仕組みと採用判断を実装目線で解説](/tech/details/16023/)

---

出典: [Console Ninjaとは？VS Codeにconsole.logを表示する使い方と料金【2026年10月に無料版終了】](<https://www.issoh.co.jp/tech/details/6537/>)（株式会社一創）