サーバー側とクライアント側のコードのデバッグ
PyCharm を使用すると、Node.js アプリケーションのサーバー側コードとクライアント側 JavaScript コードを一緒にデバッグできます。そのためには、Node.js 構成に加えて、JavaScript デバッグ構成を作成して起動する必要があります。
PyCharm を使用すると、メインの Node.js 構成を作成または編集するときに、ライブ編集タブから JavaScript デバッグ構成を作成できます。この場合、Node.js 構成を開始するたびに、JavaScript デバッグ構成が自動的に開始されます。
または、実行構成の編集ダイアログ () から JavaScript デバッグ構成を作成し、構成を個別に起動します。
2 つの実行 / デバッグ構成を作成する
実行ウィジェットのリストから、JavaScript デバッグ構成と一緒に起動する Node.js 実行構成を選択します。次に、
をクリックし、メニューから編集を選択します。
または、Node.js 実行 / デバッグ構成を作成するの説明に従って、新しい Node.js 実行構成を作成します。
開いたダイアログには、選択した Node.js 実行 / デバッグ構成の設定が表示されます。ブラウザー / Live Edit タブに切り替えます。
ブラウザー / Live Edit タブで、デバッグセッションを起動したときにブラウザーを自動的に起動するには、起動後を選択します。下のフィールドに、アプリケーションを開く URL アドレスを入力します。
起動後チェックボックスの隣のリストから使用するブラウザーを選択してください。
システムデフォルトブラウザーを使用するには、デフォルトを選択します。
カスタムブラウザーを使用するには、リストからブラウザーを選択します。JavaScript クライアント側コードのデバッグは、Google Chrome(英語) およびその他の Chromium ベースのブラウザー(英語)でのみサポートされていることに注意してください。
ブラウザーを構成するには、
をクリックし、表示されるウェブブラウザーとプレビューダイアログで設定を調整します。詳細については、「ブラウザーの構成」を参照してください。
JavaScript デバッガーを使用するチェックボックスを選択します。
サーバーとクライアントのコードをデバッグするためのセッションを開始する
実行ウィジェットのリストから、変更された Node.js 実行構成を選択し、その横にある
をクリックします。
開いたデバッグツールウィンドウには、Node.js 実行 / デバッグ構成のタブと Javascript デバッグ実行 / デバッグ構成のタブの 2 つのタブがあります。どちらのタブがアクティブになるかは、最初のヒットブレークポイントの場所によって異なります。
デバッグセッションを続行します。ブレークポイントをステップ実行し、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。
ブラウザーが開いたら、コードの実行をトリガーする手順を実行します。例: アプリケーションの開始ページからブラウザー内の別のページに移動します。
クライアント側コードの最初のブレークポイントに到達すると、アプリケーションが停止し、ブラウザーのページが再読み込みされ、デバッグツールウィンドウのフォーカスが JavaScript デバッグ構成のタブに移動します。
デバッグセッションを続行します。ブレークポイントをステップ実行し、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。
関連ページ：
Node.js の実行とデバッグ
PyCharm は、Node.js アプリケーションの実行とデバッグを支援します。PyCharm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に：JavaScript and TypeScript、JavaScript Debugger、Node.js に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。Node.js アプリケーシ...
ブラウザーの構成
PyCharm には、HTML ファイルの出力の実行、デバッグ、プレビュー中に IDE から自動的にインストールおよび起動できる最も一般的なブラウザーの事前定義リストが付属しています。PyCharm は、標準の手順に従ってブラウザーをインストールすることを前提としており、各インストールに、ブラウザーの実行可能ファイルまたは macOS アプリケーションへのデフォルトパスを表すエイリアスを割り当てます。デフォルトリストのブラウザーに加えて、カスタムブラウザーのインストールを設定できます。PyCha...
プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。PyCharm は、一連のステップアクションを提供します。特定のステップアクションの選択は、次の行に直接移動する必要があるか、中間のメソッド呼び出しもインスペクションする必要があるかなど、戦略によって異なります。ステップボタンは、デバッグツールウィンドウのツールバーにあります。ステップオーバー：現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップさ...
中断されたプログラムを調べる
デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる：プログラムの状態はフレームで表されます。プログラムが一時停止すると、現在のフレームスタックがデバッグツールウィンドウのフレームタブに表示されます。フレームはアクティ
マルチプロセスデバッグ
PyCharm を使用すると、child_process.fork() メソッドまたはクラスターモジュールによって起動される追加の Node.js プロセスをデバッグできます。このようなプロセスは、デバッグツールウィンドウのデバッガータブのフレームペインにスレッドとして表示されます。デバッグするプロセスにブレークポイントを設定します。Node.js の実行とデバッグの説明に従って、Node.js 実行 / デバッグ構成を作成します。ツールバーの実行ウィジェットリストから、新しく作成した構成を選択し、そ...