Spy-js を使用した JavaScript のプロファイリング

1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブで Spy-js プラグインをインストールして有効化してください。 このプラグインは PyCharm Pro でのみ利用できます。

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

1. 実行 | 実行構成の編集 に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

   

   開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン（ ）をクリックし、リストから Spy-js を選択します。

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

2. 使用する Node.js ランタイムを指定します。

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

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

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

   Microsoft オフィシャル Web サイトの詳細を参照してください。

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

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

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

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

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

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

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

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

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

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

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

1. 実行 | 実行構成の編集 に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

   

   開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン（ ）をクリックし、リストから Spy-js for Node.js を選択します。

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

2. 使用する Node.js ランタイムを指定します。

   Project エイリアスを選択すると、PyCharm は ノードランタイム フィールドがある JavaScript ランタイムページのプロジェクトのデフォルトインタープリターを自動的に使用します。 ほとんどの場合、PyCharm はプロジェクトのデフォルトランタイムを検出し、そのフィールドに自動で入力します。

   別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 をクリックして新しいインタープリターを構成することもできます。

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

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

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

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

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

   Microsoft オフィシャル Web サイトの詳細を参照してください。

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

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

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

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

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

6. オプション：

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

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

   • アプリケーションの 作業ディレクトリ(英語)を選択します。

     デフォルトでは、このフィールドに プロジェクトのルートフォルダーが表示されます。

   • process.argv(英語) 配列を使用して開始時にアプリケーションに渡す Node.js 固有の引数を指定します。

   • 該当する場合は、Node.js 実行可能ファイルの 環境変数(英語)を指定します。

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

• ツールバーの 実行 / デバッグ構成を選択 リストで 新しく作成した構成 を選択し、 をクリックします。 Spy-js ツールウィンドウ が開き、 トレース実行 タブにキャプチャーされたイベントが表示されます。

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

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

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

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

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

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

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

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

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

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

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

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

2. 開かれた Spy-js キャプチャ除外ダイアログで、左側のペインにある 追加 をクリックします。

3. 右側のペインで、 除外名 フィールドにフィルター名を指定し、除外ルールのリストを構成します。

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

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

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

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

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

• 除外するイベントを選択し、 <イベント名> イベントのミュート または <スクリプト名> ファイルのミュート を選択してください。 ユーザー定義フィルターが現在適用されている場合、新しいルールは自動的に追加されます。 すべてをキャプチャー が現在有効な場合、 Spy-js Capture Exclusions Dialog が開き、選択したイベントやスクリプトをもとに新しいフィルターを作成するか、既存のフィルターを選択して新しいルールを追加できます。

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

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

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

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

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

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

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

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

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

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

• ツールバーの 自動スクロールしてトレース トグルボタンを押します。

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

ある機能からその呼び出しまで移動するには

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

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

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

Spy-js 拡大鏡を有効にするには

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

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

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

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

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

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

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