ホームページ > 開発ツール > webstorm > ウェブストーム実行方法

ウェブストーム実行方法

James Robert Taylor
リリース: 2025-03-06 12:47:15
オリジナル
575 人が閲覧しました

WebStormでのランニングメソッド

WebStormは、プロジェクトの種類と特定のニーズに応じて、コードを実行するいくつかの方法を提供します。 簡単なJavaScriptファイルの場合、組み込みの実行/デバッグ構成を使用できます。 大規模なプロジェクト、特にReact、Angular、またはVueなどのフレームワークを使用しているプロジェクトでは、WebStormはそれぞれのビルドツールとランタイムとシームレスに統合されます。 最も一般的な方法には、組み込みの実行/デバッグ構成の使用(次のセクションでさらに説明)、NPMスクリプト(node.jsプロジェクト用)の使用、より高度なシナリオに統合端末コマンドを使用することが含まれます。 選択は、プロジェクトのセットアップと個人的な好みに大きく依存します。 たとえば、JavaScriptファイルを参照する簡単なHTMLファイルがある場合、WebStormからブラウザでHTMLファイルを直接実行する場合があります。これにより、リンクされたJavaScriptが自動的に実行されます。より複雑なアプリケーションの場合、プロジェクトの組み込みの実行構成(Webstormによって自動的に検出されることが多い)を活用することは通常、最も効率的なアプローチです。 javaScriptファイルWebStormプロジェクト内。

実行/デバッグ構成の作成:

まだない場合は、実行構成を作成する必要があります。 [実行]メニューをクリックしてから、「構成の編集...」をクリックします。 表示されるウィンドウで、「」ボタンをクリックし、「JavaScriptデバッグ」または「node.js」を選択します。 (例えば、node.jsを介して)。 「node.js」の場合、JavaScriptファイルへのパスを指定します。 デバッグの目的でコード内でブレークポイントを設定することもできます。

    構成を実行します。
  1. 構成名の横にあるグリーン「再生」ボタンをクリックして(または、コンテキストメニューから「実行」を選択して)JavaScriptファイルを実行します。 WebStormは、ブラウザを開き(該当する場合)、実行ツールウィンドウに出力を表示します。 ブレークポイントを設定した場合、実行はそれらのポイントで一時停止し、変数を検査してコードを踏むことができます。
    • ブレークポイント:ライン番号の横にある溝をクリックして、コードのブレークポイントを設定します。 実行はブレークポイントで一時停止し、変数を検査し、コードをステップスルーし、式を評価することができます。
    • ステッピング:
    • ステッピングコントロール(ステップオーバー、ステップイン、ステップアウト、ステップアウト)を使用して、デバッグ中にコードをナビゲートします。実行。
    • 変数検査:変数検査:変数ウィンドウウィンドウの変数の値の値を検査します。ウィンドウウィンドウウィンドウウィンドウの変数の値を検査します。
    • >
    • 式を評価します式を評価します。パス。
    • コンソール:コンソール:コンソールを使用してメッセージを印刷し、デバッグ中にコードと対話します。
    • >リモートデバッグ:リモートサーバーで実行されているデバッグアプリケーション(次のセクションで説明されています)。 Chrome Devtools Integrationを使用して、ブラウザでのマニファイ付きコードとデバッグのソースマップサポート。 これには通常、展開構成の設定が含まれます。 「展開」 - > "構成..."。 接続の詳細(ホスト、ユーザー名、パスワード、ポート、パス)を指定する新しいサーバー構成を追加します。 サーバーのセットアップに応じて、SSHまたはその他のプロトコルを使用する必要がある場合があります。 また、プロジェクトへのローカルパスとリモートパスを指定する必要があります。
    • ファイルをアップロードする:

以上がウェブストーム実行方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート