容チェック!IE9でページ容量の確認をしよう2

2013/03/17

こんにちわ。hosicameです。
昨日は気分転換に外で記事を書いてました。スタバでMac開いてドヤ〜やりました(笑)
家だとダラダラしてしまうのでカフェなどですると捗りますね!

Developer Toolbarを起動しよう

さて、前回の続きになります!
今回は実際にIE9での容量チェックの仕方を説明します。
使用するのは皆さんもご存知なDeveloper Toolbarです。
F12で起動するデバックバーや開発ツールと呼べるものですね。

まずはF12キーを押すか、メニューの「ツール」から「F12 開発ツール」を選択してください。
起動したら「ネットワーク」タブに切り替えて「キャプチャの開始」ボタンを押して下さい。

これで容量チェックできる状態なので、スーパーリロード Ctrl + F5(キャッシュを無効にしてリロードすること)しましょう。
そうすると、下部ウィンドウにページに関わるファイルのダウンロード状況が表示されます。
すべてのダウンロードが完了すると、一番下に全ファイルの容量が表示されています。
上の写真だと受信:0.55MBが表示したページの容量になります。

スマートフォンページの容量チェックのやり方

さて次はスマートフォン用のページの容量チェックのやり方です。
FirefoxやChromeと同様のやり方でユーザーエージェントを変更してSPページを表示します。
ただ、IE9にはスマートフォンのUAは登録されていないので、新しく追加する必要があります。

IE9のユーザーエージェントの追加方法

Developer Toolbarのメニューの「ツール」から「ユーザーエージェント文字列の変更」を選択して、サブメニューの一番下の「カスタム」を選択します。

そうすると、ダイアログが表示されるのでスマートフォンのUAを入力します。
ここでは試しにiOS6のUAを登録してみましょう。
名前にiOS6を入力して、ユーザーエージェントは下記をコピペしてください。

iOS6
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

設定」ボタンを選択すると、ダイアログが閉じてUAが切り替わります。
※変更できるUAの一覧に登録したiOS6が追加されています。

そしたら、PCの時と同様にスーパーリロードしてください。
これでSPページの容量チェックができます。

以上、PCとSPページの容量チェックのやり方でした。
他のブラウザよりも容量が大きくなるので、IEを基準とすれば自ずとモダンブラウザは気にする必要がなくなります。
ぜひ、業務や運営しているサイトで容量の確認が必要になったらIEで確認してみてください。

About me
hosicame
昭和61年生まれ。フロントエンドエンジニア。Autohotkey大好きな私がお送りします。

Recent Posts