以前の記事では、JSデバッグシリーズの基本的な知識を紹介しています。今回、文字化けのコード兄弟は、JSブレークポイントとダイナミックなデバッグ方法をもたらしました。それを必要とする友達はそれを参照できます。
クラス後のエクササイズ私は昨日1を去りました。
実際、ソースコードを見てきました。ソースコードを読むだけで、それがどのように実装されているかを知ることができます。
function votepost（n、t、i）{i || （i =！1）; var r = {blogapp：currentblogapp、postid：n、voteType：t、isabanded：i}; $（ "＃digg_tips"）。css（ "color"、 "red"）。html（ "commit ..."）; $ .ajax（{url： "/mvc/vote/vote/voteblogpost.aspx"、type： "post"、datatype： "json"、contentType： "application/json; charset = utf-8"、data：json.stringify（r）、success：function（n）{n.issuckess）{var i = $（ "_count"）; r.isabanded（i）.html（$（i）.html（））：$（i）.html（$（i）） + 1）} $（ "＃digg_tips"）。 （n.Status == 500？$（ "＃digg_tips"）。html（ "anderが発生しました！[email protected]にフィードバックしてください！ }まるでこんな感じです。
PS：Sublime Textフォーマットコードを使用します。これは、Chromeコンソールでフォーマットした後の結果とは少し異なります。
このオンラインフォーマットツールを試すこともできます。効果は似ています：オンラインjavascript美しい
コードを簡単に読んだ後、この関数には3つのパラメーターがあることを大まかに知ることができます。 1つ目はPostIDです。これは記事IDであり、2つ目は推奨（digg）または反対（bury）です。
しかし、3番目のものは使用されておらず、デフォルト値は偽です
見下ろすと、彼は#digg_tipsに「submit ...」文字列を表示し、Ajaxを介してデータを背景に提出します。
データを返した後、n.issuccessがtrueの場合、wik（#digg_count）または異議（#bury_count）の対応するカウントIDで+1になります。
ただし、イザバンドンの値が真である場合、カウント-1。
次に、3番目のパラメーターが推奨または異議を取り消すために使用されると推測できます。簡単に言えば、推奨事項をクリックしましたが、今はお勧めしたくありません。推奨事項をキャンセルする効果を実現するために、3番目のパラメーターを渡すことができます。
後でテストしましょう。
次に、サーバーによって返されるn.message情報が#digg_tipsで表示されます。
Ajaxでエラーが発生した場合、500です。「ごめんなさい！エラーが発生しました！[email protected]にフィードバックしてください」とプロンプトが表示されます。
これは一般的なプロセスです。この関数は単純であるため、一目で見ることができます。
一部の新しい友人は、currentblogapp、n、t、iの価値をどのように知っていますか？
次に、次のステップとダイナミックなデバッグに行きましょう。ダイナミックデバッグは、コンパイルされたプロジェクトに非常に便利な方法です。
最初に投票ポストソースコードを見つけます（昨日これを言ったが、それをあまり理解していない後、戻って最初に見てみてください）。）
簡単に、ソースコードを見つけました。
次に、ナンバー92をクリックして、ブレークポイント操作を実行します。
91行目のブレークポイントはなぜですか？
行91は関数宣言の部分であるため、ブレークポイントを設定することはできません。コードにブレークポイントを設定することができます。
ライン91のライン番号が青くなったことを確認し、この場所にブレークポイントがあったことを示しています。同時に、右側のブレークポイント列に倒れたブレークポイントが表示されます。
ブレークポイント列はすべてのブレークポイントを管理します。これは、対応するブレークポイント位置に簡単にリダイレクトでき、将来使用されます。
ブレークポイントの設定が完了したので、推奨事項をクリックします。 。 （私は推奨事項をだましているように感じますが、私は本当にそうは思いませんでした。練習するボタンを見つけました。）
推奨ボタンをクリックすると、魔法が起こりました。推奨機能を実行する代わりに、コンソールのソースパネルで下げたブレークポイントにジャンプしました。
これで、右側のスコープ変数列に現在の変数が表示されるだけでなく、マウスを任意の変数に直接移動して変数の値を表示することもできます。
Scope変数列には、現在のスコープとその親スコープ、および閉鎖が表示されます。
とても便利ではありませんか？ 。 （最初に閉鎖を学んだとき、スコープ変数は私を大いに助けてくれました。）
次のステップにアクセスして、F10を3回押してこのようなものを見てみましょう。
F10を押すたびに、ステートメントを実行します。今すぐ3回押した後、$（ "＃digg_tips"）。css（ "color"、 "red"）。html（ "submit ..."）;
そのため、ページ上の送信に単語を表示する#DIGG_TIPSが表示されます。
しかし、再びF10を押すと、AJAX内のコールバック関数を入力せずに完全に実行し続けたことがわかりました。
これは紛らわしい質問であり、私はそれに焦点を合わせたいです。
このようなコールバック関数、特に非同期機能の場合、コールバック関数内の次のブレークポイントが必要です。
したがって、96行目にブレークポイントを設定するだけです。これで、推奨事項をクリックしても92行目で停止します。F8を押してAjaxコールバック関数で破損するだけです。
これで、コールバックデータをデバッグできます。また、右側のスコープ変数に追加の閉鎖的なものがあることもわかります。これが閉鎖です。
あなたが今それを理解できないなら、それを通り抜けてください。このことは大量に導入する必要があり、ほんの数語で説明することはできません。とにかく、コンソールは非常に強力です。
閉鎖を見ている間、Ajaxの返品データも表示されます。私のIssuccessプロパティが虚偽であり、「自分のコンテンツを推奨できない」というメッセージを返すために成功していないことは明らかです。
とても面白いですか？動的デバッグにより、バグを簡単に見つけることができますか？
次に、3番目のパラメーターを試してみましょう。
PotePost（cb_entryid、 'digg'、true）を入力します。 Enterを押します。
また、92行目のブレークポイントで停止したため、これでデバッグされず、F8のAJAXコールバック関数を直接入力します。
ここでは、3番目のパラメーターが真である場合、推奨事項が実際にキャンセルされることを明確に確認します。同時に、たとえ更新されていても、推奨番号が実際に-1であることがわかります。
今回は、2つのショートカットキーF10とF8を使用しました。明日は詳細に紹介します。今日は、最初に基本的なデバッグを学びます。
クラス後のエクササイズ：（難易度を改善）
1.下のコメントについてはコメントの送信ボタンをチェックして、彼のイベントを見つけてください。 （jqueryバウンド）
2。この提出コメントイベントの実行プロセスを動的にデバッグします。
この演習がわからない場合は、詳細な分析のために「JQuery Event Sourceコードの位置決めの問題に関する簡単な講演」を読むことをお勧めします。
この記事は、ブログガーデンブロガーの文字化け記事からのものです。 http://www.cnblogs.com/52cik/