WebStorm 2026.2 Help

JSEval

JSEval プラグインを使用すれば、JavaScript や TypeScript ファイル内でコードの評価結果をその場で確認できます。 このツールでは、 console.log 式や、 //= コメントが付与された式の値も確認できます。

さらに、ランタイムの選択、 環境変数やアプリケーションパラメーター の指定、 TypeScript 処理 など、実行コンテキストを細かく変更できます。

始める前に

WebStorm バージョン 2026.1.1 以降を使用していることを確認してください。

JSEval プラグインをインストールする

JsEval プラグインをインストールする
  1. Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。

  2. マーケットプレース タブを開き、リストから JSEval プラグインを探して インストール をクリックします。

ライブ評価とコードカバレッジ

JSEval を使えば、プログラムの実行中に評価やコードカバレッジのライブアップデートを受けながら、その場でコードを確認できます。 式の値は、利用可能または実行されたときにエディター上ですぐに表示されます。

評価する式をマークする

  • 評価したい式の末尾に //= コメントを追加してください。

  • または、以下のいずれかのエラーメソッドを使って値をコンソールに出力することもできます:

    • console.log()

    • console.error()

    • console.trace()

    • console.info()

    • console.debug()

    • console.warn()

評価を開始する

  1. 評価するファイルをエディターで開いてください。

  2. メインメニューで 表示 | ツールウィンドウ | JSEval を選択し、 JSEval ツールウィンドウを開きます。

  3. JSEval ツールウィンドウで、次のいずれかを実行します:

    • ツールバーの トラック開いているファイル アイコン をクリックし、リストから評価するファイルを選択します。

    • 現在アクティブなエディタータブでファイルを評価するには、 トラック現在のファイル アイコン をクリックします。

    評価対象ファイル名の新しいタブが JSEval ツールウィンドウに追加され、評価マークが付いた式の値が表示されます。 これらの値はエディター内にも、対応する式の隣に表示されます。

エラートレース

ファイルの実行に失敗した場合、 JSEval はエラートレースを表示し、どこでエラーが発生したかを明確に確認できます。

JSEval ツールウィンドウ

評価・表示された各式は、専用の JSEval ツールウィンドウでさらに詳細な確認ができます。 ここではオブジェクトや配列の深く入れ子になった要素まで確認でき、ツリーから値をコピーすることも可能です。 項目をダブルクリックすると、どこで評価されたかのポイントに移動します。

経過時間をトラッキング

//' コメントを使うと、実行開始から特定の式に到達するまでにかかった時間を計測できます。

インポートのサポート

パッケージや他のプロジェクトファイルから imports を使ってファイルをトラックすることもできます。 インポートされたファイルに変更があると値が更新されます。

実行コンテキストの構成

実行ランタイムの選択

コードを実行する際、さまざまな Node.js ランタイムバージョンに切り替えて違いを確認できます。

TypeScript 処理の構成

TypeScript ファイルでは、Node.js 用の TypeScript トランスパイル処理も構成できます。

JSEval ツールウィンドウのツールバーにあるドロップダウンリストから、次のいずれかのオプションを選択してください:

TypeScript 処理の構成
  • デフォルト TS 処理方式― このオプションを選ぶと TypeScript の処理は追加されません。 高度なファイル設定で独自の処理を 上記のように構成することもできます。

  • 型変換― このオプションを選択すると --experimental-transform -types が Node.js パラメーターに追加されます。 TypeScript 専用型、例えば enumnamespace などに変換が適用されます。

追加の実行プロパティを構成する

さらにランタイムやアプリケーションに渡すパラメーター、アプリケーションの実行ディレクトリ、環境変数も指定可能です。

高度な評価制御設定を指定する

  1. JSEval ツールウィンドウで、 高度な構成アイコン をクリックします。

    高度な構成アイコン
  2. 表示された 高度なファイル評価コントロール ダイアログで追加の構成設定を指定します

    Advanced File Evaluation Control ダイアログ

評価レポートの見た目を構成する

評価レポートや時間レポートのデフォルトスタイルを変更するには、 Ctrl+Alt+S で設定を開き、 エディター | カラースキーム | JSEval でスタイルと色を好みに合わせて構成してください。 新しい見た目は プレビュー エリアで確認できます。

2026 年 7 月 14 日