FirefoxでWebページのソースコードを表示する方法｜HTMLの確認・ショートカット・開発者ツールとの違いを解説

Firefoxには、表示しているWebページのソースコードを確認する機能が標準で搭載されています。特別な拡張機能や外部ソフトをインストールしなくても、ページのHTMLソースを簡単に表示できます。

さらにFirefoxには、単純にHTMLソースを読むための「ページのソースを表示」と、現在ブラウザ上に構築されているHTMLやCSSを調査・編集できる「開発者ツール」があります。Web制作やプログラミングを学ぶ場合は、この2つの違いを理解して使い分けると便利です。

ここではFirefoxでWebページのソースコードを表示する方法を中心に、ショートカットキー、view-source:の使い方、開発者ツールとの違いまで分かりやすく解説します。

FirefoxにはWebページのソースコード表示機能がある

Firefoxには、WebページのHTMLソースを表示する「ページのソースを表示」機能があります。Mozillaの開発者向けドキュメントでも、Firefoxのページソース表示機能とショートカットが案内されています。[参照] Mozilla「View Source」

Webページを開いた状態でこの機能を実行すると、HTMLがシンタックスハイライトされた状態で表示されます。HTMLタグや属性などが色分けされるため、通常のテキストとして読むより構造を把握しやすくなっています。

例えばWeb制作を勉強していて「このページではtitleタグがどのように書かれているのだろう」と確認したい場合、ページソースを表示して<title>を検索できます。

ショートカットキーならすぐにソースを表示できる

Firefoxで素早くページソースを確認するなら、キーボードショートカットが便利です。WindowsとLinuxではCtrl＋U、macOSではCommand＋Uで現在のページのソースを表示できます。[参照] Mozilla Firefox Source Docs

例えばWindowsでWebサイトを閲覧中にCtrlキーを押しながらUキーを押すと、現在表示しているページのソースが開きます。HTMLを確認するだけなら、開発者ツールを起動するより手軽です。

Firefoxだけでなく複数のデスクトップ向けブラウザでCtrl＋Uがページソース表示に使われているため、Web制作をする人なら覚えておくと便利なショートカットです。

右クリックから「ページのソースを表示」を選ぶ方法もある

ショートカットキーを覚えていなくても、Firefoxではページ上のコンテキストメニューからソースを表示できます。ページ上の何もない場所などで右クリックし、「ページのソースを表示」を選択します。

ただし、Webサイトによっては独自の右クリック処理が設定されていることがあります。また画像やリンクなど、右クリックした場所によってメニューの内容が異なる場合があります。そのようなときはCtrl＋Uを利用するほうが簡単です。

ソース表示機能はFirefox本体に標準搭載されているため、「HTMLを見るためのアドオン」を別途インストールする必要はありません。

アドレスの先頭にview-source:を付ける方法もある

Firefoxでは、URLの前にview-source:を付けてページソースを開く方法もあります。Mozillaのドキュメントでもこの方法が案内されています。[参照] Mozilla「View Source」

例えば「https://example.com/」のソースを確認したい場合は、アドレスバーへ「view-source:https://example.com/」という形で入力します。

ショートカットが使いにくい環境や、特定URLのソースを直接開きたい場合には便利な方法です。

ソース画面では文字列検索もできる

大規模なWebページではHTMLが何千行にもなることがあり、目視だけで目的のコードを探すのは大変です。その場合はソース画面で検索機能を利用できます。

WindowsやLinuxではCtrl＋F、macOSではCommand＋Fを押して、探したい文字列を入力します。

例えばページのSEO情報を調べたいなら「description」、CSSファイルを探したいなら「stylesheet」、特定の画像を探したいならファイル名などを検索できます。HTMLを最初から最後まで読む必要はありません。

「ページのソース」と「開発者ツールのHTML」は同じではない

Firefoxを使ううえで特に重要なのが、ページのソースを表示したときのHTMLと、開発者ツールの「インスペクター」に表示されるHTMLは必ずしも同じではないという点です。

ページソース表示は、基本的にサーバーから取得したHTMLソースを確認するための機能です。一方、Webページでは読み込み後にJavaScriptが動き、HTML要素が追加・削除・変更されることがあります。

開発者ツールのインスペクターでは、Firefoxが現在ページとして構築しているDOMを調べられます。Mozillaもインスペクターについて、ページのHTMLとCSSを調査・変更するためのツールとして説明しています。[参照] Mozilla「Page Inspector」

JavaScriptで後から表示された内容はインスペクターで確認する

最近のWebサイトでは、ページを読み込んだ後にJavaScriptによってコンテンツを生成する仕組みが広く使われています。その場合、Ctrl＋Uで開いたソースには目的の文章やHTML要素が存在しないことがあります。

例えば最初のHTMLには空の要素だけがあり、ページ読み込み後にJavaScriptが商品一覧を追加するサイトでは、ページソースだけを検索しても画面上の商品名が見つからないことがあります。

このような場合はFirefoxの開発者ツールを開き、「インスペクター」で現在のDOMを確認します。「画面には表示されているのにページソースに見つからない」という場合は、JavaScriptによる動的生成を疑うとよいでしょう。

Firefoxの開発者ツールを開く方法

FirefoxにはWeb開発者向けのツールが標準搭載されています。WindowsとLinuxではCtrl＋Shift＋I、macOSではCommand＋Option＋Iで開発者ツールを開けます。[参照] Mozilla「Keyboard shortcuts」

また、Webページ上の特定部分を右クリックして「調査」を選択すると、インスペクターが起動し、その要素に対応するHTML付近を直接表示できます。

例えばWebページの見出しを右クリックして「調査」を選べば、その見出しが<h2>なのか<h3>なのか、どのclassが設定されているのか、どのCSSが適用されているのかを調べられます。

目的によってページソースとインスペクターを使い分ける

どちらを使えばよいか分からない場合は、確認したい内容で判断すると分かりやすくなります。

単純に「このWebページのHTMLソースを見たい」という目的ならCtrl＋Uで十分です。一方、Webデザインや表示崩れの原因を調べるならインスペクターのほうが便利です。

ソースコードを表示してもサーバー側のプログラムは見えない

ページソースを表示するとWebサイトのプログラムをすべて見られると思われることがありますが、実際にはそうではありません。Firefoxで確認できるのは、ブラウザへ送られてきたHTML、JavaScript、CSSなどのクライアント側の情報です。

例えばWebサイトがPHPで作られていても、サーバー上のPHPプログラムそのものがブラウザへ送信されるわけではありません。サーバーがPHPを実行した結果として生成されたHTMLがFirefoxへ届くため、通常のページソースにはPHPの処理内容は表示されません。

WordPressについても同様です。テーマがPHPでHTMLを生成していても、一般の閲覧者がFirefoxの「ページのソースを表示」からテーマのPHPファイルそのものを読むことは通常できません。

パスワードや非公開データまでソースから見えるわけではない

ページソース表示はハッキング機能ではありません。Webページを正常に表示するため、すでに利用者のブラウザへ送られている情報を確認するための機能です。

サーバー内のデータベース、ほかの利用者のパスワード、非公開のサーバープログラムなどが、Ctrl＋Uを押しただけで表示されることは通常ありません。

ただしWebサイトの制作者が、本来秘密にすべき情報をHTMLやJavaScriptへ直接書いてブラウザへ送信してしまえば、その情報は閲覧者から確認できる可能性があります。そのためWeb開発では、APIの秘密鍵やパスワードなどをクライアント側コードへ埋め込まないことが重要です。

CSSやJavaScriptの内容もFirefoxから確認できる

ページソース内には、CSSやJavaScriptファイルへのリンクが記述されていることがあります。Firefoxのソース表示では、こうしたファイルへのリンクをクリックして内容を確認できる場合があります。

より詳しく調べたい場合は開発者ツールが便利です。Firefoxにはインスペクターだけでなく、コンソール、デバッガー、ネットワークモニター、ストレージインスペクターなど複数の開発ツールがあります。[参照] Mozilla「Firefox Developer Tools」

例えば「ボタンをクリックしたとき、どのJavaScriptが動いているのか」を調査するならデバッガー、「ページ読み込み時にどの画像やAPIへアクセスしているのか」を調べるならネットワークモニターというように使い分けられます。

ソースを見てHTML・CSSを勉強することもできる

Firefoxのソース表示やインスペクターは、Web制作の学習にも役立ちます。実際のWebページを見ながら「この見出しはどんなHTMLなのか」「この余白はどのCSSで設定されているのか」と調べられるからです。

例えば自分で作ったWebページのボタンが意図した色にならない場合、インスペクターでボタンを選択すると、適用されているCSSや上書きされたCSSを確認できます。

ただし、他人のWebサイトのHTML・CSS・JavaScriptがブラウザから閲覧できることと、それらを自由にコピーして自分のサイトで再利用できることは別問題です。デザイン、画像、文章、プログラムなどには著作権やライセンスが関係する場合があるため、学習・調査と転載・再利用は分けて考える必要があります。

ソースが表示できないときに確認したいこと

Ctrl＋Uを押しても期待どおりに表示されない場合は、まずキーボードショートカットが別のアプリや機能に割り当てられていないか確認します。Firefoxのアドレスバーへ「view-source:」を付けたURLを入力する方法も試せます。

また、「ソースは開いたものの探している文字がない」という場合は、ソース表示機能の故障とは限りません。JavaScriptで読み込み後に生成された内容なら、元のHTMLソースには存在しないことがあります。

その場合は対象部分を右クリックして「調査」を選び、インスペクターでDOMを確認します。Webページの仕組みを調べる際は、ページソースと開発者ツールの両方を使えるようになると原因を切り分けやすくなります。

まとめ｜Firefoxは標準機能だけでWebページのソースコードを表示できる

FirefoxにはWebページのソースコードを表示する機能が標準搭載されています。Windows・LinuxならCtrl＋U、macOSならCommand＋Uを押すだけで、現在表示しているページのHTMLソースを確認できます。

またURLの先頭に「view-source:」を付けて開く方法や、ページのコンテキストメニューからソースを表示する方法もあります。単純にHTMLを読みたい場合には、追加の拡張機能は必要ありません。

一方、JavaScript実行後のHTML構造や適用されているCSSを確認したい場合は、「ページのソースを表示」ではなくFirefoxの開発者ツールにあるインスペクターを使います。画面上の要素を右クリックして「調査」を選択すれば、該当するHTMLとCSSをすぐに確認できます。

取得したHTMLそのものを見るなら「ページのソースを表示」、現在画面上に存在する要素やCSSを詳しく調べるなら「開発者ツール」と覚えておくと分かりやすいでしょう。FirefoxはWebページを見るだけでなく、HTML・CSS・JavaScriptを学習したりWebサイトの表示を調査したりする用途にも便利なブラウザです。