VSCode の設定方法、Su Shuang の Vue と React コードのデバッグ方法!

Vue および React コードのデバッグをもっと楽しくするにはどうすればよいですか?次の記事では、VSCode の構成と、Su Shuang による Vue および React コードのデバッグ方法を紹介します。

フロントエンド開発者として、私は基本的に毎日 Vue/React コードをデバッグする必要があります。みんながどのようにデバッグしているかわかりませんが、いくつかの方法があると思います。タイプ:

• デバッグなし。問題を見つけるにはコードを確認するだけです。
• Console.log ログを出力します。
• Chrome Devtools のデバッガーを使用してデバッグします
• VSCode のデバッガーを使用してデバッグする

デバッグ方法が異なれば、効率や経験も異なりますが、現在は基本的に VSCode デバッガーを使用してデバッグしていますが、非常に効率的で素晴らしい経験が得られます。 [推奨学習:「vscode 入門チュートリアル 」]

おそらく VSCode を使用して Web ページをデバッグする方法をまだ知らない学生も多いと思います。この記事で紹介します。

React と Vue をそれぞれ見てみましょう:

VSCode を使用して React コードをデバッグします

create-react-app を使用して、次のようなコンポーネントを含むデモ プロジェクトを作成しました。

開発サーバーを実行します:

ブラウザに表示されるインターフェイスは次のとおりです:

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

ルート ディレクトリに .vscode/launch.json 構成ファイルを追加します。

デバッグ構成を作成しました。タイプは chrome で、デバッグ URL は開発サーバーのアドレスです。

反応コードに 2 つのブレークポイントを置きます:

次に、[実行] をクリックします:

見てください。 XDM、壊れています!コールスタック、現在の環境変数などがあります。

ブレークポイントを解放し、下に進み続けます。

クリックすると、対応するイベント オブジェクトを取得することもできます:

とても便利ですね!

ビジネスを書くのに疲れて、反応ソース コードを確認したい場合は、コール スタック内の特定のフレームをクリックするだけで表示されます:

たとえば、renderWithHooks メソッドは次のようになります。レンダリング中に呼び出されます。内部の workInProgress オブジェクトは現在のファイバー ノードであり、その MemorydState 属性はフックが値を保存する場所です:

VSCode を使用して React コードをデバッグした後、ビジネス コードを確認するか、ソース コードを確認するか、どちらにしても、このエクスペリエンスは非常に快適です。

Vue を見てみましょう:

VSCode を使用して Vue コードをデバッグします

Vue のデバッグはさらに面倒になるため、以下に基づいてパスの追加マッピングを行う必要があります。上記。

React では、コンパイルされた js ファイルに 1 対 1 で対応する jsx と tsx を直接記述しますが、Vue ではそうではありません。Vue では、ファイルを SFC (シングル ファイル コンポーネント) 形式で記述します。 vue-loader が必要です。これらを異なるファイルに分割するには、ソース コードの場所に対応するようにパスを個別にマップする必要があります。

つまり、デバッグ構成にはさらにsourceMapPathOverridesがあります:

これをマップするにはどうすればよいですか?

デバッガーをソース コードに追加し、ブラウザーで現在マップされているパスを確認できます:

webpack://test here -vue-debug /src/App.vue?11c4 がマッピングされるパスですが、どこにマッピングされるのでしょうか?

は明らかにローカル パスにマッピングされており、次のようになります。

workspaceRoot は vscode によって提供される環境変数であり、プロジェクトのパスです。 . このようにマッピングするとアドレスがローカルファイルになってしまいませんか？次に、ブレークポイントがローカル ファイルで有効になります。

ここでパスを確認すると、明らかにプロジェクトの下のファイルにマップされています。

しかし、マッピングすると最後にハッシュもあり、このハッシュが違ってきます。どうすればよいでしょうか?

#このパスは構成可能です。これは実際には、webpack がソースマップを生成するときのファイル パスです。output.devtoolModuleFilenameTemplate を通じて構成できます:

# 使用可能な変数についてはドキュメントを読むことができるため、ここでは展開しません (参照してください):

例、パスを次のように構成しました:

デバッグ中のファイル パスは次のようになります:

しないでください。プレフィックスについて心配する必要はありません。次の部分を見てください。これは削除されていませんか?ハッシュ化されていますか?

次に、それをローカル ファイルにマップします:

このようにして、再度マップされ、vscode で壊れます。 クリックして有効にします:

#Vue ビジネス コードをデバッグするか、確認したいかVue のソース コードを使用すると、非常に楽しい体験ができるでしょう。

概要

フロントエンド エンジニアとして、Vue および React コードのデバッグは毎日行う必要があります。デバッグ方法が異なれば、経験と効率も異なります。そこで、VSCode を使用して Web ページをデバッグするために私がよく使用する方法を紹介したいと思います。

React のデバッグは比較的簡単です。Chrome タイプのデバッグ設定を追加するだけです。Vue のデバッグはさらに面倒です。パス マッピングを行う必要があります。パスにハッシュがある場合は、設定も変更する必要があります生成されたパスのマッピングを再度行います (ただし、構成する必要があるのは 1 回だけです)。

VSCode を使用して React/Vue コードをデバッグすると、ビジネス コードをデバッグする場合でも、ソース コードを確認する場合でも、非常に便利です。デバッグがとても楽しくなりますので、ぜひ試してみてください。

VSCode の詳細については、

vscode チュートリアル

をご覧ください。 ！

以上がVSCode の設定方法、Su Shuang の Vue と React コードのデバッグ方法!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。