VSCode を使用してブラウザ上で JS コードをデバッグする方法

VSCode を使用してブラウザ上で JS コードをデバッグするにはどうすればよいですか?次の記事では、VSCode を使用して Web ページの JS コードをデバッグする方法を紹介します。

コードを純粋に見るよりも、デバッガーと組み合わせて見ることをお勧めします。これにより、コードの実際の実行ルートと変更内容を確認できるようになります。それぞれの変数。コードの大きなセクションをジャンプしたり、特定のロジック部分を段階的に実行したりできます。 [推奨学習: "

vscode チュートリアル"]

JavaScript コードには主に 2 つの実行環境があり、1 つは Node.js で、もう 1 つはブラウザーです。一般的に、Node.js 上で実行される JS コードをデバッグするには VSCode のデバッガーを使用し、ブラウザ上で実行される JS コードをデバッグするには chrome devtools を使用します。ある日、VSCode がブラウザ上で JS コードをデバッグできることを発見し、試してみたところ、非常に良かったです。

香りはどれくらいですか？一緒に見てみましょう。

プロジェクトのルート ディレクトリに .vscode/launch.json ファイルがあり、VSCode のデバッグ構成が保存されます。

[構成の追加] ボタンをクリックして、デバッグ Chrome 構成を追加します。

設定は次のようになります。

url は Web ページのアドレスです。ローカルで実行できます。 dev サーバー 、ここにアドレスを入力します。

次に、[デバッグ] をクリックして実行します。

VSCode は Chrome ブラウザを起動して Web ページを読み込み、ブレークポイントで停止します。コールスタック、スコープ変数などが左側のパネルに表示されます。

最下位レベルはもちろん webpack への入り口であり、webpack のランタイム部分をシングルステップでデバッグできます。

ReactDOM.render などのレンダリングからサブコンポーネントへのレンダリングまでのプロセスと、途中で何が行われるのかを確認することもできます。

または、コンポーネントのフックの値がどのように変化するかを確認します (フックの値はコンポーネントの FiberNode の memerizedState 属性に格納されます):

ご覧のとおり、Webpack ランタイム コードをデバッグしたり、React ソース コードやビジネス コードをデバッグしたりするのに非常に便利です。

もしかしたら、これは chrome devtools でも可能だ、と思われるかもしれませんが、何か特別なことはありますか?

確かに、Chrome 開発ツールでも同じことを行うことができますが、VSCode には Web ページのコードをデバッグするための 2 つの主な利点があります。

1. エディターにコードを入力する ブレークポイントを使用すると、次のことが可能になります。デバッグ中にコードを変更します。

2. Node.js コードのデバッグと Web ページ コードのデバッグに同じツールを使用します。エクスペリエンスは再利用でき、エクスペリエンスは一貫しています。

最初の点に関しては、Chrome devtools のソースは実際にコードを変更して保存することはできますが、結局のところ、専用のエディタではないので、それを使用して目的に使用するのはぎこちません。コードを書きます。私は個人的に、コードのデバッグと変更を同時に行うことに慣れており、この点では VSCode の方が優れています。

通常、VSCode を使用して Node.js をデバッグしますが、VSCode を使用して Web ページをデバッグすることもできます。そのため、ツールに慣れている限り、Chrome devtools の使用方法を学ぶ必要はありません。 、デバッグ エクスペリエンスは VSCode の方が優れています。結局のところ、VSCode は私たちが毎日使用するエディタであり、より便利なので、VSCode が勝つ理由です。

でも、プロフィール情報を見たい場合はどうすればよいでしょうか?つまり、各関数の消費時間であり、コードのパフォーマンスを分析するために重要です。

VSCode デバッガーはこれもサポートしています:

左側のボタンをクリックして、時間のかかる情報を一定期間記録し、手動で停止できます。 , プロファイル情報を記録する特定のコードの実行プロセスを選択するには、固定時間または特定のブレークポイントを指定する 3 つの方法があります。

これは、各関数の実行にかかる時間を記録する xxx.cpuprofile ファイルをプロジェクトのルート ディレクトリに保存します。コードの特定の部分にかかる時間を層ごとに分析して、問題を特定し、パフォーマンスを最適化します。

VSCode 拡張機能 vscode-js-profile-flame をインストールすると、フレームグラフ表示に切り替えることもできます。

学生の中にはフレーム ダイアグラムを理解していない人もいるかもしれません。説明しましょう:

ある関数の実行パスにはコールスタックがあることがわかっており、どの関数がステップバイステップで呼び出されるのかが線でわかります。

しかし実際には、この関数によって呼び出される関数は 1 つだけではなく、複数ある可能性があります。コールスタックは保存されるだけです。コールスタックは特定の関数への実行ルートを表しますが、フレームグラフはすべての実行ルートを保存します。

したがって、フレーム グラフにこのようなフォークが表示されます:

実際、これは実行プロセスです:

質問を計算してみましょう:

関数 A には合計 50 ミリ秒かかり、関数 A が呼び出す関数 B には 10 ミリ秒かかり、関数 C に呼び出されるのには 20 ミリ秒かかります。質問: 関数 A残りのロジックには何ミリ秒かかりますか?

明らかに、これは 50 - 10 - 20= 20 ミリ秒として計算できます。関数 D には時間がかかりすぎると思うかもしれません。その後、特定のコードを見て、次のことを確認してください。最適化できるかどうかを確認し、消費時間を確認してください。

これは非常に簡単で、単純な足し算と引き算によってプロファイル パフォーマンス分析が行われる方法です。

フレーム グラフの各ボックスの幅にもかかった時間が反映されるため、より直感的になります。

JS エンジンはイベント ループを使用して JS コードを継続的に実行します。フレーム グラフはすべてのコードの実行時間を反映するため、各イベント ループ コードの実行にかかる時間がわかります。

各ストリップの幅は、各ループの消費時間を表します。もちろん、レンダリングを妨げないように、細いほど良いです。したがって、パフォーマンスの最適化の目標は、フレーム グラフを太くするのではなく、小さな細いバーに変えることです。

話題に戻りますが、Chrome devtools のパフォーマンスに比べて、VSCode の CPU プロファイルとフレーム グラフは実際にはシンプルで使いやすく、ほとんどのニーズを満たすことができます。

VSCode はサポートしていないので、レンダリングやメモリ情報を見たい場合以外は、chrome devtools を使う必要があると思いますが、JS コードのデバッグ、プロファイル情報やフレームグラフを見たい場合は、VSCode で十分です。

とにかく、VSCode は Web ページ上の JS コードをデバッグするのに非常に優れていると思いますが、どう思いますか?

.markdown-body pre,.markdown-body pre>code.hljs{color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style :italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr, .hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color: #900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute, .hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073} .hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background: #dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

元のアドレス: https://juejin.cn/post/7010768454458277924

#プログラミング関連の知識の詳細については、

プログラミング ビデオ

をご覧ください。 ！

以上がVSCode を使用してブラウザ上で JS コードをデバッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。