Firefoxの「要素を調査」ツールでWebサイトの仕組みを調べる方法

お気に入りのWebサイトがどのような構造で作られているのか、気になったことはありませんか?ブラウザに搭載されている「要素の検査(Inspect)」機能は、そんな疑問に答えてくれる隠れた強力なツールです。Chromeの「検証」ツールについてはすでに紹介しましたが、実はFirefoxにも同様の機能が標準で備わっています。

Firefoxの「要素を調査(Inspect Element)」ツールを使えば、サイトが動作する仕組みの裏側を詳しく調べられます。具体的には、HTMLやCSSの構成要素、ネットワークへの負荷、各要素の読み込みにかかる遅延時間、Cookieなどストレージに保存されるファイルまで幅広く確認可能です。

経験豊富な開発者にとっては目新しい内容はないかもしれませんが、初心者や普段のWebユーザーにとっては、Firefoxの知られざる一面と、インターネット上のあらゆるサイトの裏側にあるファイルや処理の深い世界を発見できるはずです。

インストール

すでにFirefoxを使っているなら、追加の準備は一切不要です。これから使い始めたい場合は、Windows、Linux、Mac、iOS、Androidのいずれでも公式サイトから最新版をダウンロードできます。ダウンロードしたファイルをダブルクリック(スマートフォンの場合はタップ)して、通常どおりインストールしましょう。

主要なLinuxディストリビューションには、Firefoxがプリインストールされているか、ソフトウェアセンターやパッケージリポジトリから簡単に導入できるようになっています。

「要素を調査」の開き方

Firefoxをインストールしたら、Webページ上の任意の要素を右クリックするだけでインスペクターを呼び出せます。下の画像のようなドロップダウンメニューが表示され、リストの下部あたりに「要素を調査(Inspect Element)」という項目があります。

インスペクター

「要素を調査」をクリックすると、画面下部にインスペクターが即座に開きます。ここで少し名前が紛らわしく感じるかもしれませんが、厳密にはインスペクターの中にある「インスペクター」機能が起動したことになります。

いずれにしても、クリックした要素がツールの中央に表示され、その要素にマウスカーソルを合わせると(下のスクリーンショットでは<div>タグにホバーしています)、Webページ上の該当する視覚的要素がハイライト表示されます。

この機能のおかげで、今どの要素を見ているのかひと目で把握できます。また、各要素のプロパティも簡単に確認可能です。「インスペクター」の右側パネルには、その<div>タグ固有の設定として、マージン、パディング、ボーダー、フォントサイズ、垂直方向の配置などが表示されています。

右側パネルをスクロールすれば、他の要素から継承されたプロパティも確認できます。さらに、このウィンドウ内でプロパティ値を書き換えると、その変更がリアルタイムでWebページに反映される点も見逃せません。

スタイルエディター

CSS(カスケーディングスタイルシート)の世界へさらに踏み込むには、インスペクター上部のツールバーを活用します。「スタイルエディター」をクリックすると、画面下部に新しいパネルが3つ並んだ画面が開きます。

ここでは、DuckDuckGoが使用している2つのスタイルシートファイル、選択中のスタイルシートの構成要素、そしてレスポンシブデザイン(大小さまざまな画面サイズへの対応)を制御する「@media」ルールを確認できます。

スタイルシートは「インスペクター」と同じように直接編集できます。この例では選択肢が非常に多く、最初のスタイルシートだけでも1262個ものルールが含まれています。

さらにツールバーの「ネットワークモニター」に進むと、サイトがファイルを要求した記録とそのステータスを一覧できます。画像やフォントなどの要素もこのタブに表示され、リクエスト処理後のすべての通信と各ファイルのサイズをチェック可能です。

パフォーマンス

「パフォーマンス」タブを開いたら、「パフォーマンス計測を開始」ボタンをクリックして情報収集を始めます。数秒待つだけで、ページのフレームレート(FPS)、発生したDOM(ドキュメントオブジェクトモデル)イベント、スタイル再計算、そしてそれらの読み込みにかかった時間(通常はミリ秒単位)が判明します。

このサイトの場合、ハイライトされたDOMイベント(mouseover)の処理には6.03ミリ秒かかりました。ページの平均FPSは約39です。また、応答時間のグラフでは、一部のイベントで9000ミリ秒に達している箇所も確認できました。

メモリー

「メモリー」タブでも同様に「スナップショットの取得」ボタンを押して情報を集めます。筆者の環境では、文字列が約600KB、オブジェクトが1MB、スクリプトが1MBほどメモリーに読み込まれていることがマップ形式で可視化されました。スクリーンショットのように「ツリーマップ」と表示されたドロップダウンメニューをクリックすれば、同じデータを複数の表示形式で切り替えて確認できます。

ストレージ

最後に「ストレージ」タブをクリックすると、Webサイトがコンピューターに保存した永続的なファイルを確認できます。多くのユーザーにとって特に関係が深いのはCookieでしょう。下の画像にも1件のCookieが読み込まれている様子が見えます。

右側パネルを見ると、このCookieの有効期限は10年近く先に設定されており、筆者がこの記事を執筆していたセッション中にアクセスされたことがわかります。

まとめ

Firefoxのインスペクターには、掘り下げるべき機能がたくさんあります。今回紹介した各機能を試すだけでも、しばらく飽きずに探索できるはずです。

時間をかけてサイトのHTML要素を書き換えてみたり、複数のWebサイトの読み込み時間を比較したり、特定のページが自分のマシンに保存しようとするCookieの数を調べてみましょう。時には、その情報に思わず考えさせられることもあるかもしれません。

この探求の旅が、Webサイトが期待どおりに動作するために何をしているのかへの理解を深めるきっかけになれば幸いです。その裏側は、想像以上に奥深い世界かもしれませんよ。