Visual Studio Code でブレークポイント デバッグ Vue を実装する方法

この記事は、Visual Studio Code で Vue のブレークポイントをデバッグする方法と経験の共有をまとめたものです。必要な友人は参考にしてください。

多くの人は、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」と入力してプラグインをインストールします-in、もう一度入力し、インストールが完了した後、再読み込みをクリックして再起動します。 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 プロジェクトをパッケージ化している場合は、ブレークポイントの不一致の問題が発生する可能性があるため、いくつかの変更を加える必要があります:

• で config ディレクトリを開きます。ルートディレクトリ

• の下のindex.jsファイル devノードの下のdevtoolの値を「eval-source-map」に変更します

• devノードの下のcacheBustingの値をfalseに変更します

上記は私が皆さんのためにまとめたもの はい、今後皆さんのお役に立てば幸いです。

関連記事:

Immutable.js で元に戻すおよびやり直し機能を実装する方法 (詳細なチュートリアル)

iview の選択ドロップダウン ボックス オプションの位置がずれている問題を解決する方法 具体的な操作は次のとおりです。

Vueの使い方.jsは選択ドロップダウンリストを実装しており、具体的な操作は以下の通りです

以上がVisual Studio Code でブレークポイント デバッグ Vue を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。