ブレークポイントを使用して vscode をデバッグする方法-VSCode-php.cn

ブレークポイントを使用して vscode をデバッグする方法

王林

リリース： 2020-02-07 15:23:26

オリジナル

16024 人が閲覧しました

ブレークポイントを使用して vscode をデバッグする方法

1. 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

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

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

ブレークポイントを使用して vscode をデバッグする方法

#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 をデバッグする方法