Visual Studio Code でブレークポイントデバッグ Vue を実装する方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-04 10:48:55

オリジナル

2506 人が閲覧しました

この記事は、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 プロジェクトをパッケージ化している場合は、ブレークポイントの不一致の問題が発生する可能性があるため、いくつかの変更を加える必要があります: