この記事は、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 サイトの他の関連記事を参照してください。