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

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

WBOY

リリース： 2016-05-16 17:42:44

オリジナル

1333 人が閲覧しました

現在、一般的に使用されているブラウザ 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 でデバッグするかを選択できます。私は、このデバッグ方法を好みます。