troushoo

IE11 のF12 開発者ツールを用いて、Web 表示時のボトルネックを調査する方法

IE11 のF12 開発者ツールを用いて、Web 読み込み時のボトルネックを簡単に調査する方法

概要

IE11 のF12 開発者ツールを用いて、Web 表示時のボトルネックを調査する方法を紹介します。

内容

以下、Web 表示の際、どこに一番時間がかかったか?を調査する際の手順を紹介します。

1. “ツール” → “F12 開発者ツール” をクリックします。
F12 開発者ツールを起動

2. IE の下部に”F12 開発者ツール” が起動するので、見やすさの為、F12 開発者ツール のピン留めを外します。
F12 開発者ツールのピン留めを外す

3. “UI の応答” をクリックします。
UI の応答

4. “プロファイリングを開始してパフォーマンス セッションを開始します” をクリックします。
プロファイリングを開始してパフォーマンス セッションを開始します

5. Web ページを読み込みます。

6. Web ページの読み込みが終わったら、”プロファイリングを停止してレポートを作成します” をクリックします。
プロファイリングを停止してレポートを作成します

7. プロファイリングの結果が表示されます。
プロファイリングの結果

8. “並び替え” の部分を”継続時間(包括)” にします。
すると、”タイムラインの詳細” に、Web ページ読み込みの際に時間がかかったものから表示されます。
今回の例では、”スクリプトの評価” が一番時間がかかったという事がわかります。
ボトルネックがわかる

このように、F12 開発者ツールを用いて、Web 表示時のボトルネックを調査する事ができます。

[補足]
“スクリプト URL”の部分をクリックすると、デバッガーが起動し、該当スクリプトのソースコードを確認することもできます。
スクリプト URL をクリック
ソースコードが表示される


情報元
Developing High Performance Websites and Modern Apps with JavaScript Performance Tools (英語)

関連記事
Windows アセスメント サービス を利用してパフォーマンス測定・問題の検出
  1. 2014/02/15(土) 23:15:28|
  2. ツール
  3. | トラックバック:0
  4. | コメント:0
<<Wireshark のパケットキャプチャーから、HTTP オブジェクトを取り出す2つの方法 | ホーム | Process Monitor 解析時のTips :作者のMark Russinovich 氏のセッションより>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://troushoo.blog.fc2.com/tb.php/156-3a516a3f
この記事にトラックバックする(FC2ブログユーザー)

スポンサーリンク

最新記事

月別アーカイブ

カテゴリ

ツール (92)
ネットワーク (76)
Visual Studio (56)
SOS・Psscor2/Psscor4 (25)
WinDbg (25)
Linux (22)
Azure (17)
Tips (20)
英語 (1)
About Me (1)
未分類 (0)

全記事表示リンク

全ての記事を表示する

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する