Javascript コードのデバッグ (ブラウザ F12 および VS のデバッガー キーワード)_JavaScript スキル

現在、一般的に使用されているブラウザ IE、Chrome、Firefox には、対応するスクリプト デバッグ機能があります。 .NET キャンプに参加している私たちは、IE で JS をデバッグする方法を学ぶだけで十分です。IE でのデバッグ方法を習得すると、Chrome と Firefox でのデバッグ方法も非常に簡単になります。

F12 開発者ツールでのデバッグ

IE ブラウザを開き、F12 キーを押して開発者ツールを開きます。これは、開発者が HTML、CSS、JavaScript などの Web リソースを追跡およびデバッグするのに便利な、IE の組み込み開発者ツールです。

Web ページを開いたときにページの下部に固定されていない場合は、右上隅にあるメニュー バーのボタンをクリックして完了できます。

このツール ウィンドウには、HTML、CSS、コンソール、スクリプト、プロファイラー、ネットワークという複数のタブがあることがわかります。各タブをクリックして、対応するタスクを実行します。

HTMLタグウィンドウにおいて、ツールバーのボタンによる操作は以下のとおりです。

CSS タグは、スタイルを表示するために使用されます。コンソールには、エラー メッセージ、ユーザー ログなどを含む、Web ページ内の JS のさまざまな出力情報が表示されます。これがスクリプト タブを開きます。

図では黄色の四角形を使用して 2 つのコントロールを選択しました。左側のドロップダウン リストはファイルの選択に使用され、右側のボタンはデバッグの開始に使用されます。クリックしてデバッグを開始すると、デバッガーはウィンドウを最大化します。選択したファイル内でデバッグが必要な場所を見つけ、左側のサイドバーをクリックしてデバッグするブレークポイントを追加します。

プログラムがブレークポイントまで実行されると、デバッグできます。

ここでは、ショートカットキーを使用して操作できます。よく使用されるショートカットキーは次のとおりです:

。

F9: ブレークポイントの追加/削除

F10: ステップバイステップ、つまりステートメント内のメソッド、式などをスキップします

F11: ステートメントごとのデバッグ、つまりシングルステップ デバッグは、メソッドと式にジャンプしてステートメントごとの追跡デバッグを実行します

実行プロセス中に、即時コードを実行したい場合は、右側のペインにコードを入力して Enter キーを押す必要があります。

複数行のコードを実行する場合は、実行ボタンの右側にある二重矢印をクリックして複数行モードをオンにします。もう写真は撮りません。

ブラウザで直接デバッグするこの方法は、Google Chrome や FireFox FireDebug にも適用できますが、細部にいくつかの違いがあり、主な機能は同じです。

F12 キーを押して開発者ツールに入り、ソース コード、スタイル、js を表示できます。

[スクリプト] ボタンをクリックすると、このデバッグ ウィンドウが開きます。このデバッグ ウィンドウには、Web ページ内のスクリプト ファイルのソース コードが含まれています。左側のボタンをクリックすると、ファイルを選択するためのサイド ウィンドウが開きます。右側にデバッグ ツール ボタンがありますが、私はこれらの純粋な英語のインターフェイスが好きではないので、デバッグの大部分は依然として IE で行われます。そしてIE配下のVSに転送されます。

次に、VS で JS コードをデバッグする方法を紹介します。

デバッグにはデバッガー キーワードを使用します

この方法は非常に簡単です。デバッグを実行する場所に debugger キーワードを追加するだけで、ブラウザがこのキーワードを実行するときに、デバッグを有効にするかどうかを尋ねるメッセージが表示されます。この種のデバッグでは、デバッグ ツールを選択できます。新しい VS を開くか、既存の VS でデバッグするかを選択できます。私は、このデバッグ方法を好みます。

このプログラムを実行すると、デバッグ プロンプト ウィンドウがポップアップ表示されます:

ブラウザでこのウィンドウが表示されない場合は、簡単な設定を行ってインターネット オプションを開く必要があります:

赤いボックス内の 2 つの項目のチェックを外すだけです。

設定後、デバッグに debugger キーワードを使用できます。このような設定を入力すると、追跡とデバッグのために予期しないエラーをキャプチャすることもできます。

はい、この記事はここで紹介されています。何かわからないことがあれば、私に連絡してください。デバッグは実践的なプロセスであり、何度も使用することでのみ方法とテクニックを習得できます。