Webstorm と Chrome を使用して Vue プロジェクトをデバッグする方法

序文

プロジェクト開発では、デバッグ モードが非常に重要です。デバッグ モードはバックエンドの IDEA ツールには非常に便利ですが、フロントエンドの WebStorm では、デバッグ モードを有効にすると、いくつかの設定を個別に行う必要があります。

そこで、ここでは構築を成功させるプロセスを整理して共有します。 Webstorm のバージョンによって結果が異なる場合があるため、まずは私のバージョンを示します。

Webstorm バージョン: 2018.3.4

1. 新しいVueプロジェクトを作成する

完全な例を示すために、まずプロジェクトを作成します。ここでは、vue scaffolding コマンドを使用してプロジェクトを作成します。

vue init webpack デバッグ vue

実行が成功すると、debug-vueという名前のVueプロジェクトが作成されます。このプロジェクトをWebStormで開き、次のコマンドを実行して実行します。

npm 実行 dev

起動が成功したらページを表示する

これは、プロジェクトが正常に実行されたことを意味します。ここで、コードにボタンを追加します。後でこのボタンをクリックして、デバッグ モードがブレークポイントに正常に到達できるかどうかを確認します。

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
    <h2>ホーム</h2>
    <button @click="testMethods">テストバグブレークポイント</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'HelloWorld',
  データ （） {
    戻る {
      メッセージ: 'Vue.js アプリへようこそ'
    }
  },
  方法:{
    テストメソッド: 関数 () {
      アラート("クリックするとポップアップします")
    }
  }
}
</スクリプト>

変更後、ページを再度確認すると次のようになります

このボタンをクリックすると、クリック イベントが正常にバインドされたことを示すボックスがポップアップ表示されることがわかります。

2. WebStormの設定

1. デバッガポートを設定する

2. デバッグ構成を追加する

Webstorm が設定されました。

3. テスト

最初のステップ

まず指定されたコードにブレークポイントを追加し、プロジェクトを開始します

ステップ2

プロジェクトを開始するには、コマンド

npm 実行 dev

起動に成功した後

ステップ3

上記で設定したデバッグボタンを起動します

ステップ4

テスト

上記は、Webstorm と Chrome を使用して Vue プロジェクトをデバッグする方法の詳細です。Vue の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。