IntelliJ IDEA 2020.3 ヘルプ

Chrome での JavaScript のデバッグ

IntelliJ IDEA は、Chrome と連携する client-side JavaScript コード用の組み込みデバッガーを提供します。以下のビデオと以下の説明は、このデバッガーを使い始めるための基本的なステップを示しています。

始める前に

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

組み込みサーバーで実行されているアプリケーションのデバッグ

IntelliJ IDEA はあなたのアプリケーションをプレビューしデバッグするために使用できる内蔵 Web サーバーを持っています。このサーバーは常に稼働しており、手動構成は不要です。すべてのプロジェクトファイルは、プロジェクト構造に関して、ルート URL http://localhost:<built-in server port>/<project root> でビルトインサーバー上で提供されます。

デバッグを開始する

  1. 必要に応じて、JavaScript コードにブレークポイントを設定します。

  2. JavaScript を参照する HTML ファイルを開き、プロジェクトツールウィンドウの HTML ファイルをデバッグまたは選択します。

  3. エディターのコンテキストメニューまたは選択から、デバッグ <HTML_ ファイル名> を選択します。IntelliJ IDEA はデバッグ構成を生成し、それを通してデバッグセッションを開始します。ファイルがブラウザーで開き、デバッグツールウィンドウが表示されます。

  4. デバッグツールウィンドウで、通常どおりに続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し中断時検査し、実際の HTMLDOM を表示します。

サンプル

index.htmlindex.js を参照する、index.html ファイルと index.js ファイルで構成される単純なアプリケーションがあるとします。内蔵サーバーを使用してこのアプリケーションのデバッグを開始するには、エディターで index.html を開き、コンテキストメニューからデバッグ 'index.html' を選択します。

ws_quick_start_debug_built_in_server_1.png

IntelliJ IDEA は自動的に実行 / デバッグ構成を作成し、デバッグセッションが開始されます。

ws_quick_start_debug_built_in_server_2.png

新しい実行 / デバッグ構成を再開するには、IntelliJ IDEA ウィンドウの右上隅にある the Debug button をクリックするか、メインメニューから実行 | デバッグを選択します。

ws_quick_start_debug_built_in_server_3.png

外部 Web サーバーで実行されているアプリケーションのデバッグ

たとえば Node.js を使って、外部の開発用 Web サーバー上で実行されているクライアントサイドの JavaScript をデバッグすることがよくあります。

デバッグを開始する

  1. 必要に応じて、JavaScript コードにブレークポイントを設定します。

  2. アプリケーションを開発モードで実行します。多くの場合、そのために npm start を実行する必要があります。

    開発サーバーの準備ができたら、ブラウザーでアプリケーションが実行されている URL アドレスをコピーします。実行 / デバッグ構成でこの URL アドレスを指定する必要があります。

  3. タイプ JavaScript デバッグのデバッグ構成を作成します。メインメニューから実行 | 構成の編集を選択し、ツールバーの the Add button をクリックして、リストから JavaScript デバッグを選択します。表示される実行 / デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されている URL アドレスを指定します。この URL は、上記のステップ 2 に従って、ブラウザーのアドレスバーからコピーできます。OK をクリックして構成設定を保存します。

  4. ツールバーの実行 / デバッグ構成を選択リストから新しく作成した設定を選択し、リストの横にある the Debug button をクリックします。実行構成で指定された URL アドレスがブラウザーで開き、デバッグツールウィンドウが表示されます。

  5. デバッグツールウィンドウで、通常どおりに続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し中断時検査し、実際の HTMLDOM を表示します。

例については、React アプリケーションのデバッグ(英語)および Angular アプリケーションのデバッグ(英語)を参照してください。

非同期コードのデバッグ

IntelliJ IDEA は非同期のクライアントサイド JavaScript コードのデバッグをサポートします。IntelliJ IDEA は非同期コード内のブレークポイントを認識し、停止して、そのようなコードにステップインすることを可能にします。非同期関数内のブレークポイントがヒットするか、非同期コードにステップインするとすぐに、新しい要素 Async call from <caller>デバッガータブのフレームペインに追加されます。IntelliJ IDEA は、呼び出し元と非同期アクションの開始までの全経路を含む、完全な呼び出しスタックを表示します。

次の図は、JavaScript デバッグセッションの例を示しています。

ws_debug_tool_window_async.png
デバッガーは 3 行目(ブレークポイント)で停止し、次に 5 行目(ブレークポイント)で停止します。ステップインをクリックすると、デバッガーは 5 行目( function 上)で停止してから 6 行目に移動します。

非同期デバッグモードは、デフォルトでオンになっています。非同期スタックトレースを無効にするには、レジストリjs.debugger.async.call.stack.depth0 に設定します。

ワーカーのデバッグ

IntelliJ IDEA は、サービスワーカー(英語)および Web ワーカー(英語)のデバッグをサポートしています。IntelliJ IDEA は、各ワーカーのブレークポイントを認識し、そのデバッグデータをデバッグツールウィンドウデバッガータブフレームペインに個別のスレッドとして表示します。

IntelliJ IDEA は専用のワーカー(英語)のみをデバッグできることに注意してください。現在、共有ワーカー(英語)のデバッグはサポートされていません。

  1. デバッグするワーカーブレークポイントを設定します。

  2. サービスワーカーを使用している場合は、デバッガーページの署名されていない要求を許可するチェックボックスが選択されていることを確認してください。そうしないと、デバッグセッション中にサービスワーカーが使用できなくなる可能性があります。

    ws_debug_service_workers.png
  3. 外部 Web サーバー上で実行されているクライアント側の JavaScript のデバッグで前述したように、タイプ JavaScript デバッグのデバッグ構成を作成します。

  4. ツールバーの実行 / デバッグ構成を選択リストから新しく作成された構成を選択し、デバッグ the Debug button をクリックします。

    実行構成で指定された HTML ファイルが選択したブラウザーで開き、デバッグツールウィンドウが開き、フレームリストにすべてのワーカーが表示されます。

    ws_js_debug_workers_frames.png

    ワーカーのデータ(変数、ウォッチなど)を調べるには、リストでそのスレッドを選択し、変数ペインと監視式ペインでそのデータを表示します。別のワーカーを選択すると、それに応じてペインの内容が更新されます。

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

ブレークポイント

ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、単純な場合(たとえば、コード行に到達したときにプログラムを一時停止する場合)や、より複雑なロジック(追加の条件に対するチェック、ログメッセージの書き込みなど)を伴う場合があります。一度設定すると、ブレークポイントは、一時的なブレークポイントを除いて、明示的に削除するまでプロジェクトに残ります。ブレークポイントを持つファイルが外部で変更...

プロジェクトツールウィンドウ

プロジェクトツールウィンドウでは、様々な視点からプロジェクトを見て、新しいアイテム(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルのオープン、必要なコードフラグメントへのナビゲートなど、様々なタスクを実行することができます。ビュー:ツールウィンドウにはいくつかのビューがあります。プロジェクトビュー。このビューには、すべてのプロジェクトアイテムとその依存関係(SDK およびライブラリ)が表示されます。パッケージも示されていますが、ディレクトリ構造に重点が置かれています。パッケ...

デバッグツールウィンドウ

デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ(フレーム、スレッド、変数など)を表示して分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。デフォルトでは、プログラムがブレークポイントに到達するとデバッグツールウィンドウが開き、セッションが終了しても非表示にはなりま...

デバッガーセッションを開始する

デバッガーセッションの開始は、通常モードでのプログラムと非常に似ています。デバッガーはバックグラウンドで接続されているため、デバッガーセッションを開始するために特別な設定を行う必要はありません。IntelliJ IDEA からプログラムを実行できる場合は、同じ構成を使用してプログラムをデバッグすることもできます。このトピックは、実行 / デバッグ構成の理解に依存しています。IntelliJ IDEA は追加のセットアップなしで単純なアプリケーションをデバッグする方法を提供しますが、デバッガーを効...

中断されたプログラムを調べる

デバッガーセッションの開始後、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。誤ってデバッグツールウィンドウを閉じた場合は、メインメニューからを選択するか、を押して再度開きます。フレームを調べる:プログラムの状態はフレームで表されます。プログラムが一時停止すると、