js デバッグ シリーズ ブレークポイントと動的デバッグ [基礎]_javascript スキル

ここ数回の記事では、JS デバッグ シリーズの基本的な知識を紹介してきました。今回は、文字化けした兄弟が JS ブレークポイントと動的デバッグ方法を紹介しました。必要な方は参考にしてください。

昨日の放課後演習 1. votePost 機能がどのように実装され、推奨されているかを分析します。
実際、ソース コードはすでに見ていますが、ソース コードを読むだけで、それがどのように実装されているかがわかります。

function votePost(n, t, i) { 
 i || (i = !1); 
 var r = { 
  blogApp: currentBlogApp, 
  postId: n, 
  voteType: t, 
  isAbandoned: i 
 }; 
 $("#digg_tips").css("color", "red").html("提交中..."); 
 $.ajax({ 
  url: "/mvc/vote/VoteBlogPost.aspx", 
  type: "post", 
  dataType: "json", 
  contentType: "application/json; charset=utf-8", 
  data: JSON.stringify(r), 
  success: function(n) { 
   if (n.IsSuccess) { 
    var i = $("#" + t.toLowerCase() + "_count"); 
    r.isAbandoned ? $(i).html(parseInt($(i).html()) - 1) : $(i).html(parseInt($(i).html()) + 1) 
   } 
   $("#digg_tips").html(n.Message) 
  }, 
  error: function(n) { 
   n.status > 0 && (n.status == 500 ? $("#digg_tips").html("抱歉！发生了错误！麻烦反馈至contact@cnblogs.com") : $("#digg_tips").html(n.responseText)) 
  } 
 }); 
}

ほぼこんな感じです。
追記: 私は崇高なテキスト形式のコードを使用していますが、これは Chrome コンソールで形式設定された結果とは少し異なります。
このオンライン書式設定ツールを試すこともできます。効果は同様です: オンライン JavaScript 整形ツール

コードをざっと読むと、この関数には 3 つのパラメーターがあることがわかります。1 つ目は記事 ID である postId、2 つ目は推奨 (digg) または反対 (bury) です。
ただし、3 番目の値は一度も使用されておらず、デフォルト値は false
下を見ると、#digg_tips に "Submitting..." 文字列を表示し、ajax を通じてデータをバックグラウンドに送信します。
データを返した後、n.IsSuccess が true の場合、1、 になります。 ただし、ここでは、isAbandoned の値が true の場合、-1 とカウントされることがわかります。 次に、3 番目のパラメータは、推奨またはオブジェクトをキャンセルするために使用されていると推測できます。簡単に言うと、推奨をクリックしましたが、今は推奨したくないのです。推奨をキャンセルするには、3 番目のパラメータ true を渡すことができます。
後でテストします。 次のステップでは、サーバーから返された n.Message 情報を #digg_tips
に表示します。
Ajax エラーが発生した場合、
500 は 「申し訳ありません! エラーが発生しました! contact@cnblogs.com にフィードバックを送信してください」
というプロンプトを表示します。その他のステータスでは、サーバーから返されたエラー メッセージが直接表示されます。 これが大まかな流れです。シンプルな機能ですので、基本的には一目で分かります。 初心者の中には、currentBlogApp、n、t、i の値をどうやって知るのかと尋ねた人もいるかもしれません。 次に、次のステップである動的デバッグに進みます。コンパイルされたプロジェクトの場合、動的デバッグは非常に便利なツールです。
まず、votePost のソース コードを見つけます (これについては昨日説明しました。理解できない場合は、最初に戻って見てください。)

とても簡単に、ソースコードを見つけることができました。

次に、92 番をクリックしてブレークポイント操作を実行します。

なぜ 91 行目にブレークポイントを置かないのでしょうか? 91 行目は関数宣言部分であるため、ブレークポイントを設定する方法はありません。関数を実行するコードにブレークポイントを設定できます。


91 行目の行番号が青に変わり、この位置にブレークポイントが設定されていることを示します。同時に、右側の [ブレークポイント] 列に設定されているブレークポイントが表示されます。
ブレークポイント この列はすべてのブレークポイントを管理します。今後頻繁に使用する、対応するブレークポイントの場所に簡単にジャンプできます。
ブレークポイントが設定されたので、戻って「推奨」をクリックしましょう。 。 (推薦に騙されているような気がしますが、実際はそうではありません。練習用のボタンをランダムに見つけただけです。)
[Recommend] ボタンをクリックすると、レコメンデーション機能が実行される代わりに、コンソールの [Sources] パネルで設定したばかりのブレークポイントにジャンプします。

これで、右側の [スコープ変数] 列に現在の変数が表示されるだけでなく、任意の変数の上に直接マウスを移動して変数の値を表示することもできます。
「スコープ変数」列には、現在のスコープ、その親スコープ、およびクロージャが表示されます。
超便利じゃないですか？ 。 (スコープ変数は、クロージャを初めて学んだときに非常に役に立ちました。)
次のステップに進み、F10 を 3 回押して次のように表示します。

F10 を押すたびにステートメントが実行されます。先ほど 3 回押したときは $("#digg_tips").css("color", "red").html("Submitting..." が実行されました。 ");

そのため、投稿を表示するページに #digg_tips という単語が表示されます。
しかし、もう一度 F10 を押すと、ajax 内のコールバック関数に入らずに実行が継続されていることがわかりました。

これは複雑な質問ですが、ここに焦点を当てたいと思います。
このようなコールバック関数、特に非同期関数の場合、コールバック関数内にブレークポイントを再度設定する必要があります。
したがって、96 行目にブレークポイントを設定できます。ここで「Recommend」をクリックしても、92 行目で停止します。F8 キーを押すだけで、ajax コールバック関数でブレークできます。

これで、コールバック データをデバッグできるようになり、右側のスコープ変数に追加のクロージャ (クロージャ) があることもわかります。
今理解できない場合は、忘れてください。このことについては長い説明が必要で、一言で説明することはできません。とにかく、このコンソールは非常に強力です。
クロージャを確認しているときに、ajax の戻りデータ n も確認しました。明らかに、IsSuccess 属性は false であり、「独自のコンテンツを推奨できません」というメッセージが返されたため、成功しませんでした。
動的デバッグを使用すると、バグを簡単に見つけることができます。

次に、3 番目のパラメータを試してみましょう。
コンソールに「votePost(cb_entryId, 'Digg', true);」と入力し、Enter キーを押します。
また、92 行目のブレークポイントでも停止します。ここでデバッグする必要はありません。F8 キーを押すだけで ajax コールバック関数に入ります。

ここでは、3 番目のパラメーターが true の場合、推奨が実際にキャンセルされていること、および更新された場合でも推奨の数が実際に -1 であることが非常に明確にわかります。

今回は F10 と F8 の 2 つのショートカット キーを使用しました。これらについては明日詳しく紹介します。今日はまず基本的なデバッグを学習します。

授業後の演習: (難易度を上げる)
1. 以下のコメントの「コメントを送信」ボタンをチェックして、彼のイベントを見つけます。 (jQueryバインディング)
2. このコメント送信イベントの実行プロセスを動的にデバッグします。

この演習の方法がわからない場合は、詳細な分析について「jQuery イベント ソース コードの位置決めの問題に関する簡単な説明」を読むことをお勧めします。

この記事は、Blog Park ブロガー Garbled Code の記事から引用しています。 http://www.cnblogs.com/52cik/