Svelte

TypeScript 言語サービスのメモリ処理を構成する

1. Ctrl+Alt+S を押して設定を開き、 設定 | 言語 & フレームワーク | 言語サービス | TypeScript に移動します。

2. 言語サービスメモリ 領域で、メモリ処理モードを選択します。

   • メモリを増やし、言語サービスを自動的に再起動するには、 利用可能な場合はメモリを自動的に増加します を選択します。

   • または、 メモリ制限を設定する を選択し、言語サービスで使用する最大メモリを指定します。

     指定されたメモリサイズが利用可能な RAM を超えた場合、WebStorm はツールチップで適切な値を提案します。

• プロジェクト ツールウィンドウ（Alt+1 ）で、新しいコンポーネントの親フォルダーを選択し、リストから Svelte コンポーネント を選択します。

  

• リファクタリングするコードフラグメントを選択するか、その中にキャレットを配置し、 Ctrl+Alt+Shift+T を押して、リストから必要なリファクタリングを選択します。

npm 実行 / デバッグ構成を作成する

1. 実行 | 実行構成の編集 に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

   

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

2. 開いた 実行 / デバッグ構成：npm ダイアログの 構成 タブで、 package.json の場所、Node.js ランタイム、および使用するパッケージマネージャーを指定します。

   コマンド フィールドで、リストから 実行 を選択し、次に スクリプト リストから実行するスクリプトを選択します。 ほとんどの場合、デフォルトの dev スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、 package.json で別のスクリプトを構成することもできます。

   

3. オプション:

   ブラウザーでアプリケーションを開くには、構成を次のように更新します： ブラウザー / Live Edit タブで、 起動後 チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。

   アプリケーションをデバッグする場合は、 Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。

   

アプリケーションの実行

1. ツールバーの 実行 ウィジェットのリストから、 npm タイプの実行構成を選択します。 これは、自動生成された dev 構成、または 上記のように自分で作成したカスタム構成にすることができます。

   

2. アプリケーションのコンパイルと開発サーバーの準備が完了するまでお待ちください。

   実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 アプリケーションが SvelteKit で生成された場合、デフォルトの URL は http://localhost:8080/ です。 このリンクをクリックすると、アプリケーションが表示されます。

   

   または、 上記のように、WebStorm で起動時にアプリケーションを開くよう有効にできます。

単一の npm 実行 / デバッグ構成で Svelte アプリケーションを実行およびデバッグする

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

2. 上記の説明に従ってnpm 構成を作成します。

   SvelteKit でアプリケーションを作成した場合、WebStorm はデフォルト名 dev で npm 構成をすでに生成しています。 構成は 実行 ウィジェットから利用できます。

   

3. 開いた 実行 / デバッグ構成：npm ダイアログの 構成 タブで、 package.json の場所、Node.js ランタイム、および使用するパッケージマネージャーを指定します。

   コマンド フィールドで、リストから 実行 を選択し、次に スクリプト リストから実行するスクリプトを選択します。 ほとんどの場合、デフォルトの dev スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、 package.json で別のスクリプトを構成することもできます。

   

4. ブラウザー / Live Edit タブで、 起動後 チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、 JavaScript デバッガーを使用して チェックボックスを選択して、アプリケーションを実行する URL を指定します。

   

5. 実行 をクリックしてください。

   構成を再実行するには、 実行 ウィジェットのリストから構成を選択し、その横にある をクリックします。

   WebStorm はアプリケーションを開発モードで実行し、同時にデバッグセッションを開始します。

   

6. 最初のブレークポイントに到達したら、 デバッグツールウィンドウ に切り替え、通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時にそれを調べ 、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際のHTML DOMを表示します。

JavaScript デバッグ実行 / デバッグ構成でデバッグを開始する

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

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

   実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 この URL をコピーして、 後で JavaScript デバッグ構成で指定します。

   

3. JavaScript デバッグ 構成を作成します。 これを行うには、メインメニューの 実行 | 実行構成の編集 に移動し、 をクリックして、リストから JavaScript デバッグ を選択します。

4. 開いた 実行 / デバッグ構成：JavaScript デバッグ ダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。 この URL は、 実行 ツールウィンドウまたは ターミナル で、 上記のようにコピーできます。

   

5. デバッグ をクリックしてください。

   構成を再実行するには、 実行 ウィジェットのリストから構成を選択し、その横にある をクリックします。

   

6. 最初のブレークポイントに到達したら、 デバッグツールウィンドウに切り替え、通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時にそれを調べ 、コールスタックや変数を確認し、ウォッチを設定して変数を評価し、 実際の HTML DOM を表示するなど、操作できます。

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

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

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