ChromeでのJavascript実行のトラッキング - どのようにですか？

Question

〜100-200個のjavascript関数がWebサイトにロードされています。 Google Chromeでアイテムやアイテムをクリックしたときに実行されるjavascript関数を特定したいと考えています。 Chromeウェブデベロッパーツールでどうすればいいですか？ ありがとう！

Answer 1

簡単なアプローチの1つは、Chrome開発ツールを起動し、[ソース]パネルに切り替えてF8（実行を一時停止）を押すことです。これにより、最初に実行されたJavaScript文が破られます。

もう1つの方法は、マウスのダウンストリームにイベントリスナーのブレークポイントを設定することです。同じソースパネルで、右側のサイドバーにある「イベントリスナーブレークポイント」を展開します。 [マウス]アイテムを展開し、中断したいイベント（「クリック」、「マウス」など）を確認します。次に、あなたのページをクリックし、DevToolsでJS実行ブレークを見てください。楽しい！

Answer 2

Google Chromeで1つのアイテムをクリックしたときに実行されるjavascript機能を特定したいと考えています。

正確にはVisual Eventと呼ばれる大きな拡張があります。これは、一般的なjsライブラリ（jQuery、YUI、MooTools、Prototype、Glow）とDOMレベル0イベントを介して設定されたイベントハンドラのみを認識します。

Answer 3

（通常素晴らしい作品が、頻繁に定期的なコードを実行どのページにうまく動作しません）

あなたは時間の短い期間のために記録するために、Chromeのプロファイラを使用することができ、実行を一時停止する代わりに。録音が終了すると、録音中に実行された機能のいずれかに費やされたCPU時間の要約が表示されます。私たちは本当にCPU時間を気にせず、実行された関数が表示されるのでこのツールを使用していました。

基本的にはちょうど録画を開始：

その後、あなたの行動を行う（例えば、Webページ上のボタンをクリックするか、実行するための興味深いコードの原因になりますものは何でも）。その後、録音を停止し、その結果を表示：私は「トップダウン」鑑賞モード使用してい

お知らせ - あなたのコールスタックを示しており、あなたが最終的に呼ばれました関数を確認するためにドリルダウンすることができます。たとえば、いくつかの無名関数が最初に呼び出されました（おそらくsetTimeoutの結果、またはいくつかのクリックイベントハンドラの可能性があります）。s.track.s.tによって識別されたメソッドが呼び出され、s_doPluginsというように呼び出されました。重要なことは、ダウンモードでは、ツリーの最上部にあるエントリがコールスタックの開始を形成するので、通常はあるタイマー関数（setTimeout,、​​など）によって登録された関数であるか、または何らかのイベントハンドラ（click 、mousemove、loadなど）。

「チャート」表示モードを使用することもできます。これは、どの機能がいつ呼び出されたのかをチャート上に左から右にプロットしたものです。これは、あなたが本当に探している機能を特定するのに役立ちます。なぜなら、コードが録画内で何時に実行されたかの感覚を持っているからです（例えば、真ん中で）。

btw - 私はほとんどの他の最新のブラウザが同様の機能を持っていると信じています。