序文：デバッグコードは、プログラマーにとって不可欠です。あなたがマスターであろうと初心者であろうと、デバッグプログラムは不可欠なタスクです。一般的に、デバッグプログラムは、コードを作成した後、またはテスト中にバグを変更するときに実行されます。多くの場合、デバッグコード中に問題を分析するプログラマーのレベルと精度を反映する方が良いです。多くの初心者は、エラーの原因を探すとき、多くの時間を費やしているが、最終的には非常に単純であることが判明するいくつかのバグを解決することができない場合、常に問題を知らない。さまざまなデバッグスキルを習得すると、仕事の半分の努力が途中で2倍の結果が得られます。たとえば、問題を迅速に見つけ、障害の可能性を減らし、論理エラーの分析などを助けます。
この記事では、さまざまなフロントエンドJSデバッグテクニックを1つずつ説明します。たぶんあなたはそれらを習得したので、一緒にレビューしましょう。たぶんあなたが今まで見たことのない方法があります。一緒に学ぶこともできます。たぶん、あなたはデバッグする方法を知らないでしょう。この機会を利用してギャップを埋めてください。
1。アラート、アラウトデバッグマスター
そのとき、インターネットが始まったばかりで、Webページのフロントエンドは主にコンテンツディスプレイに関するものであり、ブラウザースクリプトはページに非常にシンプルな補助機能のみを提供できました。当時、Webページは主にIE6が支配するブラウザで実行されており、JSのデバッグ機能はまだ非常に弱いため、ウィンドウオブジェクトに組み込まれたアラートメソッドを介してデバッグすることができました。その時、それは次のように見えたはずです：
ここで見られる効果は、当時のIEブラウザで見られる効果ではなく、IEのより高いバージョンでの効果であることに注意する必要があります。さらに、当時はそのような高度なコンソールがないようで、アラートの使用も実際のページJSコードにありました。アラートのデバッグ方法は非常に原始的ですが、当時は消えない価値があり、今日でも使用する場所があります。
2。キングコンソールのデバッグの新世代
JSは、Webフロントエンドでますます多くのことを行うことができるため、責任はますます大きくなり、ステータスはますます重要になっています。従来のアラートデバッグ方法は、フロントエンド開発のさまざまなシナリオを徐々に満たすことができませんでした。さらに、アラートデバッグ方法によってポップアップされたデバッグ情報は、実際には美しくなく、ページコンテンツをブロックしますが、これは本当にフレンドリーではありません。
一方、アラートのデバッグ情報は、「アラート（xxxxx）」などのプログラムロジックに正常に機能する必要があり、アラートはページの継続的なレンダリングを妨げます。これは、開発者のデバッグが完了した後、これらのデバッグコードを手動でクリアする必要があることを意味します。これは本当に面倒です。
したがって、新世代のブラウザFirefox、Chrome、およびIEはJSデバッグコンソールを連続して発売し、「Console.log（xxxx）」に似たフォームの使用をサポートして、ページディスプレイに直接影響することなくコンソールにデバッグ情報を印刷します。 IEを例として考えてみてください、それは次のように見えます：
わかりました、醜いアラートポップアップボックスに別れを告げます。 Chromeが率いるRising Starは、より豊富な機能をコンソールに拡大しました。
これは満足だと思いますか？ Chrome開発チームの想像力は本当に素晴らしいです：
わかりました、私はもう少しトピックからもう少し言いました。要するに、コンソールとブラウザに組み込みコンソールオブジェクトの出現は、フロントエンドの開発とデバッグに非常に便利になりました。
一部の人々は、デバッグが完了した後にこのデバッグコードをクリーニングする必要がありますか？
この問題に関しては、コンソールオブジェクトを使用する前に存在の高度な検証がある場合、削除なしでビジネスロジックに損傷を与えることはありません。もちろん、きちんとしたコードを確保するために、デバッグが完了した後、ビジネスロジックに関連していないこれらのデバッグコードを可能な限り削除する必要があります。
3。JSブレークポイントデバッグ
デバッガーの関数の1つであるBreakPointにより、必要に応じてプログラム中断を中断させることができ、それにより分析が促進されます。 1つのデバッグでブレークポイントを設定することもできます。次回は、プログラムをセットのブレークポイント位置に自動的に実行する必要があり、最後のセットブレークポイント位置で中断することができます。これにより、操作を大幅に容易にして時間を節約できます。 -baidu百科事典
JS Breakpoint Debuggingとは、ブラウザー開発者ツールでJSコードにブレークポイントを追加し、JSの実行が特定の場所で停止できるようにすることを意味します。これにより、開発者がコードセグメントの分析と論理処理を容易にします。ブレークポイントのデバッグの効果を観察するために、事前にJSコードを準備します。
コードは非常にシンプルで、関数を定義し、2つの数値を渡し、乱雑なランダム整数を追加してから、2つの数値の合計を返すことです。 Chrome開発者ツールを例にとると、JSブレークポイントのデバッグの基本的な方法を見てみましょう。
3.1。ソースブレークポイント
まず、テストコードでは、上記の図のコンソールの出力結果を介してコードが正常に実行されるはずですが、なぜそうする必要があるのですか？乱数が関数に追加されるため、最終結果は本当に正しいですか？これは意味のない推測ですが、今すぐ確認するとします。関数に渡された2つの数字、乱数が追加され、最終合計です。では、操作方法は？
方法1、上記の最も一般的なもの、アラートまたはコンソールを使用するかどうかにかかわらず、この方法でそれを確認できます。
上の図から、私たちが気にするデータ変数を印刷するために、コードに3行のコンソールコードを追加しました。最後に、計算プロセス全体が正常かどうかを明確に確認し、質問によって設定された検証要件を満たすことができます。
方法2と方法1には、検証プロセスに明らかな欠点があります。これは、多くの冗長コードが追加されていることです。次に、検証にブレークポイントを使用する方が便利かどうかを見てみましょう。まず、ブレークポイントを追加する方法と、ブレークポイントの後の効果をご覧ください。
図に示されているように、コードにブレークポイントを追加するプロセスは、「F12（CTRL + SHIFT + I）オープン開発ツール」 - 「ソースメニューをクリックします」 - 「左ツリーの対応するファイルを検索」 - 「[行番号]列をクリックして、現在の行のブレークポイントの追加/削除を完了します。ブレークポイントが追加されたら、ページJS実行がブレークポイント位置で停止します。ソースインターフェイスでは、現在の範囲にすべての変数と値が表示されます。各値を確認して、検証要件を完了するだけです。
問題はこちらです。注意すると、コードがブレークポイントに到達すると、表示された変数AとBの値が追加されていることがわかります。合計関数を呼び出すときに、最初の10と20が渡されたものを見ることができません。それで、私は何をすべきですか？これには、戻ってブレークポイントのデバッグに関する基本的な知識を学ぶ必要があります。ソースパネルを開いた後、実際にインターフェイスに次のコンテンツが表示されます。マウストラックに従って、それが何を意味するのかを確認します。
左から、各アイコンで表される関数は次のとおりです。
一時停止/再開スクリプトの実行：一時停止/再開スクリプト実行（プログラムの実行は次のブレークポイントで停止します）。
次の関数呼び出し：次のステップに関数呼び出しを実行します（次の行にジャンプします）。
次の関数コールへのステップ：現在の関数を入力します。
現在の機能から抜け出す：現在の実行関数から抜け出します。
非アクティブ/アクティブすべてのブレークポイント：すべてのブレークポイントでオフ/オン（キャンセルされていません）。
例外で一時停止：例外のための自動ブレークポイント設定。
この時点で、ブレークポイントデバッグの関数キーがほぼ導入されています。次に、下の図に示すように、各ラインが実行された後に各変数の変更を確認するために、プログラムコードラインを回線で確認できます。
上記のように、変数aとbのプロセス全体を初期値から中央のランダム値を追加し、最後に合計を計算して最終結果を出力することができます。質問設定の検証要件を完了することは問題ありません。
残りの機能キーについては、テストコードをわずかに変更し、GIF図を使用して使用法を示します。
ここで注意すべきことの1つは、コード領域に直接変数値を直接印刷する機能が、Chromeの新しいバージョンに追加された新機能であることです。まだ古いバージョンのChromeを使用している場合、ブレークポイントの下で変数情報を直接表示できない場合があります。この時点で、マウスを変数名に移動して短時間一時停止すると、変数値が表示されます。また、マウスで変数名を選択して、右クリックして「時計に追加」を右クリックして、時計パネルで表示します。この方法は、表現にも適用されます。さらに、ブレークポイントのコンソールパネルに切り替えて、コンソールに変数名を直接入力して、変数情報を入力することもできます。この部分は比較的単純で、記事の長さを考慮して、写真やデモンストレーションを作成しません。
3.2。デバッガーブレークポイント
いわゆるデバッガーブレークポイントは実際に私から名前が付けられており、専門用語を言う方法がわかりません。具体的には、「デバッガー」を追加することにより、コードへのステートメント、コードがステートメントを実行すると、ポイントが自動的に破損します。次の操作は、ソースパネルにブレークポイントデバッグを追加することとほぼ同じです。唯一の違いは、デバッグ後にステートメントを削除する必要があることです。
ブレークポイントを設定するのと同じ方法が異なるため、機能はソースパネルにブレークポイントを追加することと同じです。なぜこの方法が存在するのですか？その理由はこれだと思います。開発中のHTMLフラグメント（埋め込まれたJSコードを含む）の非同期負荷に遭遇することがあり、JSコードのこの部分はソースツリー種には見られないため、開発ツールにブレークポイントを直接追加することはできません。その後、非同期にロードされたスクリプト「デバッガー」にブレークポイントを追加する場合は、現時点では機能します。 GIF図を通してその効果を直接確認しましょう。
4。DOMブレークポイントデバッグ
Dom Breakpointは、名前が示すように、DOM要素にブレークポイントを追加して、デバッグの目的を達成することです。実際の使用でブレークポイントを使用する効果は、最終的にJSロジックに実装されます。各DOMブレークポイントの特定の効果を順番に見てみましょう。
4.1。ノード内の子ノードが変更されたときにサブツリーの変更を破る（サブツリーの変更で破損）
今日、フロントエンドの開発がますます複雑になっているとき、フロントエンドJSコードはますます複雑になり、一見シンプルなWebページには通常、JSコードの大規模なセグメントが伴い、DOMノードの追加、削除、変更の多くの操作が含まれます。 JSコードを介してコードセグメントを直接見つけることは困難であることは避けられませんが、開発者ツールの要素パネルを介して関連するDOMノードをすばやく見つけることができます。現時点では、DOMブレークポイントを介してスクリプトを見つけることが特に重要です。 GIFデモを見てみましょう。
上記の図は、ULチャイルドノード（LI）のブレークポイントをトリガーする注文操作を追加、削除、および交換する効果を示しています。ただし、子ノードの属性と内容を変更しても、ブレークポイントをトリガーしないことに注意する必要があります。
4.2。属性の変更を破ります
一方、フロントエンド処理のビジネスロジックがますます複雑になるにつれて、一部のデータへのストレージの依存がより強くなり、より強くなりつつあります。 DOMノードの（カスタム）プロパティに一時データを保存することは、多くの場合、開発者にとって好ましい方法です。特に、HTML5標準がカスタム属性サポートを強化した後（たとえば、データセット、データ - *など）、ますます多くの属性設定が適用されるため、Chrome開発者ツールは属性の変更ブレークポイントサポートも提供し、効果は次のとおりです。
また、この方法は、子ノードのプロパティの操作では、ノード自体のブレークポイントをトリガーしないことにも注意する必要があります。
4.3。ノードの削除で破損します
このDOMブレークポイントの設定は非常に簡単であり、ノードが削除されている場合、トリガー方法は非常に明確です。したがって、通常、「ParentNode.RemoveChild（ChildNode）」ステートメントを実行する場合は、ケースが必要です。この方法はあまり使用されていません。
以前に紹介したのは、基本的に、毎日の開発でよく使用するデバッグ方法です。適切に使用すると、日々の開発におけるほとんどすべての問題に対処できます。ただし、開発者ツールは、図に示すように、より多くの状況を考慮し、ブレークポイントのより多くの方法を提供します。
5。XHRブレークポイント
フロントエンドの開発は、近年、その未知の評判から現在の繁栄まで、豊富なWebアプリケーションを推進し、モバイルWebAppシングルページアプリケーションが活況を呈している、近年、地球を揺るがした変化を遂げています。これらはすべてxmlhttprequestオブジェクトとは分離できず、「xhrブレークポイント」は、非同期のために設計されたブレークポイントデバッグ機能です。
「XHRブレークポイント」の右側の「+」サインを介して、非同期ブレークポイントにブレークポイント条件を追加できます。 URLが非同期要求がトリガーされると、JSロジックがブレークポイントを自動的に生成します。デモはjQueryによってカプセル化されたAjaxメソッドを使用するため、デモアニメーションではブレークポイントの位置は実証されていません。コードは圧縮されており、効果はありません。実際、XHRブレークポイントは「xhr.send（）」ステートメントによって生成されます。
XHRブレークポイントのパワーは、ブレークポイントルールをカスタマイズできることです。つまり、特定のバッチ、特定のバッチ、さらにはすべての非同期リクエストにブレークポイントを設定できることを意味します。これは非常に強力です。ただし、この機能は毎日の開発ではあまり使用されていないようです。少なくとも私はそれをあまり使用していません。考えてみてください。ほぼ2つの理由があります。まず、このタイプのブレークポイントデバッグ要件は、日常業務にあまり関与していません。第二に、この段階でのフロントエンド開発のほとんどはJSフレームワークに基づいており、最も基本的なjQueryはAjaxをカプセル化しています。 Ajaxメソッド自体をカプセル化する人はほとんどいません。コードサイズを削減するために、プロジェクトは通常、圧縮コードベースを選択しているため、XHRブレークポイント追跡は比較的簡単になります。
6。イベントリスナーブレークポイント
イベントリスナーブレークポイント、つまり、ブレークポイント設定はイベント名に従って実行されます。イベントがトリガーされると、ブレークポイントはイベントが拘束される場所にあります。イベントリスナーブレークポイントには、マウス、キーボード、アニメーション、タイマー、XHRなどを含むすべてのページおよびスクリプトイベントがリストされています。イベントでビジネスロジックをデバッグすることの難しさを大幅に軽減します。
デモの例は、クリックイベントが起動されたときとSetimeOutが設定されたときのブレークポイント効果を示しています。この例は、クリックイベントブレークポイントが選択された後、両方のボタンがクリックされたときにブレークポイントがトリガーされ、SetimeOutが設定されると、「セットタイマー」ブレークポイントがトリガーされることを示しています。
デバッグは、プロジェクト開発の非常に重要な部分です。問題をすぐに見つけるのに役立つだけでなく、米国の開発時間を節約できます。さまざまなデバッグ方法に習熟することで、キャリア開発に多くの利点があります。ただし、非常に多くのデバッグ方法により、現在のアプリケーションシナリオに適した方法を選択する方法には、経験と継続的な試みが必要です。
これを書いて、基本的には本格的に出てきたと言えます。私はそれがあなたの注意を引き付けることができることを願っています、そして私はそれがあなたが少し感動し、少し馴染みのあると感じさせることを願っています。最も重要なことは、あなたがあなたのスキルをすばやく改善し、熟練した人になることを願っています！