IntelliJ IDEA 2021.1 ヘルプ

Spy-js

Spy-js は、さまざまなプラットフォーム / ブラウザー / デバイス、さらにはサーバーサイドの Node.js アプリケーションで実行される JavaScript のデバッグ、トレース、プロファイリングのためのツールです。Spy-js はソースマップを認識し、CoffeeScript と TypeScript コードでアプリケーションをトレースできます。詳細は、CoffeeScript のデバッグおよびファイル監視を参照してください。

IntelliJ IDEA を使用すると、SpyJS 固有のデバッグセッション中にアプリケーションをトレースし、専用の UI で結果を調べることができます。

スクリプトをトレースするために、Spy-js は、スクリプトの実行時に呼び出された関数について Spy-js の UI にレポートする計測命令を挿入することにより、その場で修正します。

Spy-js は、Web アプリケーションと Node.js アプリケーションをトレースするためのさまざまなメカニズムを使用します。

  • Web サイトのスクリプトを変更するには、Spy-js はブラウザーと追跡している Web サイトとの間に置かれるプロキシサーバーとして機能しなければなりません。トレースした Web サイトをブラウザーで開くと、Spy-js はスクリプト要求を受信し、Web サイトからスクリプトを要求し、スクリプトを受信し、必要な変更を加えて、スクリプトを実行するブラウザーに送信して、Spy-js UI へランタイム情報を送信します。

  • Node.js アプリケーションの場合、アプリケーションがすでに実行されている場合、Spy-js は Node.js サーバーとスクリプトの間に入りません。Node.js アプリケーションをトレースするために、spy-js は Node.js サーバーとアプリケーション自体を起動します。これにより、Spy-js はスクリプトの要求とスクリプトを傍受して変更することができ、トレース手順は Web サイトのスクリプトをトレースするときと同様に実行されます。

始める前に

  1. Node.js(英語) をダウンロードしてインストールします。

  2. 設定 / 環境設定 | プラグインページで Spy-js バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

Spy-js UI

キャプチャーされたイベントの表示、コールスタックの確認、ソースコードへの移動など、トレース関連のアクティビティはすべて、専用の Spy-js ツールウィンドウ、特にそのトレース実行タブで実行されます。このタブは、ツールバーと 3 つのペインで構成されています。

  • イベントペイン

    このペインには、キャプチャーされたイベントのツリーが表示されます。最上位ノードは、トレースに関与する Web ページの文書を表します。、ドキュメント上にマウスを置くと、IntelliJ IDEA は、ブラウザーが実行されている文書の URL アドレスを持つツールチップ、それが開かれているブラウザー、およびオペレーティングシステムが表示されます。ドキュメントノードには、開かれているブラウザーを示すアイコンもあります。

    文書ノードに、ページで検出されたイベントとそこから開始されたスクリプトがリストされます。同じ種類のイベントはビジュアルコンテナーにまとめられます。コンテナーのヘッダーには、その中にグループ化されているイベントの名前、コンテナー内のすべてのイベントの平均実行時間、およびコンテナー内のイベントの数が表示されます。各ノードを展開して、その中の個々のイベントを調べることができます。

    スクリプトファイル名には、イベントスタックペインで作業するときに区別できるように色分けされたインジケータがあります。スクリプトファイル名の上にマウスを置くと、完全なスクリプト URL が表示されます。

    イベントがクリックされると、その呼び出しスタックがイベントスタックペインに表示されます。スタックは、関数呼び出しのツリーで表されます。

  • イベントスタックペイン

    イベントペインのイベントをクリックすると、そのコールスタックがイベントスタックペインに表示されます。スタックは、関数呼び出しのツリーで表されます。各ツリーノードは、呼び出された関数を表します。ノードテキストには、合計実行時間、スクリプトファイル名、関数名が含まれます。ノードをクリックすると、クイック評価ペインに追加の関数呼び出しの詳細、パラメーター値、戻り値、関数実行中に発生した例外の詳細が表示されます。

    ペインはエディターと同期されているため、スタックツリーの項目から対応するトレースファイルまたはソースファイルに移動できます

    • トレースファイルは、スクリプトの書き込み保護されたプリティファイドバージョンであり、<script name>.js.trace という名前です。スタックツリーのアイテムをダブルクリックするか、選択してコンテキストメニューからトレースにジャンプを選択すると、対応するトレースファイルがエディターで開き、クリックした機能にカーソルが置かれます。別のアプローチは、トレースに自動スクロールトグルボタンを押して、さまざまなスタックノードを選択することです。この場合、イベントペインでイベントまたはスクリプトをクリックすると、トレースファイルが開きます。

      関数にジャンプするだけでなく、呼び出し元のコード内の場所にもジャンプできます。これを行うには、必要な項目を選択し、コンテキストメニューから呼び出し元にジャンプを選択します。

      ファイルの内容がハイライトされ、選択したスタックノードのコード実行パスが表示されます。

    • ECMASript6CoffeeScriptTypeScript コードを使用してアプリケーションをトレースしている場合、Spy-jsマップされたトレースファイルも生成します。これらは、拡張子が .ts.trace.coffee.trace、または .js.traceEcmaScript 6TypeScript、または CoffeeScript トレースファイルです。これらのファイル内のコードの断片は、実際に実行されたかのようにハイライトされます。

    • また、イベントスタックペインで項目を選択し、選択のコンテキストメニューからソースに移動を選択することにより、表示されているソースファイルに移動できます。トレースされたサイトが IntelliJ IDEA プロジェクトにマッピングされている場合、IntelliJ IDEA はマッピングに従って対応するローカルファイルを検出し、このファイルをエディターで開きます。IntelliJ IDEA プロジェクトにマップされていないサイトをトレースしている場合、IntelliJ IDEA は、ブラウザーでページソースを表示するを選択した場合と同様に、読み取り専用ページソースを開きます。

      トレースされたサイトが IntelliJ IDEA プロジェクトとマップされているとき、IntelliJ IDEA は開かれたトレースファイルを編集しようとしたときにソースファイルを開きます。

  • クイック評価ウィンドウ

    イベントスタックペインでノードをクリックすると、クイック評価ペインに、関数の実行中に例外が発生した場合に、追加の関数呼び出しの詳細、パラメーター値、戻り値が表示されます。

Spy-js トレースセッションの開始

IntelliJ IDEA から、Spy-js は、Web アプリケーションをトレースするためのタイプ Spy-js または Node.js アプリケーションをトレースするためのタイプ Spy-js (Node.js) の実行 / デバッグ構成で開始されます。

Spy-js デバッグ構成を作成するには

  1. ツールバーの the Add button をクリックして、リストから Spy-js を選択します。

    実行 / デバッグ構成: Spy-js ダイアログが開きます。

  2. 使用する Node.js インタープリターを指定します。

  3. トレースサーバーポートは自動的に入力されます。ポートの競合を回避するために、推奨値を受け入れ、システムプロキシを自動的に構成するチェックボックスを選択したままにすることをお勧めします。その結果、指定したポート番号がシステムプロキシサーバーに自動的に設定されます。

    または、システムプロキシポートを手動で構成します。

    設定 | Windows の設定 | ネットワークとインターネット | プロキシに移動し、プロキシサーバーを使用するをオンにします。ポートフィールドに、トレースサーバーのポート番号を入力します。

    マイクロソフト公式 Web サイト(英語)の詳細を参照してください。

    システム環境設定 | ネットワークに移動し、詳細設定をクリックして、プロキシタブに切り替え、自動プロキシ設定をクリアして、プロキシ構成ファイルの URL アドレスを入力します。URL のポートが、実行 / デバッグ構成のトレースサーバーポートと同じであることを確認してください。

    Apple 公式 Web サイト(英語)の詳細を参照してください。

  4. 使用リストから、トレースセッションを構成する方法を指定する方法を選択します。

    • Spy-js に内部定義済み構成を適用させるには、デフォルトの構成を選択します。

    • カスタムで手動で作成した設定を適用するには、構成ファイルオプションを選択し、カスタム設定ファイルの場所を下の構成フィールドに指定します。

      構成ファイルは、Spy-js の設定要件(英語)に適合する有効な JavaScript コードを含む拡張子 .js または .conf.js の JavaScript ファイルです。IntelliJ IDEA がプロジェクトで拡張子 .conf.js のファイルを検出すると、これらのファイルがリストに表示されます。

      構成ファイルへのパスを手動で入力するか、参照 the Browse button をクリックして、表示されるダイアログで場所を選択します。指定すると、構成ファイルがリストに追加されるため、パスを指定する代わりに次回からリストから取得できます。

Web アプリケーションのトレースを開始するには

  1. ツールバーの実行 / デバッグ構成を選択リストで新しく作成した設定を選択して Start the Debugger をクリックします。Spy-js ツールウィンドウが開き、空の実行のトレースタブとプロキシサーバーの状態を知らせるトレースプロキシサーバータブが表示されます。

  2. ブラウザーに切り替え、ページをリフレッシュしてデバッグを開始します。Spy-js はこのページでイベントのキャプチャーを開始し、Spy-js ツールウィンドウはイベントペインに表示します。

Node.js デバッグ構成用の Spy-js を作成するには

  1. ツールバーの the Add button をクリックして、リストから Spy-js (Node.js) を選択します。

    実行 / デバッグ構成: Spy-js (Node.js) ダイアログが開きます。

  2. 使用する Node.js インタープリターを指定してください。これはローカル Node.js インタープリターまたは Windows Subsystem for Linux の Node.js です。

  3. アプリケーションを開始する JavaScript ファイルを指定します。

    CoffeeScript をトレースする場合は、生成された JavaScript ファイルへのパスを指定します。ファイルは、外部で、またはファイル監視を使用したコンパイルによって生成できます。詳細については、CoffeeScript のデバッグを参照してください。

  4. トレースサーバーポートは自動的に入力されます。ポートの競合を回避するために、推奨値を受け入れ、システムプロキシを自動的に構成するチェックボックスを選択したままにすることをお勧めします。その結果、指定したポート番号がシステムプロキシサーバーに自動的に設定されます。

    または、システムプロキシポートを手動で構成します。

    設定 | Windows の設定 | ネットワークとインターネット | プロキシに移動し、プロキシサーバーを使用するをオンにします。ポートフィールドに、トレースサーバーのポート番号を入力します。

    マイクロソフト公式 Web サイト(英語)の詳細を参照してください。

    システム環境設定 | ネットワークに移動し、詳細設定をクリックして、プロキシタブに切り替え、自動プロキシ設定をクリアして、プロキシ構成ファイルの URL アドレスを入力します。URL のポートが、実行 / デバッグ構成のトレースサーバーポートと同じであることを確認してください。

    Apple 公式 Web サイト(英語)の詳細を参照してください。

  5. トレースセッションに適用する構成設定で構成ファイルを指定します。

    構成ファイルは、Spy-js の設定要件(英語)に適合する有効な JavaScript コードを含む拡張子 .js または .conf.js の JavaScript ファイルです。IntelliJ IDEA がプロジェクトで拡張子 .conf.js のファイルを検出すると、これらのファイルがリストに表示されます。

    構成ファイルへのパスを手動で入力するか、参照 the Browse button をクリックして、表示されるダイアログで場所を選択します。指定すると、構成ファイルがリストに追加されるため、パスを指定する代わりに次回からリストから取得できます。

  6. オプション:

    • Node.js の起動をカスタマイズする Node パラメーターを入力します。

      例: ECMAScript 6(英語) スクリプトのトレースを有効にするには、Node パラメーターとして --harmony を指定します。Node.js はバージョン 0.11.13 以降でなければなりません。
    • アプリケーションの作業ディレクトリ(英語)を選択します。

      デフォルトでは、このフィールドにプロジェクトのルートフォルダーが表示されます
    • process.argv(英語) 配列を使用して開始時にアプリケーションに渡す Node.js 固有の引数を指定します。

    • 必要に応じて、Node.js 実行可能ファイルの環境変数(英語)を指定します。詳細については、実行 / デバッグ構成: Spy-js (Node.js) を参照してください。

Node.js アプリケーションのトレースを開始するには

トレースセッションの保存と読み込み

Spy-js は、zip アーカイブに圧縮できる .json ファイルにトレースセッションの呼び出しとプロパティを格納します。トレースセッションイメージを Spy-js にロードするには、後でいつでも抽出することができます。実際にスクリプトが実行されないため、ロードされたイメージはセッションを復元しないことに注意してください。以前に実行されたコードのフローとプロパティを分析するだけで済みます。

トレースセッションのイメージを保存するには

  • イベントツールバーの Settings をクリックして、リストからトレースの保存を選択します。IntelliJ IDEA は、zip アーカイブ内の影響を受けるすべての .json ファイルを圧縮し、アーカイブが保存されているフォルダーを開きます。

以前のトレースセッションのイメージをロードするには

  1. Spy-js を有効にするには、イメージに保存されたセッションと同じタイプのトレースセッション、Spy-js または Node.js の Spy-js をそれぞれ開始します。上記の Spy-js トレースセッションの開始を参照してください。

  2. イベントツールバーの Settings ボタンをクリックし、リストからトレースのロードを選択します。

  3. 開いたダイアログで、目的のセッションのイメージを含む zip アーカイブの場所を選択します。Spy-js は実行を停止し、ロードされたトレースをロードされた <ロードされたセッション> という新しいタブに表示します。

イベントキャプチャーポリシーの構成

デフォルトでは、実行構成で URL アドレスを明示的に指定しない限り、Spy-js は開いているすべての Web ページ上のすべてのイベントをキャプチャーします( https セキュア Web サイトを除く)。キャプチャーされたすべてのイベントは、Spy-js ツールウィンドウのイベントペインに表示されます。ユーザー定義のイベントフィルターを適用することで、特定の種類のイベントのキャプチャーを抑制できます。

新しいカスタムフィルターを定義したり、その場で既存のフィルターにイベントパターンを追加することができます。

利用可能な設定済みフィルターを表示するには

  • ツールバーの the Capture Events button をクリックします。現在適用されているフィルターにはチェックマークが付いています。デフォルトでは、事前定義済みのすべてキャプチャーフィルターが適用されます。

アプリケーションを停止せずにイベントのキャプチャーを停止するには

  • ツールバーのイベントのキャプチャーボタン Capture Events をクリックし、コンテキストメニューからすべてミュートを選択します。アプリケーションはまだ実行されていますが、イベントペインに最後に取得したイベントが表示されます。これは、スクリプトを解析してイベントペインに表示する必要があるが、新しいイベントがキャプチャーされるときに削除されないようにする場合に役立ちます。

新しいイベントフィルターを定義するには

  1. ツールバーのイベントのキャプチャーボタン Capture Events をクリックし、リストからキャプチャー除外対象の編集を選択します。

  2. 開いている Spy-js のキャプチャー除外対象ダイアログで、左側のペインで追加 Icons general add をクリックします。

  3. 右側のペインで、除外対象の名前フィールドにフィルター名を指定し、除外ルールのリストを構成します。
    • ルールを追加するには、Icons general add をクリックすると、条件を除外対象に追加ダイアログが開きます。値 / パターンフィールドにパターンを入力し、条件タイプリストで、パターンをイベントタイプまたはスクリプト名のどちらに適用するかを指定します。グロブパターンマッチング(英語)が使用されることに注意してください。OK をクリックすると、IntelliJ IDEA によって Spy-js のキャプチャー除外対象ダイアログが表示されます。

    • ルールを編集するには、リストでルールを選択し、Icons actions edit をクリックして、開いたダイアログでルールを更新します。ルールを削除するには、リストでルールを選択し、Icons general remove をクリックします。

適用するフィルターを選択するには

  • Filter をクリックし、リストで必要なフィルターの横にあるチェックボックスを選択します。フィルターが設定されていないか、使用可能なフィルターがどれもタスクに適合しない場合は、前述のように新しいフィルターを作成します。

イベントペインですでにキャプチャーされたイベントのツリーをナビゲートしている間は、トレースしたくないイベントやスクリプトを見つけることができます。上記のようにフィルターを作成できますが、この場合はペインを離れる必要があります。IntelliJ IDEA では、イベントペインからイベントやスクリプトを検出するとすぐに、そのイベントやスクリプトに基づいて除外ルールを作成することができます。

オンザフライで除外ルールを作成するには

  • 除外するイベントを選択し、<イベント名> イベントのミュートまたはミュート <script name> file を選択します。ユーザー定義フィルターが現在適用されている場合は、新しいルールが自動的に追加されます。すべてキャプチャーが現在アクティブな場合は、Spy-js のキャプチャー除外対象ダイアログが開きます。ここでは、選択したイベントまたはスクリプトに基づいて新しいフィルターを作成するか、既存のフィルターを選択して新しいルールを追加できます。

タイムスタンプのラベルは、特定の期間内にコードの実行を分析できます。例: 2 つのタイムスタンプラベルを設定し、それらの間でどのイベントがキャプチャーされたかを確認できます。または、逆に、特定の期間内にキャプチャーされなかったイベントを特定し、パフォーマンスの問題を検出することができます。

タイムスタンプラベルを設定するには

  • イベントペインのコンテキストメニューからラベルの追加を選択します。<timestamp> でラベル付けされたラベルがドキュメントノードに追加されます。

ペインとエディター間を移動する

イベントスタックペインは、イベントペインおよびエディターと同期します。

スクリプトまたはイベントの呼び出しスタックを表示するには

  • イベントペインでイベントまたはスクリプトをクリックします。呼び出しスタックはイベントスタックペインに表示されます。

  • 必要に応じて、対応するトレースファイルをエディターで自動的に開くには、ツールバーのトレースに自動スクロールトグルボタンを押します。

エディターでイベントまたはスクリプトのトレースファイルを開くには

トレースファイルは、書き込み禁止のスクリプトで、<script name>.js.trace という名前が付けられています。

  • イベントスタックペインで、スクリプトまたはイベントを 2 回クリックするか、コンテキストメニューでトレースにジャンプを選択します。

  • 自動ナビゲーションを有効にするトレースに自動スクロール)をクリックし、イベントペインで必要なイベントまたはスクリプトをクリックします。

イベントペインをエディターと直接同期させるには

  • ツールバーのトレースに自動スクロールトグルボタンを押します。
    その後、イベントペインでノードをクリックすると、IntelliJ IDEA はその呼び出しスタックをイベントスタックペインに表示し、エディターで対応するトレースファイルを開きます。また、イベントスタックをスクロールすると、IntelliJ IDEA はエディターで対応するファイルを自動的に開き、呼び出された関数をハイライトします。

ある機能からその呼び出しまでナビゲートするには

  • イベントスタックペインで、コールスタック内の必要な項目を選択し、選択内容のコンテキストメニューから呼び出し元にジャンプを選択します。

ECMAScript 6、TypeScript、または CoffeeScript をナビゲートする

Spy-jsソースマップをサポートします。つまり、イベントスタックペインから ECMAScript 6TypeScript または CoffeeScript の元のソースコードに直接ジャンプして、実行されたコードフラグメントを確認できます。

Spy-js は、マップされたトレースファイルも生成します。これらは、拡張子が .ts.trace.coffee.trace、または .js.traceEcmaScript 6TypeScript、または CoffeeScript トレースファイルです。これらのファイル内のコードの断片は、実際に実行されたかのようにハイライトされます。

または、実行された JavaScript コードに移動するには、トレースにジャンプを選択します。

ソースマップの処理を構成するには

  • イベントスタックのツールバーの Settings をクリックして、コンテキストメニューから次のオプションを選択して、ソースマップの処理方法を設定します。

    • コンパイル時に生成されたソースマップを使用して ECMAScript 6TypeScript、または CoffeeScript ソースコードへのナビゲーションを有効にするには、ソースマップルックアップを有効にするを選択します。

    • インストゥルメントされたコードをマッピングするすべてのソースマップを生成するには、ソースマップ生成を有効にするを選択します。Chrome 開発ツールまたは FireFox FireBug 開発ツールで元のコードをデバッグする場合は、このオプションを選択します。

    • 可能な場合は常にマッピングされたトレースを開くを選択すると、イベントからその呼び出し元へのナビゲーションを呼び出したときに Spy-jsマップされたトレースファイルを開こうとします。

関数呼び出しからそのソースコードに移動するには

  • イベントスタックペインで機能を選択し、選択のコンテキストメニューから次のいずれかのオプションを選択します。

    • ECMAScript 6、TypeScript、または CoffeeScript のソースコードに移動するには、選択のコンテキストメニューからソースに移動を選択します。

    • JavaScript トレースファイルに移動するには、トレースにジャンプを選択します。

    • マッピングされたトレースファイル(ECMAScript 6、TypeScript または CoffeeScript)に移動するには、マッピングされたトレースにジャンプを選択します。

ある機能からその呼び出しまでナビゲートするには

  • イベントスタックの機能を選択し、呼び出し元にジャンプを選択します。

    • 可能な場合は常にマッピングされたトレースを開くオプションを選択すると、対応するマップされたトレースファイルが開きます。

    • 可能な場合は常にマッピングされたトレースを開くオプションが選択されていない場合、JavaScript トレースファイルが開きます。

高度なトレースナビゲーション

アドバンスドトレースナビゲーションを使用すると、コールに基づいてスタック全体を移動し、呼び出されていない関数を見つけることができます。つまり、実行されていないコードの断片を見つけてスキップする理由を分析できます。

次の 6 つのアクションを使用できます。トレースファイル内の次 / 前 / 前の関数の次 / 前の呼び出しに移動します。アクションの完全なリストは、イベントスタックペインのコンテキストメニューから利用できます。選択した機能の前回の呼び出し、前の機能の前の呼び出し、次の機能の次の呼び出しに移動するには、イベントスタックペインのナビゲーションツールバーからも使用できます。

spy_js_advanced_navigation_1.png
これらのアクションのいずれかを選択すると、カーソルはスタック内の呼び出しにジャンプします。トレースに自動スクロールトグルボタンを押すと、対応するトレースファイルが自動的に開き、カーソルを呼び出しに合わせます。

高度なトレース検索

高度なトレース検索を使用すると、(トレースされたすべてのイベントの)トレース全体内の関数の呼び出し間をナビゲートできます。つまり、ブラウザーで 5 ページをトレースしている場合、イベントペインには 5 つの文書ノードが表示されます。IntelliJ IDEA は、これらすべてのノードで選択した関数の呼び出しを検索し、その関数の呼び出しの数を状況バーに表示します。

別の高度な検索やナビゲーションを呼び出すと、検索結果がリセットされ、検索ツールバーが非表示になります。

また、この関数呼び出しをすべてのイベントで検索するオプションを選択すると、コールの発生回数が計算されることに注意してください。検出されたコールを分析すると、時間が経過し、新しいイベントがキャプチャーされ、検出された最初のコールがすでにスタックから削除されている可能性があります。

すべての文書ノードで関数の呼び出しを検索するには

  • イベントスタックペインで機能を選択し、選択のコンテキストメニューからこの関数呼び出しをすべてのイベントで検索するを選択します。

    見つかった呼び出しの数が状況バーに表示され、ツールバーには以前は非表示だった 4 つのナビゲーションシェブロンボタンが表示されます。
    spy_js_advanced_search_1.png

見つかった呼び出し内をナビゲートするには

  • シェブロンボタンを使用します。
    • 最初に検出されたコールにジャンプするには、Spy js advanced search first occurence をクリックします。

    • 最後に検出されたコールにジャンプするには、Spy js advanced search last occurence をクリックします

    • 検出された次の呼び出しにジャンプするには、Spy js advanced search next occurence をクリックします。状況バーにメッセージが表示されます: <発生したコールの総数> の発生回数 <番号>

      spy_js_advanced_search_2.png

    • 以前に検出されたコールにジャンプするには、Spy js advanced search previous occurence をクリックします。

ランタイムデータを使用した基本補完リストの拡張 (Spy-js 自動補完)

Spy-js 自動補完という用語は、ランタイムデータから取得した候補を使用して基本補完リストを拡張することを意味します。Spy-js 自動補完機能は、すでに実行されたコードのソースファイルから利用できます(対応するトレースファイルでは緑色でハイライトされています)。

キャレットをソースファイル内のシンボルに置き、Ctrl+Space を押すと、Spy-js はブラウザーまたは実行中の Node.js アプリケーションからデータを取得し、次の規則に従って基本補完リストとマージします。

  1. オブジェクトが基本補完リストに存在し、ランタイムから取得された場合、パラメーター、属性、型などに関する詳細情報を提供するバリアントがリストに残ります。

  2. Spy.js で検索されたオブジェクトは、リストの一番上に表示され、the Spy.js icon アイコンでマークされます。検索されたオブジェクトがブラウザーに固有のものである場合、オブジェクトは the Spy.js icon アイコンとこのブラウザーのアイコンでマークされます。

Spy-js 自動補完を有効にするには

  • イベントツールバーの Settings ボタンをクリックし、リストから Spy-js の自動補完と拡大鏡を有効にするを選択します。

デバッグセッションを実行せずに式を評価する (Spy-js の倍率)

Spy-js の倍率という用語は、デバッグセッションを実際に実行せずに式を評価することを示します。式をクリックするか、キャレットをその位置に置いて Ctrl+Alt+F8 を押すと、式に式の値を示すツールチップが表示されます。Spy-js が複数の値を取得する場合、ツールチップの Icons general add アイコンをクリックして、値のリストを展開します。

拡大機能は、実行済みコードと未実行コードの両方のソースファイルから利用できます。

既定では、機能はオフになっています。

Spy-js 倍率を有効にするには

  • イベントツールバーの Settings ボタンをクリックし、リストから Spy-js の自動補完と拡大鏡を有効にするを選択します。

依存関係図の表示

Spy-js を使用すると、クライアント側および Node.js アプリケーションのランタイムアプリケーション / イベントダイアグラムを構築して調べることができます。

  1. ダイアグラムを生成する:

    • アプリケーション全体の依存関係を使用してダイアグラムを作成するには、ドキュメントノードを選択して、選択のコンテキストメニューからアプリケーションの依存関係ダイアグラムを表示するを選択します。

    • 1 つのイベントの依存関係を含むダイアグラムを作成するには、イベントペインで必要なイベントを選択し、イベント依存関係ダイアグラムを表示するを選択します。

  2. ダイアグラムを分析する:

    • ダイアグラムは別のエディタータブで開きます。ダイアグラムのノードはプロジェクトファイルを表し、エッジはソースファイル内にターゲットファイル内の関数を呼び出す関数が 1 つ以上あることを表します。

    • ノードまたはエッジの詳細を調べるには、ノードまたはエッジを選択して、エディターの右上隅にある専用ペインにその詳細ツリーを表示します。このペインには、接続している関数の組み合わせと、呼び出しが行われたイベントおよび行われた呼び出しの数が表示されます。

関連ページ:

CoffeeScript | IntelliJ IDEA

IntelliJ IDEA では、JavaScript にコンパイルされた CoffeeScript を使用できます。IntelliJ IDEA は *.coffee ファイルを認識し、でマークします。CoffeeScript コードでブレークポイントを直接設定でき、IntelliJ IDEA はコンパイル時に生成されたソースマップを使用してブレークポイントを認識します。IntelliJ IDEA は、キーワード、ラベル、変数、パラメーター、関数の補完を提案することにより、CoffeeScript コー...

ファイル監視 | IntelliJ IDEA

ファイル監視は IntelliJ IDEA ツールであり、IDE でファイルを変更または保存するときに、コンパイラー、フォーマッタ、リンターなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あらかじめ定義されたファイル監視が適用されるすべてのファイルで実行されます。プロジェクトに関連するファイル監視が設定されていない場合、IntelliJ IDEA はファイルウォッチャーを追加すること...

プラグインを管理する | IntelliJ IDEA

プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しいプログラミング言語を学ぶのに役立ちます、プラグイン設定を開く設定 / 環境設定ダイアログで、プラグインを選択します。マーケットプレースタブを使用して...

Spy-js ツールウィンドウ

ツールウィンドウは、Spy-js プラグインが有効になっている場合にのみ使用できます。Spy-js プラグインは IntelliJ IDEA にバンドルされていませんが、JetBrains リポジトリからプラグインをインストールするに従って設定 / 環境設定 | プラグインページにインストールできます。タイプ Spy-js または Spy-js (Node.js) の実行構成を起動すると、ツールウィンドウが開きます。Spy-js ツールがイベントをキャプチャーするとすぐに、イベント自体、その詳細、スタックトレ...

トレース実行タブ | IntelliJ IDEA

このタブは、ツールバーと 3 つのペイン(イベントペイン、イベントスタックペイン、クイック評価ウィンドウ)で構成されています。イベントツールバー:ツールバーのボタンを使用して、キャプチャーするイベントの範囲を制御し、プレゼンテーションを構成し、キャプチャーされたイベントのリストをナビゲートします。すべて展開するこのボタンをクリックすると、リスト内のすべてのノードが展開されます。をすべて折りたたむこのボタンをクリックすると、リスト内のすべてのノードが折りたたまれます。スタックトレースの上へ un...

Node.js | IntelliJ IDEA

Node.js は、ブラウザーの外部、たとえばサーバーやコマンドラインで JavaScript を実行するための軽量なランタイム環境です。IntelliJ IDEA は Node.js と統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、メンテナンスを支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.j...