vscodeでvueをデバッグする方法-VSCode-php.cn

vscodeでvueをデバッグする方法

藏色散人

リリース： 2019-12-17 10:33:25

オリジナル

5627 人が閲覧しました

vscode で vue をデバッグするにはどうすればよいですか?

VS Code ブレークポイントデバッグを使用する

Chrome のデバッグウィンドウで Vue コードを直接デバッグするのは不便ですが、幸いなことに、Visual Studio Code にはデバッガーが用意されています。 Chrome プラグインでは、構成を通じて VS Code ブレークポイントでコードを直接デバッグでき、VS Code のデバッグウィンドウで Chrome のコンソールと同じ値を確認できます。この記事では構成プロセスを紹介します。

関連する推奨事項: vscode チュートリアル

1. Chrome リモートデバッグポートを開く

まず、リモートデバッグをオンにして Chrome を起動する必要があります。 VS Code は 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

2 を実行します。 Chrome デバッグプラグインをインストールします。

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

vscodeでvueをデバッグする方法

3. デバッグ構成ファイルを作成します

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

次の構成ファイルを使用して、自動生成された lanch.json ファイルの内容を上書きします。

注: URL のポート番号は、WEBPACK によって構成された起動ポート番号と一致している必要があります。

{
  // 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}/*"
      }
    }
  ]
}

ログイン後にコピー

vscodeでvueをデバッグする方法