Google Closure JavaScript ライブラリを独学しようとしています。TreeControl UI ウィジェットを調べています。
下のデモで [Cut] ボタンをクリックしたときに実行される関数を Chrome コンソールを使用して分析するにはどうすればよいですか? たとえば、どうにかしてブレークポイントを設定できますか? ソースを見ていろいろ調べてみましたが、Chrome Console の方が体系的な方法を提供してくれるのではないかと思います。
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
デバッガー領域の右側にある「イベント リスナー ブレークポイント」セクションを探しているかもしれません。それを開き、「マウス」の下のクリックイベントを選択します。画面イメージを参照してください。次に、アプリのボタンをクリックすると、実行中のコードがすぐに表示されます。
Chrome 開発者ツール ウィンドウを開いた状態で、[ソース] タブをクリックします。何も表示されない場合は、そのタブの左上隅にある [ナビゲーターを表示] ボタンをクリックする必要がある場合があります。ナビゲーターを開いた状態で、cut()関数が定義されているファイルに移動します (この場合は ですdemo.html)。ファイルを表示したら、cut()関数が定義されている行を見つけ、その関数内の最初の行にブレークポイントを設定します。左側の行番号をクリックすると、ブレークポイントを設定できます。
ブレークポイントを設定したら、ページでcut()関数をトリガーする何かを実行すると、ブラウザーは関数に入るとすぐにスクリプトの実行を中断する必要がありcut()ます (ブレークポイントが関数内の最初の行にあると仮定しますcut())。この時点から、タブの右上にあるコントロールを使用して、コードをステップ イン/アウト/アラウンドし、何が起こっているかを確認できます。
これが私のスクリーンショットです：http://d.pr/i/f6BO
また、ブレークポイントの設定など、Chrome 開発ツールの使用について説明しているすばらしいビデオがあります: http://www.youtube.com/watch?v=nOEw9iiopwI
あなたが探しているものは「プロファイリング」と呼ばれています。
それは次の方法で達成できます。
これは、一部の人々にとって役立つ場合があります。
要素タブで要素を右クリックし、「break on」を使用して、サブ要素の変更などで中断できます。https://developer.chrome.com/devtools/docs/javascript-debugging