はじめに
Console Ninjaとは
Console Ninjaは、console.log の出力をエディタ内で直接確認できる様になる、VSCodeの拡張機能です。
特徴
-
console.logの出力をコードの横に表示 - 全てのログを時系列で確認できる専用のビューア
- ログの詳細を確認できるマウスオーバー機能
- ViteやWebpack、Next.jsなどの最新フレームワークに対応
インストール
VSCodeの拡張機能からConsole Ninjaをインストールします。
終わりです。「え？」と思うかもしれませんが、これだけでConsole Ninjaは有効になります。
他に設定することはありません。あとは開発サーバーを起動するだけです。
どう動いているかは謎です。
使ってみる
1. console.logを書く
適当なところに console.log を書きます。
準備は本当にこれで終わりです。
2. 開発サーバーを起動する
いつも通り開発サーバーを起動します。
Express、Hapi、Fastifyなどのフレームワークは console-ninja をコマンドの前につけるだけで対応できます。
詳しくはこちらを参照してください。
3. ログを確認する
console.log の出力がエディタ内に表示されます。
横に出てる青い文字が出力されたログです。
これだと見にくいので、マウスオーバーするとポップアップで詳細が表示されます。
右上のアイコンをクリックすると、ログの一覧が表示されます。
これでデバッグが捗りますね。
いちいちブラウザとVSCodeを行き来したり、見にくいコンソールで時系列を追う必要がなくなります。
(PRO版ではファイルごとの表示や印付けなどさらに高度なことができます)
Pro版の機能を使ってみる
私はPro版を使っているので、ちょっとだけPro版の機能を紹介します。
(最近課金したので、全然使いこなせてないです)
高度なログビュアー
Pro版ではログの一覧をファイルごとに表示や、印付けなどができます。
画像はファイル名と行数で印を付けた例です。
実行されるごとに設定した印が付くので、どこでログが出力されたかが一目でわかります。
PREDICTIVE LOGGING
日本語だと「予測ログ」とか「予測的なログ」とかそんな感じです。
Pro版ではログの出力を予測してくれます。
もはやconsole.logを書く必要がなくなります。
意味わからんですよね。
手元のプロジェクトにいい例がなくて、画像だとわかりにくいですが、以下の画像だとReactのコンポーネントの戻り値を予測してくれています。
料金
Console Ninjaは2つのバージョンがあります。
Community Edition
基本機能は無料で利用できます。
PRO Edition
Community Editionに加えて高度なビュアー、ウォッチポイント、ログポイント、コードカバレッジなどが利用できます。
まとめ
以上、Console Ninjaの紹介でした。
デバッグが捗るので、ぜひ使ってみてください。
本当に便利です。
Discussion
これを観て、使い始めたけど、神・拡張機能すぎる！！
いい記事、ありがとうございます🙏