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

デバッグする前に

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

2. 実行 / デバッグ構成を定義します。

3. JavaScript にコンパイルされたコードをデバッグするには、その ソースマップ(英語)を生成する必要があります。 これにより、元のコードと生成された JavaScript コードの行間の対応が設定されます。 ソースマップが生成されない場合、ブレークポイントは正しく認識および処理されません。

   TypeScript、CoffeeScript、JSX を使用した JavaScript、ES6 以降のバージョンなどをデバッグするには、ソースマップが必要です。

デバッグを開始する

• ツールバーの 実行 ウィジェットから必要な構成を選択し、その横にある をクリックします。

  

• アプリケーションが JavaScript コードへの参照を含む HTML ファイルで構成されていて、アプリケーションが ビルトインサーバーで実行されている場合は、この HTML ファイルを開くか、 プロジェクトツールウィンドウ でそれを選択してから、コンテキストメニューから デバッグ <HTML_ file_name>. を選択します。 WebStorm は一時的なデバッグ構成を生成し、それを使ってデバッグセッションを開始します。

  

• npm スクリプトを使用してアプリケーションを開発モードで起動する必要がある場合は、 npm 実行 / デバッグ構成を変更して、アプリケーションを開発モードで起動し、同時にデバッグセッションを開始するようにすることができます。

  これを行うには、開発モードでアプリケーションを起動する npm 実行 / デバッグ構成を開き、 ブラウザー / Live Edit タブに切り替えて、 起動後 チェックボックスを選択し、アプリケーションが実行される URL アドレスを指定して、Google Chrome または別の Chromium ベースのブラウザーを選択してアプリケーションを開きます。

  単一の npm 実行 / デバッグ構成で Angular アプリケーションを実行およびデバッグする、 単一の npm 実行 / デバッグ構成で Vue.js アプリケーションを実行およびデバッグする、 単一の npm 実行 / デバッグ構成で Vite アプリケーションを実行およびデバッグする から詳細を学びます。

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

  

  Vue.js アプリケーションのデバッグ、 Angular アプリケーションのデバッグ、 Vite アプリケーションのデバッグ、 React アプリケーションのデバッグから詳細をご覧ください。

• 新しいターミナルから開発モードでアプリケーションを起動している場合は、リンクの横の ブラウザーでデバッグを開始する ボタンをクリックするだけです。

  

• 組み込みの ターミナル （Alt+F12 ）または 実行 ツールウィンドウから、実行中の Node.js アプリケーションにデバッガーをアタッチすることもできます。 デバッグを開始するには、 Ctrl+Shift を押したまま、情報メッセージ Debugger listening <host>:<port> の URL リンクをクリックします。

  

  実行中の Node.js アプリケーションのデバッグの詳細を参照してください。

デバッガーセッションの一時停止 / 再開

デバッガーセッションの実行中は、 デバッグ ツールウィンドウのツールバーにあるボタンを使用して、デバッガーセッションを一時停止 / 再開できます。

• デバッガーセッションを一時停止するには、 をクリックします。

• デバッガーセッションを再開するには、 F9 をクリックします。

デバッガーセッションを再起動する

• デバッグ ツールウィンドウの 再実行​ ボタンをクリックするか、 Ctrl+F5 を押します。

  

デバッグセッションのプロセス ID (PID) を見つける

• 現在デバッグ中のアプリケーションの PID を表示するには、 デバッグ ツールウィンドウの対応するセッションタブにマウスカーソルを合わせます。

  デバッグセッションの PID を表示するツールヒントが表示されます。

  

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

WebStorm 組み込みサーバーでシンプルな HTML＋JavaScript アプリケーションをデバッグする際、アプリケーションを完全に再起動する代わりに、現在表示しているページのみを再読み込みできます。

• をクリックしてください。 以前の出力はすべてクリアされ、デバッガーは最初のブレークポイントに戻ります。 ブラウザーで現在のページを再ロードするから詳細を参照してください。

  

デバッガーセッションを終了する

• デバッグ ツールウィンドウで をクリックします。

  

  または、 Ctrl+F2 を押して、終了するプロセスを選択します（2 つ以上ある場合）。