WebStorm 2024.2 ヘルプ

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

デバッガーセッションは実行 / デバッグ構成に基づいています。構成タイプは、アプリケーションのタイプとランタイム環境によって異なります。

一度に異なる設定で複数のデバッガーセッションを実行できます。

構成を通じて、アプリケーションを起動するだけでなく、アプリケーションが起動する前に、WebStorm にいくつかのパラメーターを使用したり、いくつかのアクションを実行したりするように指示することもできます。例: Node.js 固有のコマンドラインオプション(英語)を Node.js 実行可能ファイルに渡すことができます。

デバッグする前に

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

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

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

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

デバッグを開始する

デバッガーセッションを起動した後、デバッグツールウィンドウをマークする the Debug tool window button アイコンが Debugging is active に切り替わり、デバッグプロセスがアクティブであることを示します。

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

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

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

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

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

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

    the Rerun button

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

WebStorm 組み込みサーバーで単純な HTML + JavaScript アプリケーションをデバッグする場合、アプリケーションを完全に再起動する代わりに、現在移動しているページを再ロードできます。

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

  • デバッグツールウィンドウの停止ボタンをクリックします。

    the Stop button

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

    the Stop button: select the configuration to terminate

生産性のヒント

応答しないアプリケーションをデバッグする

アプリケーションがハングした場合は、セッションを一時停止して、デバッガーが現在の状態に関する情報を取得できるようにします。その後、プログラムの状態を調べて、問題の原因を特定できます。

一時停止をさらに活用

式を評価する必要がある場合、および WebStorm は、ブレークポイントで停止しなかったため、で行さらに、あなたのプログラムを進めることができることを行うことはできません足踏み。この後、ブレークポイントで停止したかのようにデバッガーを使用できます。これが有効な解決策ではない場合もありますが、場合によっては役立つことがあります。

起動前のタスクを実行する

すべてのデバッグセッションの前に、実行中の外部ツールを構成するか、他のアクションを実行します。この起動前のタスクは、Gulp または Grunt タスクまたは NPM スクリプトの実行、JavaScript への TypeScript コードのコンパイル、現在アクティブなすべての File Watchers の実行によるコードのコンパイルまたは圧縮、ソースのリモートサーバーへのアップロードなど、言語によって異なります。使用しているフレームワーク。

ブレークポイント デバッグツールウィンドウ

関連ページ：

実行 / デバッグ構成

WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...

ブレークポイント

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

Chrome での JavaScript のデバッグ

WebStorm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。以下のビデオと手順では、このデバッガーの使用を開始するための基本的な手順を説明しています。始める前に：設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript Debugger と入力します。プラグインの詳細については、プラグインのマッピン...

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

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

Angular

Angular は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。WebStorm は Angular のサポートを提供し、新しい Angular アプリの作成やコンポーネントの作業からデバッグやテストまで、開発プロセスのすべてのステップで役立ちます。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定で Angular と AngularJS プラグインが有効になっていることを確認します。を押して設定を開き、を...

Vue.js

Vue.js は、ユーザーインターフェースと高度な単一ページアプリケーションを開発するためのフレームワークです。WebStorm は、個別のファイル、属性、プロパティ、メソッド、スロット名などで定義されたコンポーネントを含むコンポーネントの Vue.js 対応コード補完を使用して、HTML、CSS、JavaScript の Vue.js ビルドブロックのサポートを提供します。ビルトインデバッガーを使用すると、Vue.js のコードを WebStorm で直接デバッグすることができます。WebStor...