最近、記事の議論で、
ブラウザスケールは、IEがそれほど悲惨ではなく、すべての自尊心のあるWeb開発者が自分のコンピューターに配置する必要があるという事実について話しました。レイアウトがそこに移動したかどうかを確認するだけでなく、IE用に作成されたため、JSのデバッグとプロファイリングのための現時点で最高のツールだと思います。
そのようなツールの1つがdynaTrace Ajaxで、
こちらからダウンロードでき
ます 。
dynaTraceとは何ですか？ これは、ページの読み込みを高度にプロファイリングするための強力なツールです。読み込み中にページで発生したすべてを記録し、詳細なレポートを提供します。
レポートから取得できるデータをさらに詳しく考えてみましょう。 これを行うには、dynaTraceを実行し、[トレースの開始]をクリックして、たとえばhabrahabrに移動します。
ページを読み込んだ後、詳細なレポートを見る機会があります。
まとめ
概要タブには何が表示されますか？
まず、サーバーからページをロードすることに関するデータ：何にどれだけの時間を費やし、どのファイルをサーバーからダウンロードし、どのファイルをキャッシュから取得したか：
次に、JSに費やされた時間と、この時間に費やされた操作の種類を確認できます。
図から、ハブはmootools JSフレームワークを使用しており、作業の大部分は内部で行われ、呼び出しはスクリプトから行われ、Loadイベントで何もハングしていないことがわかります。
たとえば、Yandexでより興味深い画像を取得できます。
また、概要タブにはタイムラインが表示されます。
ページの読み込み中のプロセッサのアクティビティ、JS、ページレンダリング、およびネットワークアクティビティに費やされた時間を表示します。 下部のイベント行には、ページで発生したイベントが表示されます。 タイムラインブロックにカーソルを合わせると、そこで何が起こったのかがより詳細に表示されます。
ご覧のとおり、Loadイベントはページの読み込みが開始されてから45秒後に発生しました。これは、一部の画像が42秒間読み込まれたためです。 これは、ロードでハングするものがないため、Habrにとっては怖いことではありませんが、ロードイベントでハンドラーをハングさせる他のプロジェクトでは、このタイムラインは、ブラウザーがロードイベントを発生させないボトルネックを確認するのに役立ちます。
[概要]タブの図はすべてクリック可能です。図の一部をダブルクリックすると、フィルターがインストールされた別のタブが表示されます。 たとえば、ページ上のキャッシュされたアイテムとキャッシュされていないアイテムの比率を表示するチャートをダブルクリックすると、フィルターがオンになった[ネットワーク]タブが表示され、キャッシュされたアイテムのみが表示されます。
ネットワーク
[ネットワーク]タブには、ページの読み込み中にネットワークから読み込まれたすべてをリストするテーブルがあります。 テーブルの行を選択すると、ヘッダーとダウンロードされた実際のコンテンツが下部のウィンドウに表示されます。
この表は、ダウンロード時間とTimeChartを示しています。
テーブル内のデータはフィルタリングできます。
純粋なパス
[純粋なパス]タブには、ページのレンダリングやJavaScriptの解析にかかった時間など、ページで発生したアクティビティの履歴全体が表示されます。
たとえば、上の表ではYaメトリックの行を選択し、中央の表では関数呼び出しのツリーを取得します：呼び出された関数、それらの解析と実行に費やされた時間、彼らがアクセスしたDOMメソッド。
ツリーブランチの1つを選択すると、左下のテーブルにこのブランチで呼び出されたすべての関数とその実行時間が表示され、右下のテーブルに呼び出された関数のコードが表示されます。
このツールは、javascriptを遅くする機能を見つけるのに役立ちます。
ホットスポット
最後のタブは[ホットスポット]タブです。
このタブには、最も時間のかかる関数の呼び出しが表示されます。これにより、ボトルネックを特定し、JSコードを最適化できます。
それが全体の話です:)
このツールは非常に強力であり、私の意見では、Windowsで働く自尊心のあるJS開発者には必須のツールです。