ホームページ > 記事 > ウェブフロントエンド > Visual Studio Code のブレークポイントを使用して Vue をデバッグする方法を共有する

Visual Studio Code のブレークポイントを使用して Vue をデバッグする方法を共有する

小云云オリジナル: 2018-05-10 15:31:053438ブラウズ

多くの人は、Chrome のデバッグウィンドウで Vue コードをデバッグするか、console.log を直接使用して変数値を観察することに慣れていますが、これは非常に面倒であり、同時に少なくとも 3 つのウィンドウを開く必要があります。個人的には、ブレークポイントデバッグの方が慣れています。この記事では、VS Code のブレークポイントでコードを直接デバッグし、VS Code のデバッグウィンドウで Chrome の同じコンソール値を確認できるように Visual Studio Code と Chrome を構成する方法を紹介します。

Chrome リモートデバッグポートを設定します

まず、VS Code が Chrome にアタッチできるように、リモートデバッグをオンにして Chrome を起動する必要があります:

Windows

Chrome ショートカットアイコンを右クリックします、ターゲット列でプロパティ
を選択し、最後に --remote-debugging-port=9222 をスペースで区切ることに注意してください

macOS

コンソールを開いて次を実行します。

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222

Linux

コンソールを開いて次のコマンドを実行します:

google-chrome --remote-debugging-port =9222

Visual Stuido Code プラグインをインストールします

Visual Studio Code の左側のサイドバーにある拡張機能ボタンをクリックし、検索ボックスに「Debugger for Chrome」と入力してプラグインをインストールし、もう一度入力して、クリックしますインストールが完了したらリロードし、VS Code を再起動します

Visual Studio Code 構成を追加します

Visual Studio Code の左側のサイドバーにあるデバッグボタンをクリックし、ポップアップデバッグ構成ウィンドウで設定ピニオンをクリックし、 chrome を選択すると、VS Code はワークスペースのルートディレクトリに .vscode ディレクトリを生成します。これには、lanch.json ファイルがあり、自動的に開きます
次の設定ファイルを使用して、自動的にその内容を上書きします生成されたlanch.jsonファイル。

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
  {
   "type": "chrome",
   "request": "attach",
   "name": "Attach to Chrome",
   "port": 9222,
   "webRoot": "${workspaceRoot}/src",
   "url": "http://localhost:8080/#/",
   "sourceMaps": true,
   "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
   }
  }
 ]
}

webpack のソースマップを変更します

webpack に基づいて vue プロジェクトをパッケージ化している場合は、ブレークポイントの不一致の問題が発生する可能性があるため、いくつかの変更を加える必要があります:

で構成を開きます。ディレクトリ内のルートディレクトリのindex.jsファイル
devノードの下のdevtool値を「eval-source-map」に変更します
devノードの下のcacheBusting値をfalseに変更します

デバッグを開始します

すべての準備が整い、結果が受け入れられました

最初のステップでリモートデバッグでChromeを開きます
vueプロジェクトでnpm run devを実行して、プロジェクトをデバッグモードで開始します
VS Code の左側のサイドバーにあるデバッグボタンをクリックし、[Chrome にアタッチ] を選択して、緑色のスタートボタンをクリックすると、通常の状況ではデバッグコントロールバーが表示されます。
これで、.vue ファイルの js コードでブレークポイントをデバッグできるようになりました。

Visual Studio Code のブレークポイントを使用して Vue をデバッグする方法を共有する

関連記事