Visual StudioコードブレークポイントデバッグVue

ChromeのデバッグウィンドウでVueコードをデバッグしたり、consoleを直接使用したりすることに慣れている人が多い.logは変数値を観察するのに非常に苦痛なことであり、少なくとも3つのフォームを同時に開く必要がある.個人的には、ブレークポイントのデバッグに慣れています.この記事では、Visual StudioコードとChromeを構成して、VSコードのブレークポイントで直接デバッグコードを完了し、VSコードのデバッグウィンドウでChromeのconsoleと同じ値を表示する方法について説明します.
Chromeリモートデバッグポートの設定
まず、リモートデバッグが開いた状態でChromeを起動する必要があります.これにより、VS CodeはChromeにattachすることができます.
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を入力してプラグインをインストールし、入力し、インストールが完了したらreloadをクリックしてVS Codeを再起動します
Visual Studioコード構成の追加

Visual Studioコードの左側のサイドバーのデバッグボタンをクリックし、ポップアップされたデバッグ構成ウィンドウでセットピニオンをクリックし、chromeを選択すると、VSコードはワークスペースのルートディレクトリで生成する.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のsourcemapを変更する
Webpackに基づいてパッケージ化されたvueプロジェクトの場合、ブレークポイントが一致しないという問題がある可能性があります.変更する必要があります.

ルートディレクトリのconfigディレクトリのindexを開く.jsファイル

devノードの下のdevtool値を'eval-source-map'

に変更

devノードのcacheBusting値をfalse

に変更
デバッグを開始しましょう
すべてがそろったので,今検収の成果が出た.

Chrome

を最初のステップでリモートデバッグで開く

vueプロジェクトでnpm run devを実行し、プロジェクト

をデバッグして起動する.

VSコード左側のサイドバーのデバッグボタンをクリックし、Attach to Chromeを選択して緑のスタートボタンをクリックすると、通常デバッグコントロールバーが表示されます.

は今すぐあります.vueファイルのjsコードでブレークポイントをデバッグしました.

私のテクニカルステーションに向かいますhttps://www.bbwho.comその他のブログを参照してください.