70

Google Closure JavaScript ライブラリを独学しようとしています。TreeControl UI ウィジェットを調べています。

下のデモで [Cut] ボタンをクリックしたときに実行される関数を Chrome コンソールを使用して分析するにはどうすればよいですか? たとえば、どうにかしてブレークポイントを設定できますか? ソースを見ていろいろ調べてみましたが、Chrome Console の方が体系的な方法を提供してくれるのではないかと思います。

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

4

4 に答える 4

122

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

ここに画像の説明を入力

于 2012-06-13T04:42:09.020 に答える
34

Chrome 開発者ツール ウィンドウを開いた状態で、[ソース] タブをクリックします。何も表示されない場合は、そのタブの左上隅にある [ナビゲーターを表示] ボタンをクリックする必要がある場合があります。ナビゲーターを開いた状態で、cut()関数が定義されているファイルに移動します (この場合は ですdemo.html)。ファイルを表示したら、cut()関数が定義されている行を見つけ、その関数内の最初の行にブレークポイントを設定します。左側の行番号をクリックすると、ブレークポイントを設定できます。

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

これが私のスクリーンショットです:http://d.pr/i/f6BO

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

于 2012-06-13T04:38:47.297 に答える
16

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

それは次の方法で達成できます。

  1. プロファイルに移動
  2. 最初のオプションを選択します (「JavaScript CPU プロファイルを収集する」)
  3. 「カット」ボタンを押す前に開始してください
于 2012-06-13T04:39:34.180 に答える
5

これは、一部の人々にとって役立つ場合があります。

要素タブで要素を右クリックし、「break on」を使用して、サブ要素の変更などで中断できます。https://developer.chrome.com/devtools/docs/javascript-debugging

于 2014-09-05T09:48:37.890 に答える