Firebugを使用したJavaScriptのデバッグ

デバッグは、欠陥を取り除く体系的な方法です。それはすべて、テストケースの実行から始まります。テストケースが実行されるたびに、実際の結果が期待される結果と比較されます。実際の結果と期待される結果の間に対応がない場合は、根本原因分析が行われ、結果が期待される線に沿っていることを確認するために回帰テストなどの追加のテストが実行されます。

静的なWebページを設計するために、HTMLが広く使用されています。動的なWebベースのアプリケーションであるJavaScriptを開発するには、Webのスクリプト言語を使用する必要があります。コードをバグのないものにするために、プログラマーは多くのデバッグ手法に依存しています。これは、エラーや例外を寄せ付けないための優れた方法です。ただし、JavaScriptは優れたデバッグ機能を備えていません。幸い、WebブラウザベースのデバッガであるFirebugを使用して、JavaScriptで記述されたコード行をデバッグするのは簡単です。

ここで、専門用語を紹介します。 Firebugデバッガーのコンポーネントに関する洞察に満ちた文章を次に示します。

• JSEditor −JSEditorはJavaScriptエディタに他なりません。 JSEditorを使用すると、すべての目的と目的で、「BreakonAllErrors」を使用してJavaScriptコードをデバッグできます。ユーザーがしなければならないのは、このオプションをチェックしてスクリプトの実行を一時停止することだけです。
• [スクリプト]タブ −コンソールは、Firebugデバッガーのペインに表示される最初のタブです。 HTMLとCSSは、ペインに表示される2番目と3番目のタブです。スクリプトタブは4番目です。スクリプトパネルは2つのサブパネルに分かれています。左側のパネルはJavaScriptエディターです。右側のパネルには、ウォッチとブレークポイントの2つのサブパネルが含まれています。
• JSFileSelector − JSFileSelectorは、ページの管理下にあるすべてのJavaScriptファイルのリストを表示します。
• ブレークポイント −JavaScriptの実行はブレークポイントで停止します。 Firebugには、静的、条件付き、動的の3種類のブレークポイントがあると公平に言えます。静的ブレークポイントを設定するには、スクリプトパネルで目的のコード行をクリックします。名前が示すように、条件付きブレークポイントは条件に基づいて設定する必要があります。関数名に基づいてブレークポイントを設定するには、動的ブレークポイントを利用できます。動的ブレークポイントには魅力的なものがあります-それらはコマンドラインから設定できます。さらに、これらは、一般的に使用される2つの関数であるdebugとundebugを使用して設定できます。
• ブレークポイントのリスト −すべてのブレークポイントがパネルに表示されます。不要なブレークポイントを削除できます。
• ウォッチウィンドウ −「ウォッチウィンドウ」は、MicrosoftVisualStudioの本質に精通しているすべての人にとってなじみのある言葉です。ただし、FirebugのウォッチウィンドウとMicrosoft Visual Studioのウォッチウィンドウの間に存在するより細かい違いを理解することは、良い世界をもたらします。 FirebugのWatchWindowは、使用可能な変数のすべての値をリストとして表示します。悲惨な！スコープ内の変数の値のみが表示されます。逆に、Microsoft VisualStudioのウォッチウィンドウには、選択した変数の値が表示されます。

Firebugアドオンのインストール方法

• MozillaFirefoxブラウザを開きます。ウィンドウの右上隅に、メニューを開くがあります。
• [メニューを開く]をクリックします アドオンをクリックします。 新しいウィンドウが表示されます。
• 検索ボックスにFirebugと入力し、 Enterを押します。 キーボードのキー。
• ファイアバグ アドオンが表示されます。 インストールをクリックします 。

Firebug これでFirefoxブラウザに追加されました。

FireBugを使用してJavascriptコードをデバッグする方法

これは、FireBugを使用してFirefoxでJavaScriptコードをデバッグできる簡単な8ステップの手順です。

• JavaScriptコードをメモ帳ファイルに書き込みます。拡張子を.htmにして保存します。この.htmファイルをFirefoxブラウザで開きます。何も考えずに、Firebugデバッガーのコンソールを起動します。
• 目的のコード行に静的ブレークポイントを設定します。 [スクリプト]タブの右側のパネルで、静的ブレークポイントが割り当てられているコード行を表示できます。
• 「ステップオーバー」ボタンをクリックして、コードを1行ずつ実行します。このボタンはFirebugツールバーにあります。 [ステップオーバー]ボタンとは別に、[続行]、[ステップイン]、[ステップアウト]の3つのボタンが表示されます。ブレークポイントが検出されたときにスクリプトの実行を再開するには、[続行]をクリックします。別のアクションとして、F8ボタンを押すことができます。特定の関数呼び出しをステップオーバーするには、[ステップオーバー]をクリックします。別のアクションとして、F10ボタンを押すことができます。特定の関数の本体にステップインするには、[ステップイン]をクリックします。別のアクションとして、F11ボタンを押すことができます。スクリプトの実行を再開して次のブレークポイントで停止するには、[ステップアウト]をクリックします。
• ウォッチウィンドウに表示されている値を注意深く確認してください。
• 必要なことをしなさい。バグを特定して修正します。
• ページをリロードします。これを行うには、Firefoxのリロードボタンをクリックします。別のアクションとして、キーの組み合わせ-Ctrl+Rを押すことができます。
• ほとんどの変数の値がウォッチウィンドウに表示されます。ただし、1つまたは2つの変数の値が欠落している可能性があります。その場合、慎重なデバッガーはCommandLineAPIの効率を保証します。特定の関数の最初の行にブレークポイントを追加するには、debug（fn）を使用します。特定の関数の最初の行にあるブレークポイントを削除するには、undebug（fu）を使用します。
• バグを修正した後、コードをもう一度実行します。バグがある場合は、上記の7つの手順に従ってコードをデバッグします。ファイルを保存し、Firefoxで同じものをプレビューします。

プログラマーは、Firebugの効率を利用することで、最悪の悪夢のようなバグ修正をなくすことができます。 Firebugを自由に使用できるので、デバッグが簡単になります。