jsデバッグシリーズ ソースコードの位置付けとデバッグ【基礎】_javascriptスキル

まず最初の問題に対処しましょう: 1. この関数によって呼び出される推奨関数のソース コードを記事の下部に表示します
実際は非常に簡単で、虫眼鏡をクリックして推奨事項を選択するだけです。

このvotePost(cb_entryId,'Digg')はレコメンドボタンで呼び出される関数です、とてもシンプルですね。

2 番目の質問は、関数が配置されているファイルの場所を見つけることです。
もちろん、それは非常に簡単です。コンソールに慣れていない友人は、それを見る方法を知らないかもしれません。
コンソールに「votePost」と入力し、Enter キーを押します。

関数のソース コードが太字で表示され、右下隅に blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 というリンクがあります。これは何を意味しますか?
次の v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 は単に無視されます。

追伸: これが何であるかを知りたい場合は、実際にはバージョン番号です。その機能については、多くの場合、キャッシュを防止するためのものです。詳細については、オンラインで検索してください。
blog-common.js:1 ほぼこれが意味します。 。
blog-common.js は、この関数が配置されている js ファイルです
1 はコードの行番号です。

このリンクを直接クリックすると、[ソース] パネルに移動します。これは、デバッグのための最も重要な機能です。

しかし、コードはすべて 1 行にあります。4946 文字があり、すべてが 1 行に凝縮されています。 。
Chrome にはコードのフォーマット機能が用意されており、下の [Pretty print] ボタンをクリックしてコードをフォーマットします。

フォーマットが完了すると、コードが非常に美しくなります。それが読み取れるかどうかは別問題です。
理解できない場合は、コードが UglifyJS や Google の Closure (jquery.min.js ファイルなど) などのツールによってコンパイルされている可能性があります。
レベルが低すぎてマスターの書いたコードが当分理解できない可能性もあるので、頑張ってレベルアップするしかありません。
フォーマット後に関数の場所が見つからなくても、心配する必要はありません。
先ほどのコンソールパネルに戻ります。

blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91
を発見できてうれしく思います。 行番号が 91 に変更されました。このリンクをクリックすると、対応する書式設定された位置にジャンプします。とても便利ですよね。 。

最後の質問は、関数を変更して無効にすることです。これは最も単純で、前のものよりもはるかに簡単ですが、多くの人が操作方法を知らないので、ここで説明します。
まず、レコメンデーション関数によって呼び出される関数は votePost(cb_entryId,'Digg') であることがわかり、これは html に直接記述され、onclick を通じてバインドされます。
この関数はグローバル関数であり、どこからでも呼び出すことができますが、これは何を意味するのでしょうか?
つまり、グローバル変数と同じように、どこでも変更できるので、グローバル関数も同じである必要があります。
したがって、それを空の関数に直接変更できます。
votePost = function () {}; または votePost = $.noop; 両方とも機能します。 $.noop は、便宜のために jQuery によって提供される空の関数です。

現在、votePost は空の関数なので、[Recommend] ボタンをクリックしても何も起こりません。
もちろん、ページを更新すると再び有効になります。ブログ パークのソース コードを変更しない限り、変更を永続的に有効にすることはできません。
したがって、デバッグとは、エラーの原因が見つかった場合は、それを修正してテストし、実際のファイルを修正する必要がないようにするプロセスを意味します。回復不能になる原因となります。

今日はここまでです。実際、デバッグできる直接のグローバル関数はほとんどありません。これは、現在 jQuery が普及しており、さまざまな click、on、およびその他のイベント バインディングによってソース コードの位置決めが非常に面倒になっているためです。
幸いなことに、この問題について詳しく分析した記事を以前に書きました。詳細については、「jQuery イベント ソース コードの位置決めの問題に関する簡単な説明」
を参照してください。 他のフレームワークには詳しくないので分析はしていませんが、実際には考え方は似ており、イベント管理の仕組みがあるはずです。

今日は知識ポイントはそれほど多くありませんが、自分で固めないと、すぐに忘れてしまいます。

授業後の演習:
1. votePost 関数がどのように実装され、推奨されているかを分析します。
2. votePost の動的デバッグと分析。 (ブレークポイントの知識と組み合わせる必要があります)

明日はブレークポイントと動的デバッグについて話す予定ですが、適切なトピックが見つからないので、動的デバッグが必要なトピックがあれば、コメントを残してください。 。