web-dev-qa-db-ja.com

Chrome Consoleでボタンが押されたときにどの関数が呼び出されるかを調べるにはどうすればよいですか？

私は、Google Closure JavaScriptライブラリを自分で教えようとしています。 TreeControl UIウィジェットを調べています。

Chrome Consoleを使用して、以下のデモで[Cut]ボタンをクリックしたときに実行される機能を分析するにはどうすればよいですか？たとえば、何らかの方法でブレークポイントを設定できますか？ソースを見て回ってみましたが、Chrome Consoleはより体系的な方法を提供するかもしれません。

https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html

javascriptgoogle-chrome-devtoolsgoogle-closure-library
49
dangerChihuahua007

Chrome Developer Toolsウィンドウを開いた状態で、[Sources]タブをクリックします。何も表示されない場合は、左上隅にある[Show Navigator]ボタンをクリックする必要がありますナビゲータを開いた状態で、cut()関数が定義されているファイルに移動します（あなたの場合は_demo.html_です）。ファイルを表示したら、 cut()関数が定義され、その関数内の最初の行にブレークポイントを設定します左側の行番号をクリックして、ブレークポイントを設定できます。

ブレークポイントを設定したら、cut()関数をトリガーするページ上で何かを行うと、ブラウザーはcut()関数に入るとすぐにスクリプトの実行を中断します（ブレークポイントがcut()関数内の最初の行にあると仮定します）。この時点から、タブの右上にあるコントロールを使用して、コードをステップイン/アウト/アラウンドし、何が起こっているかを確認できます。

これを実行しているスクリーンショットを次に示します。 http://d.pr/i/f6BO

また、Chromeブレークポイントの設定を含む開発ツールの使用について説明している素晴らしいビデオもあります： http://www.youtube.com/watch?v=nOEw9iiopwI

24
Kai

デバッガー領域の右側にある「イベントリスナーブレークポイント」セクションを探している場合があります。それを開き、「マウス」の下のクリックイベントを選択します。画面イメージをご覧ください。次に、アプリのボタンをクリックすると、実行中のコードがすぐに表示されます。

enter image description here

95
user663031

あなたが探しているものは「プロファイリング」と呼ばれます。

以下によって達成できます。

  1. プロフィールに移動
  2. 最初のオプションを選択（「JavaScript CPUプロファイルを収集」）
  3. 「カット」ボタンを押す前に開始してください
13
Jackie Chan

これは一部の人々にとって役立つかもしれません：

要素タブで要素を右クリックし、「ブレークオン」を使用してブレークオンできます。サブ要素の変更。 https://developer.chrome.com/devtools/docs/javascript-debugging

3
timhc22