コードが大きくてよくわからない場合、1 つのオプションはプロファイラーを使用することです。
Chrome devtools には「プロファイル」タブがあり、Firefox devtools には「パフォーマンス」タブがあります。これらの各ツールは、記録を開始して待機し (またはスクリプトの実行につながるとわかっているアクションをページで実行し)、記録を停止するという点でほとんど同じように動作します。
中央のパネルには、その期間に実行されたすべてのスクリプトのコール ツリーが列とともに表示され、時間がかかった原因について詳しく説明されるはずです。その呼び出しツリーを使用して、ドリルダウンして正確に実行されたものを発見し、そこからスクリプト内の実際の行にジャンプできます。
こちらが chrome devtools プロファイラーのドキュメント ページで、こちらが firefox devtools の対応するページです。
firefox devtools を使用するもう 1 つのオプションは、トレーサーです。トレーサーは、javascript レベルで発生したすべてを記録するツールです。どの関数が呼び出され、どの引数が渡され、どの値が返され、どの関数がそれらを実行し、次に呼び出されたか、...
それをチェックアウトするには:
- about:config を firefox で開き、pref "devtools.debugger.tracer" を true に切り替えます。
- 次に、devtools を開き、デバッガー パネルに切り替えます。
- 次に、一時停止/ステップ オーバー/ステップ イン/ステップ アウト ボタンの横にある二重矢印アイコンをクリックします。
- これにより、トレースが開始され、サイド バーが「トレース」パネルに切り替わります。
- もう一度クリックすると、記録が終了します。
実行されたもののトレースが表示されるはずです。トレース内の任意のエントリをクリックすると、関連するスクリプトが表示され、サイドバーに引数と戻り値が表示されます。