1.ブレークポイントのデバッグとは何ですか？難しいですか？
ブレークポイントのデバッグは、実際には複雑なものではありません。発信コールの簡単な理解は、ブラウザを開き、ソースを開き、JSファイルを見つけて、行番号をクリックすることです。操作は非常に簡単に思えますが、多くの人が実際に混乱しているのは、ポイントを壊す場所ですか？ （まず、ブレークポイントのスクリーンショットを見てみましょう。クロムブラウザのブレークポイントを例に挙げてみましょう）
手順を覚えていますか？
Chromeブラウザを使用してページを開く→F12を押して開発者ツールを開きます→[開くソース]→[デバッグするJSコードファイル]を開く→[ライン番号]をクリックしてください！ヒットしてくれたバージンブレークポイント、ハハ~~おめでとうございます
2。ブレークポイントを適切にヒットする方法は？
ブレークポイントの操作は非常に簡単です。中核的な問題は、ブレークポイントを押してコードの問題をトラブルシューティングする方法です。私はあなたに理解する例をあなたに与え続けさせてください。これ以上苦労せずに、上の写真：
上の図に示すように、より多くの機能をロードする関数を実装しているが、より多くの機能をロードすることに問題があるとします。クリックした後、データはロードされません。現時点ではどう思いますか？ （別の行で答えを書くと、あなたの最初の反応が何であるかを見ることができます）
私の頭に浮かぶ最初のことは、私のクリックが成功したかどうかでしたか？クリックイベントの方法は実行されていますか？わかりました、この質問に対する答えを知りたい場合は、すぐにブレークポイントを押してみましょう。ブレークポイントはどこにありますか？最初にそれについて考えてください。
次の写真：
考えましたか？クリックが成功しているかどうかを知りたいので、そうです。もちろん、コードのクリックイベントでブレークポイントを追加しています。 226行のセレクターではなく、クリックメソッドの関数が実行されているため、226行に追加しないことを忘れないでください。ブレークポイントがヒットしました。自分で考えてみてください〜
上記の写真に続きます：
それからもちろん、私たちは戻って、より多くのボタンをクリックしました、なぜですか？額。 。 。これを尋ねる場合は、[ロード]ボタンをクリックせずに、この絵文字を使用してもらいましょう。クリックイベントをトリガーするにはどうすればよいですか？クリックイベントをトリガーせずにクリックイベントで機能を実行する方法は？ ro音。 。しかし、私は誰もがそのような低い質問をしないと信じています〜私はナンセンスについて話さない〜
トピックを続行します。上の写真は、ロードのボタンをクリックした後の状況です。左側のページが半透明の層で覆われていることがわかります。また、ページの上には英語の文字列と2つのボタンがあります。右側のコードの227行は、背景色で追加されています。この状況は、ボタンが何を意味し、その機能が何をするかに関係なく、発生します。この写真からどのような情報を得ましたか？考え続けてください〜
上記の状況が発生した場合、クリックイベントの関数が呼び出されていることを意味します。これは、クリックイベントが有効になることをさらに説明します。それから、私たちがこの問題に引き起こした最初の「犯罪容疑者」は除外されます。
追加する：
上記の状況が発生しない場合はどうなりますか？それは、クリックイベントが有効になっていないことを意味しますか？クリックイベントが有効になった原因は何ですか？誰もがそれについて自分自身について考えています〜
マルチセレクターエラー、構文エラー、選択された要素が後で生成されるなど、クリックイベントが有効になっていない理由はたくさんあります。それを解決する方法はありますか？
セレクターは間違っています。コンソールパーツのコンテンツを後で引き続き確認できます。誰もがそれに対処する方法を知っていると思います。
構文エラー、注意深く確認してください。 Baiduのなじみのない文法を比較できます。
選択した要素は後で生成されます。それを処理する最も簡単な方法は、.on（）メソッドを使用することです。このことは、イベント委任で処理されます。詳細については、Baiduを使用できます。
では、「犯罪容疑者」の身元は次にどこでロックされますか？
内部のイベントに注意を向け、クリックイベントがトリガーされるため、次の問題はその内部の関数の問題です。理由を尋ねたいなら？豆腐をください。 。 。
たとえば、私はあなたにペンを与えて、あなたに書くように頼みます。次に、紙に単語を書き、単語が出ていないことがわかります。なぜ？あなたは私がそれを書いたと言ったが、紙にまだ傷があった。ペンにインクがないか、先端が壊れている可能性はありますか？この例は、クリック読み込みの原則です。ライティングアクションはクリック操作です。内部関数はインクまたはペンチップです。あなたは理解していますか〜
次に、3つの文を含むクリックイベントのコンテンツを分析します。最初の文は、Iがそれ自体で成長する変数、2番目の文はボタンにIタグを追加することであり、3番目の文はデータを要求する方法を呼び出すことです。
これら3つの文の役割を通じて、第3文に疑いの大部分を配置し、第1文と2番目の文に小さな部分を置くことができます。一部の人々は、2番目の文はどうして疑われることができるのか疑問に思うかもしれません。彼の機能は、データにまったく影響を与えないラベルを追加することです。実際、この文はデータに影響を与えませんが、厳密な考慮事項のために、それはまだ間違いを犯す可能性があります。たとえば、セミコロンがない場合はどうなりますか？それとも、文の中に間違ったシンボルがありますか？多くの場合、私たちの多くの時間を浪費するのはこの種の小さな問題です。
OK、「犯罪容疑者」をさらにロックするために、上の写真に掲載されている2つのアイコンの1つであるツールを紹介します。下の写真を参照してください。
この小さなアイコンの機能は、「文ごとに実行」または「段階的に実行」と呼ばれます。これは私が個人的に理解している名前です。つまり、クリックするたびにJSステートメントは後で文を実行し、ショートカットキーF10もあります。次の図は、クリックした後の効果を示しています。
このボタンを2回クリックし（またはF10ショートカットキーを使用しました）、JSコードは227行目から229行目に実行されたため、「ステートメントバイステップ」または「ステップバイステップ」と呼びました。この機能は非常に実用的であり、ほとんどのデバッグに使用されます。
手遅れです、私は明日書き続けます、良いショーはまだ来ています〜
- - - - - - - - - - - - - - 、、、、、、、、、、、、、、、、...
わかりました、書き続けてください！
上記のはじめには、「文ごとの実行」ボタンを2回クリックし、コードが227行目から229行目に実行されたことを示しています。これはどういう意味ですか？文法的な観点から、最初の2つの文が問題ではないということを意味しますか？見えません。
誰もが知っているように、より多くのロードは次のページの関数であり、最もコアのないものは、背景に渡されるページ番号値です。 [ロード]ボタンを1回クリックすると、ページ番号の値を1ずつ増やす必要があります。したがって、次のページのデータが出てこない場合、ページ番号値に問題がある可能性があります。では、ページ番号に問題があるかどうかをトラブルシューティングする方法は？誰もが最初に考えます。
ページ番号i]の実際の出力値を表示する2つの方法は次のとおりです。上記の図：
最初のタイプ：
操作手順は次のとおりです。
1. 227という点でブレークポイントを押してください上の写真になります。
2番目のタイプ：
この方法は、実際には最初の方法に似ていますが、Iの値がコンソールに出力されていることを除きます。最初の方法に従って、ステップ3→4に実行する必要があります。ソースと同じレベルのコンソールを開き→5。EnterI→6を入力します。
上記の2番目の方法では、コンソールが言及されています。コンソールなどと呼ぶことができます。これは重要ではありません。コンソールには非常に強力な機能があります。デバッグプロセス中に、特定の変数の値が出力であるか、または必要な要素などを選択するためにセレクター[$ "。div"）を使用するかどうかをコンソールに印刷できるかどうかを知る必要があることがよくあります。もちろん、最初の方法を直接使用することも可能です。
コンソールで選択したい要素を示しましょう。上の写真〜
選択した要素を取得するには、コンソールに$（this）を入力します。はい、それは私たちがクリックしたオブジェクトです - より多くのボタン要素をロードします。
ここでは、コンソールコンソールについての私の理解について説明します。これはJSパーサーであり、ブラウザ自体がJSを実行している人を解析するために使用されます。ただし、ブラウザを使用すると、開発者はコンソールを介したデバッグプロセス中にJSの操作と出力を制御できます。上記の2つの方法では、非常に使いやすいと思うかもしれませんが、私はあなたに思い出させたいと思います。
混乱した1：ブレークポイントがない場合は、コンソールにIを入力すると、コンソールがエラーを報告します。
これは初心者にとって一般的な問題になるはずです。ポイントを破らずにコンソール内の変数の値を直接出力できないのはなぜですか？個人的には、私は現時点では単なるローカル変数であることを理解しています。ブレークポイントが設定されていない場合、ブラウザはすべてのJSを解析します。コンソールはローカル変数にアクセスできませんが、グローバル変数のみにアクセスすることはできません。したがって、コンソールは私が定義されていないエラーを報告しますが、JSがブレークポイントにヒットすると、コンソールはローカル変数Iが配置されている関数にそれを解析し、この時点でアクセスできます。
混乱2：コンソールで何かを$（ "。xxx"）に直接印刷できるのはなぜですか？
とても簡単です。コンソール自体はJSパーサーであり、$（ "。xxx"）はJSステートメントであるため、自然にコンソールはこのステートメントを解析して結果を出力できます。
「文ごとの実行」ボタンとコンソールの使用法を導入した後、最終的に別のボタン、上の写真を紹介します。
このボタンを「ステートメント実行」ボタンとは異なる「プロセス実行」ボタンを呼び出します。メソッドが複数のJSファイルを呼び出すときに、「プロセス実行」ボタンがよく使用されます。関係するJSコードは比較的長いため、このボタンが使用されます。
その上：
上記の写真では、227行でブレークポイントを作成し、229行目の「文でステートメントを実行する」ボタンをクリックし続けたとします。次の写真にJSを入力します。
これらは、Zeptoライブラリファイルの内容です。見るべきことは何もありません。実行するのは非常に複雑です。 「文ごとの実行」ボタンを常に使用できるとは限らないため、1日のほとんどを押していて、ライブラリファイルに囲まれていることがわかります。 。 。現時点で何をしますか？その後、「プロセスごとの実行」ボタンを作成してステージに上がります。
その上：
227行目にブレークポイントを設定することに加えて、237行のブレークポイントも押します。229行目に走ると、「プロセスごとの実行」ボタンを直接クリックします。 JSがライブラリファイルを直接スキップし、237行に走ったことがわかります。自分で使用して体験できます。
最終要約：
この記事では、主に「文章ごとの実行」ボタンの3つのツール、「プロセスごとの実行」ボタン、コンソールコンソール、およびバグをデバッグする際のアイデアの3つのツールを紹介します。ツールの使用は繰り返されません。使用法を知っているだけです。それをより合理的に使用する方法は、多くの練習を通じて要約および改善する必要があります〜
実際、私がこの記事で主に話したいのは、バグをデバッグする方法ですが、私が選んだ例にはあまりにも多くのものが含まれているからです。 。 。全体の内容が長すぎて、誰もがそれを読むことに興味がなかったのではないかと心配していたので、私はあなたにそれを説明するためにそれを選んだだけです。あなたが何かを得たのだろうか。デバッグで多くのことを書いた3つの文を見ないでください。実際のプロジェクトで私のように本当にやるなら、おそらくスクリプトを書くよりもバグをデバッグするのにはるかに時間がかかるでしょう。 。 。実際の状況では、問題が発生したときに初めて開発し、心の中で問題を確認し、最も可能性の高いポイントを見つける必要があります。最も重要なポイントをすばやく見つけることができない場合は、最も面倒で信頼できる方法を使用して「文ごとの実行」ボタンを使用して、問題に関連するJS全体を1つずつ実行できます。また、実行プロセス中に、思考を明確にし、各変数とセレクターによって選択された要素の正しい値に注意を払う必要があります。一般的に言えば、これを一度行うと、バグはほぼ解決されます。
ですから、私は個人的に、バグをデバッグするという私たちの考えは次のとおりであるべきだと思います。まず、JSが正常に実行されるかどうか。第二に、JSにロジックの問題、さまざまな問題、パラメーターの問題などがあるかどうか。最後に、上記に問題がない場合は、さまざまなシンボルを注意深く確認してください。 。 。
OK〜それはブレークポイントについてです〜理解していない場合は、以下にメッセージを残すことができます〜理解できない、またはフロントエンドについて混乱している知識ポイントがある場合は、下にメッセージを残すこともできます。あなたが時間があるとき、私はあなたのメッセージにいくつかの文書を書き続けます〜