web-dev-qa-db-ja.com

Chrome-方法は?

Webサイトに100〜200個のJavaScript関数をロードしています。 Google Chromeでアイテムをクリックしたときに実行されるjavascript関数を確認したい。 Chrome Web開発者ツールでどうすればいいですか?ありがとう!

69
Pave

1つの簡単なアプローチは、Chrome Developer Toolsを起動し、[ソース]パネルに切り替えてF8(実行の一時停止)。これは、最初に実行されたJavaScriptステートメントで中断します。

別のアプローチは、マウスダウンまたはクリックのイベントリスナーブレークポイントを設定することです。同じ[ソース]パネルで、右側のサイドバーの[イベントリスナーブレークポイント]を展開します。 「マウス」項目を展開し、ブレークするイベントを確認します(「クリック」、「マウスダウン」など)。次に、ページをクリックして、DevToolsでJS実行の中断を確認します。楽しい!

77

実行を一時停止する代替手段(通常はうまく機能しますが、定期的なコードを頻繁に実行するページではうまく機能しません)

Chromeのプロファイラーを使用して、短時間記録することができます。記録が終了すると、記録中に実行された機能のいずれかで費やされたCPU時間の概要が表示されます。 CPU時間はあまり気にせず、どのツールが実行されたかを表示するため、このツールを使用するだけでした。

基本的には記録を開始するだけです:

chrome profiler start button

次に、アクションを実行します(たとえば、Webページ上のボタンをクリックするか、興味深いコードを実行するような操作を行います)。次に、記録を停止して結果を表示します。

profiler result summary

「トップダウン」表示モードを使用していることに注意してください-コールスタックが表示され、最終的にどの関数が呼び出されたかを確認するためにドリルダウンできます。たとえば、いくつかの匿名関数が最初に呼び出され(おそらくsetTimeoutまたはおそらくクリックイベントハンドラーの結果として)、それからs.track.s.tで識別されるメソッドを呼び出し、次にs_doPluginsなどを呼び出します。重要なことは、トップダウンモードでは、ツリーの最上部のエントリが呼び出しスタックの開始を形成するため、通常はタイマー関数によって登録された関数であるということです(setTimeoutsetIntervalrequestAnimationFrameなど...)またはいくつかのイベントハンドラー(clickmousemoveloadなど...)。

「チャート」表示モードを使用することもできます。このモードでは、どの関数がいつ呼び出されたかをチャートに左から右にプロットして表示します。おそらく、記録内でコードが実行された時間の感覚があるため(たとえば、真ん中)、これは本当に探している機能を識別するのに役立ちます。

ところで-他の最新のブラウザのほとんどは同様の機能を持っていると思います。

24
goat

Google Chromeでアイテムをクリックしたときに実行されるjavascript関数を確認したい。

Visual Event と呼ばれるすばらしい拡張機能があり、まさにそれを実現します。一般的なjsライブラリ(jQuery、YUI、MooTools、Prototype、Glow)およびDOM Level 0イベントを介して設定されたイベントハンドラーのみを認識します。

14