仮説:ボタン( '#bigButton')があるページを見つけました。クリックすると、jQueryを使用してラマ( 'img#theLlama')がshow()されます。
したがって、buttons.jsのどこか(たとえば、76行目):
$('#bigButton').click(function(){
$('img#theLlama').show();
})
さて、大量の.jsファイルが含まれた大きなHTMLページがあるとします。ボタンをクリックしてラマが表示されるのを確認できますが、上記のコードがどこにあるのかわかりません。
私が探しているソリューションは、FirebugのCSSで利用可能なものと非常に似ています。要素を調べて、このjQueryがbuttons.jsの行76で、この要素の他のバインディングとともに発生することを示してもらいたいと思います。
* 注:報奨金は、「ラマの質問」に対する具体的な回答、つまり上記の解決策を指します。*
FireQueryは多くのjQueryタスクに最適なツールですが、ラマの質問に答えているようには見えません。これについて間違っている場合は、修正してください。
Cmd + Shift + C(要素の検査)を押してボタンをクリックすると、これが明らかになります:
イベント_Object {click= }
_をクリックすると、これが明らかになります(情報を展開した後)
function()
をクリックすると、これが明らかになります:
探しているコードはどれですか?
メモとして、Firebugは常に何かのコード行を見つけることができるとは限りません。この方法は完全に失敗しました!別のアプローチは、名前付き関数式を使用することです。コードを次のように変更します。
_$('#bigButton').click(function showMyLlama(){
$('img#theLlama').show();
})
_
events
オブジェクトを調べると、これが明らかになります。
このハンドラーがラマを示していることは明らかであるため、これはfunction()
よりもはるかに便利です。また、関数名のコードを検索して見つけることもできます!
Cmd + Shift + C(Inspect Element)を押してボタンをクリックすると、これが表示されます:
要素インスペクターのボタンをクリックし、Escキーを押してJSコンソールを開きます。
Chromeコンソールでは、_$0
_は要素パネルで選択された要素を参照します。
$._data( $0 )
を入力すると、Firebugの例のように、イベントを含むjQuery(内部)データオブジェクトが得られます。悲しいことに、Chromeは関数をクリックできませんが、ソースを見てみましょう:
_<Broken Screenshot link>
_
.live()
イベントに関する注意:ライブイベントは$._data( document, "events" )
に保存され、関数を指すorigHandler
が含まれます。
_<Broken screenshot link>
_
あなたが求めているインターフェイスを考えると、FireQueryが必要になると思います。 http://firequery.binaryage.com/
これは、Firebugアドオンspecificallyのような領域(jQuery固有のアドオン、データ/イベントに強い)です。
FireQueryは最も便利ですが、手動で行う必要がある場合は、$(element).data('events').click[0].handler
を使用してクリック処理関数への参照を取得できます(もちろん、複数のクリックハンドラーがある場合は必ずしも0ではありません)。そこから、コード内でその関数を見つけるのは、お気に入りのデバッガーまでです。 (名前付き関数を使用すると役立ちます。Firebugは匿名関数を見つけることができますが、多くの場合そうではありません。マウスでその上にカーソルを合わせると、関数の本体が表示されます。)
更新これは、FireQueryでのデータの表示方法です。
HTMLビュー:
コンソール:
Eventbugは、要素のイベントハンドラーすべてを表示します http://getfirebug.com/releases/eventbug ですが、ハンドラーは一般的なコードです。