サーバー側とクライアント側のコードのデバッグ

実行 ウィジェットのリストから、 JavaScript デバッグ構成と一緒に起動する Node.js 実行構成を選択します。 次に、 をクリックし、メニューから Edit を選択します。

または、 Create a Node.js run/debug configuration の説明に従って、新しい Node.js 実行構成を作成します。

開いたダイアログには、選択した Node.js 実行 / デバッグ構成の設定が表示されます。 ブラウザー / Live Edit タブに切り替えます。

ブラウザー / Live Edit タブで、デバッグセッションを起動したときにブラウザーを自動的に起動するには、 起動後 を選択します。 下のフィールドに、アプリケーションを開く URL アドレスを入力します。

起動後 チェックボックスの隣のリストから使用するブラウザーを選択してください。

• システムデフォルトブラウザーを使用するには、 デフォルト を選択します。

• カスタムブラウザーを使用するには、リストからブラウザーを選択します。 JavaScript クライアント側コードのデバッグは、 Google Chrome(英語) およびその他の Chromium ベースのブラウザー(英語)でのみサポートされていることに注意してください。

• ブラウザーを構成するには、 をクリックし、表示される ウェブブラウザーとプレビュー ダイアログで設定を調整します。 詳細は、 ウェブブラウザー を参照してください。

JavaScript デバッガーを使用する のチェックボックスを選択します。

実行 ウィジェットのリストから、変更された Node.js 実行構成を選択し、その横にある をクリックします。

開いた デバッグ ツールウィンドウには、Node.js 実行 / デバッグ構成のタブと Javascript デバッグ実行 / デバッグ構成のタブの 2 つのタブがあります。 どちらのタブがアクティブになるかは、最初のヒットブレークポイントの場所によって異なります。

デバッグセッションを続行します。 ブレークポイントをステップ実行し 、フレームを切り替え、オンザフライで値を変更し、 中断されたプログラムを調べ、 式を評価し、 ウォッチを設定します。

ブラウザーが開いたら、コードの実行をトリガーする手順を実行します。 例: アプリケーションの開始ページからブラウザー内の別のページに移動します。

クライアント側コードの最初のブレークポイントに到達すると、アプリケーションが停止し、ブラウザーのページが再読み込みされ、 デバッグ ツールウィンドウのフォーカスが JavaScript デバッグ構成のタブに移動します。

デバッグセッションを続行します。 ブレークポイントをステップ実行し 、フレームを切り替え、オンザフライで値を変更し、 中断されたプログラムを調べ、 式を評価し、 ウォッチを設定します。