WebStorm 2024.2 ヘルプ

Chrome での JavaScript のデバッグ

WebStorm は、client-side JavaScript コード用の組み込みデバッガーを提供します。

以下のビデオと手順では、このデバッガーの使用を開始するための基本的な手順を説明しています。

始める前に

  1. 設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript Debugger と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

  2. JavaScript デバッガーの構成の説明に従って、組み込みデバッガーを構成します。

    HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、ライブ編集機能をアクティブにします。ライブ編集機能の詳細については、「HTML、CSS、JavaScript でのライブ編集」を参照してください。

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

WebStorm には、Web ブラウザーまたは IDE の組み込みブラウザーでアプリケーションをプレビューおよびデバッグするために使用できる Web サーバーが組み込まれています。このサーバーは常に実行されており、手動による構成は必要ありません。

デバッグを開始する

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

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

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

  4. デバッグツールウィンドウで、通常どおりに処理を進めます。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断されたときにプログラムを調べ、実際の HTML DOM を表示し、コンソールで JavaScript コードスニペットを実行します。

サンプル

index.html ファイルと index.js ファイルで構成され、index.html が index.js を参照する単純なアプリケーションがあるとします。

A simple client-side application

組み込みサーバーを使用してこのアプリケーションのデバッグを開始するには、index .js にブレークポイントを設定し、エディターで index .html を開き、コンテキストメニューからデバッグ 'index.html' を選択します。

Start debugging session from the editor

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

Debugging session starts, the app opens in the browser

新しい実行 / デバッグ構成を再起動するには、リストからそれを選択し、the Debug button をクリックします。

Restart debugging session

ブラウザーで現在のページを再ロードする

デバッグツールウィンドウの再実行ボタン (the Rerun button) をクリックしてアプリケーションを再起動するほかに、ブラウザーで再ロードアクションを使用して、現在移動しているページを再ロードすることもできます。これは、Chrome のページの再ロード機能 (Ctrl+R) と同じように機能します。

  • 現在のページを再ロードするには、ツールバーの the More icon をクリックし、ブラウザーで再ロード (Reload in Browser) を選択します。

    Reload in Browser action

以下の例は、2 つの HTML ページと JavaScript スクリプトで構成される単純なアプリケーションを示しています。開始 home.html ページにはサブミットボタンがあり、これを押すと calculator.html ページが開き、Calculator.js スクリプトの実行結果が表示されます。

デバッグセッション中に、再実行ボタン (the Rerun button) をクリックすると、サブミットボタンを含む home.html ページが再ロードされます。ブラウザーで再ロードボタン (the Reload in Browser button) をクリックすると、calculator.html ページが再ロードされ、以前のスクリプト出力がすべてクリアされ、デバッガーは Calculator.js の 1 行目に戻ります。

Reloading the current page in browser

開発モードでローカルホスト上で実行されているアプリケーションをデバッグする

アプリケーションが localhost の開発モードで実行されている場合、組み込みのターミナル（Alt+F12）、実行ツールウィンドウ、デバッグツールウィンドウからデバッグを開始できます。Ctrl+Shift を押したまま、アプリケーションが実行されている URL をクリックしてください。

Starting a debugging session from the Run tool window

  1. コードにブレークポイントを設定します。

  2. たとえば、npm スクリプトを使用して、アプリケーションを開発モードで起動します。

  3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。Ctrl+Shift を押したまま、この URL リンクをクリックします。WebStorm は、タイプ JavaScript デバッグの自動生成された 構成でデバッグセッションを開始します。

これは、Vue.js、Angular、React、Node.js アプリケーションのデバッグにも機能します。

リモート Web サーバー上で実行されているアプリケーションをデバッグする

外部の開発 Web サーバー上で実行されているアプリケーションのクライアント側 JavaScript をデバッグしたい場合がよくあります。

Debugging client JavaScript code of an app running on a remote server

リモート Web サーバーとは何ですか？

WebStorm では、現在のプロジェクトの外側にドキュメントルートを持つサーバーはすべてリモートと呼ばれます。このサーバーは実際には物理的なリモートホストまたはあなたのマシン上で実行されているかもしれません。

例: プロジェクトが C:/WebStormProjects/MyProject にあり、Web サーバーのドキュメントルートが C:/XAMPP/htdocs である場合、WebStorm では、この Web サーバーはリモートです。

サーバー上のアプリケーションソースを WebStorm プロジェクト内のローカルコピーと同期するにはどうすればよいですか？

リモート Web サーバー上のアプリケーションをデバッグするには、そのソースのコピーを WebStorm プロジェクトに入れる必要があります。ローカルソースとリモートソースを同期させるには、リモートサーバー構成を作成すると Web サーバーに接続する説明に従ってデプロイ構成を作成します。

リモート Web サーバーでアプリケーションをデバッグする

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

  2. JavaScript デバッグタイプの実行 / デバッグ構成を作成します。

    実行 | 実行構成の編集に移動し、実行構成の編集ダイアログで、開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (the Add button) をクリックし、リストから JavaScript デバッグを選択します。

  3. 開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されている URL アドレスを指定します。この URL アドレスは、Web サーバールート URL と、サーバーアクセス構成に従って、Web サーバーのドキュメントルートを基準とした HTML ファイルへのパスを連結したものである必要があります。詳細については、Web サーバーに接続するを参照してください。

    OK をクリックして構成設定を保存します。

  4. ツールバーの実行 / デバッグ構成を選択リストで新しく作成した構成を選択し、デバッグボタン Start the debugger をクリックします。実行構成で指定された HTML ファイルが選択したブラウザーで開き、デバッグツールウィンドウが表示されます。

  5. デバッグツールウィンドウで、通常どおりに処理を進めます。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断されたときにプログラムを調べ、実際の HTML DOM を表示し、コンソールで JavaScript コードスニペットを実行します。

サンプル: マッピングなしでデバッグする

index.html ファイルと App.js ファイルで構成される単純なアプリケーションがあるとします。index.html は App.js を参照します。

  1. 次に、単純なアプリケーションをローカル Web サーバーにデプロイしましょう ( アプリケーションをデプロイするを参照)。次の例では、Apache です。

    Debug JavaScript on an external web server: uploaded sources on the remote host

  2. この例のように Nginx や Apache などのローカル Web サーバーを使用する場合、または Web サーバーがリモートホスト上にある場合は、JavaScript デバッガーを起動するための実行 / デバッグ構成を作成する必要があります。これを行うには、WebStorm ウィンドウの右上隅にあるリストをクリックして実行構成の編集を選択します。あるいは、メインメニューから実行 | 実行構成の編集を選択します。

    Debug JavaScript on an external web server: open Edit configurations dialog

    実行 / デバッグ構成ダイアログで、 をクリックし、リストから JavaScript デバッグを選択します。

    Create JavaScript Debug configuration

    実行中のアプリケーションの URL を指定します。この例では http://localhost:8888/MySimpleApp/index.html です

    URL to run your application

    この例では、ローカルプロジェクト構造とサーバー上のファイル構造は同じであるため、マッピングは必要ありません。

  3. これでデバッグを開始できます: WebStorm ウィンドウの右上隅にあるリストから新しい実行 / デバッグ構成を選択し、the Debug button をクリックします。

    Editor, main menu and the toolbar

    デバッグツールウィンドウで、通常どおりに処理を進めます。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断されたときにプログラムを調べ、実際の HTML DOM を表示し、コンソールで JavaScript コードスニペットを実行します。

マッピング

マッピングは、Web サーバー上のファイルとそのローカルコピー間の対応を設定します。マッピングが必要です:

  • アプリケーションがリモート Web サーバーにデプロイされて実行されているとき。

  • プロジェクトルートに加えていくつかのリソースルートフォルダーを定義した場合。

WebStorm は、デプロイ構成から、またはファイルとスクリプトの名前と内容に基づいてパスマッピングを推測しようとします。ただし、アプリケーションの構造が複雑な場合は、パスマッピングを手動で指定する必要があります。

マッピングを構成する

  1. アプリケーションのデバッグの説明に従って、タイプ JavaScript デバッグのデバッグ構成を作成します。

  2. ローカルファイルのリモート URL 領域で、現在使用されているデプロイ構成に従って、ファイルとフォルダーをサーバー上のファイルとフォルダーの URL アドレスにマップします。 ローカルフォルダーをサーバー上のフォルダーにマップし、URL アドレスにアクセスしてアクセスするを参照してください。

サンプル: マッピングを使用してデバッグする

何らかの理由で、アプリケーションのフォルダー構造を前の例から変更し、index.html と App.js を別のフォルダー src に移動することにしたとします。

The structure of local folders differs from the folder structure on the remote web server

ローカルソースと Web サーバー上のアプリケーションは構造が異なるため、デバッガーはローカルソースと実際に実行されるコードを同期できません。

この問題を解決するには、アプリケーションルートの URL アドレスを src フォルダーにマップしましょう。

  1. 上記の説明に従って、実行 / デバッグ構成の作成を開始します。

  2. 実行 / デバッグ構成ダイアログで、ローカルファイルのリモート URL 領域の をクリックします。

  3. 開いたダイアログで、MySimpleApp の src フォルダーを選択します。

  4. リモート URL フィールドにアプリケーションの URL アドレスを入力します。この例では http://localhost:8888/MySimpleApp です

    URL mapping

  5. 実行 / デバッグ構成を保存し、上記の説明に従って起動します。

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

非同期コードをデバッグする

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

Debugging asynchronous JavaScript code

上の例では、デバッガーは line3(ブレークポイント) で停止し、次に line5(ブレークポイント) で停止します。ステップインをクリックすると、デバッガーは行 5 ( function 上) で停止し、その後行 6 に移動します。

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

ワーカーをデバッグする

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

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

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

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

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

  4. ツールバーの実行ウィジェットリストから、新しく作成した 構成を選択し、その横にある the Debug button をクリックします。

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

    Debugging Service Workers

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

Jsdoc コメント 対話型デバッガーコンソール

関連ページ：

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

JavaScript デバッガーの構成

WebStorm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。デバッグが正常に行われるようにするには、組み込みの Web サーバーポートを指定して、WebStorm が他のデバッガーオプションに提案しているデフォルト設定を受け入れるだけで十分です。始める前に設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を...

HTML、CSS、JavaScript でのライブ編集

ライブ編集機能を使用すると、HTML、CSS、JavaScript コードに加えた変更は、ページを再ロードせずにブラウザーにすぐに表示されます。ライブ編集は、HTML、CSS、JavaScript を含む、または生成する他のファイルタイプに対して機能します。Node.js アプリケーションのデバッグのときにライブ編集を使用することもできます。詳細については、「Node.js アプリケーションでのライブ編集」を参照してください。デフォルトでは、ライブ編集は HTML および CSS ファイルに対し...

ブレークポイント

ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類：WebSto

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

プロジェクトツールウィンドウを使用すると、さまざまな視点からプロジェクトを確認し、新しい項目 (ディレクトリ、ファイル、クラスなど) の作成、エディターでのファイルのオープン、必要なコードフラグメントへの移動などのさまざまなタスクを実行できます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコマンドとして、関連するショートカットを介してアクセスします。また、ビューには、作成したスクラッチファイルと拡張スクリプトを管理できるスクラッチとコンソールフォルダーが含まれ...

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

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