読んでいるWebページは、とりわけソースコードで構成されています。 それはあなたのWebブラウザがダウンロードしている情報で、あなたが現在読んでいるものに変換されます。
ほとんどのWebブラウザでは、現在使用しているデバイスの種類に関係なく、追加のソフトウェアを必要とせずにWebページのソースコードを表示することができます。
中には高度な機能や構造を提供するものもあり、ページ上でHTMLや他のプログラミングコードを見やすくすることができます。
なぜソースコードを見たいのですか？
ページのソースコードを表示する理由はいくつかあります。 あなたがウェブ開発者であれば、別のプログラマーの特定のスタイルや実装でカバーを覗いてみてください。 たぶんあなたは品質保証をしており、ウェブページの特定の部分がレンダリングされているかどうか、またはそれがどういうふうに動作しているのかを確かめようとしています。
また、自分のページをコーディングする方法を学び、実際の例を探している初心者かもしれません。 もちろん、あなたはこれらのカテゴリのいずれにも属さず、ただの好奇心からソースを見たいと思うかもしれません。
以下に、選択したブラウザでソースコードを表示する方法を示します。
グーグルクローム
実行中：Chrome OS、Linux、macOS、Windows
Chromeのデスクトップ版では、次のキーボードショートカットを使用して、ページのソースコードを表示するための3つの異なる方法が提供されています。Ctrl + U （MacOSではCOMMAND + OPTION + U ）
このショートカットを押すと、アクティブなページのHTMLやその他のコードを表示する新しいブラウザタブが開きます。 このソースは色分けされており、あなたが探しているものをコンパクトにして見つけることが簡単にできます。 また、ウェブページのURLの左側に追加されたChromeのアドレスバーに次のテキストを入力し 、 Enterキーを押すことで表示することもできます。view-source：（つまり、view-source：https：// www ）。
3つ目の方法は、Chromeの開発ツールを使用する方法です。このツールを使用すると、ページのコードをさらに深く理解し、テストや開発のためにオンザフライで調整することができます。 このキーボードショートカットを使用して、開発者ツールのインターフェイスを開いたり閉じたりすることができます： CTRL + SHIFT + I （macOSではCOMMAND + OPTION + I ） また、次のような方法で起動することもできます。
- 右上にあるChromeのメインメニューボタンをクリックし、縦に3つ並んだ点で表示します。
- プルダウンメニューが表示されたら、[ その他のツール ]オプションにマウスカーソルを合わせます。
- サブメニューが表示されたら、[ 開発ツール ]をクリックします 。
アンドロイド
Android用ChromeでWebページのソースを表示するのは、アドレス（またはURL）の前に次のテキストを追加して送信するだけです。view-source ：。 この例は、 view-sourceです。https：// www。 。 問題のページのHTMLやその他のコードは、アクティブなウィンドウに即座に表示されます。
iOS
iPad、iPhone、またはiPod touch上でChromeを使用してソースコードを表示する方法はありませんが、最も簡単で効果的なのは、ソース表示アプリなどのサードパーティのソリューションを利用することです。
App Storeで$ 0.99で利用可能なView Sourceは、ページのURLを入力するよう促します（またはChromeのアドレスバーからコピー/貼り付けすることがありますが、これは最も単純なパスです）。 HTMLやその他のソースコードを表示するだけでなく、個々のページアセット、DOM（Document Object Model）、ページサイズ、 Cookie 、その他の興味深い詳細を表示するタブも備えています。
マイクロソフトエッジ
実行：Windows
Edgeブラウザを使用すると、 Developer Toolsインターフェイスを使用して、現在のページのソースコードを表示、分析、操作することさえできます。 この便利なツールセットにアクセスするには、 F12またはCTRL + Uのいずれかのキーボードショートカットを使用します。 代わりにマウスを使用する場合は、Edgeのメニューボタン（右上の3つの点）をクリックし、リストからF12 Developer Toolsオプションを選択します。
開発ツールが初めて実行された後、Edgeはブラウザのコンテキストメニュー（Webページ内のどこかを右クリックするとアクセス可能）に2つの追加オプションを追加します： 要素の 閲覧とソースの表示 、後者は開発者のデバッガ部分を開きますツールのインターフェイスにソースコードが入力されています。
Mozilla Firefox
実行先：Linux、macOS、Windows
デスクトップ版のFirefoxでページのソースコードを表示するには、キーボードのCtrl + U （MacOSではCOMMAND + U ）を押すと、アクティブなWebページのHTMLやその他のコードを含む新しいタブが開きます。
次のテキストをFirefoxのアドレスバーに直接入力すると、ページのURLの左側に表示され、同じソースが現在のタブに表示されます。view-source：（つまり、view-source：https：// www。 。
ページのソースコードにアクセスするもう1つの方法は、次の手順を実行してアクセス可能なFirefoxの開発ツールです。
- ブラウザウィンドウの右上にあるメインメニューボタンをクリックし、3本の水平線で表します。
- ポップアウトメニューが表示されたら、 開発者の 「レンチ」アイコンをクリックします。
- Web Developerのコンテキストメニューが表示されるはずです。 [ ページソース ]オプションを選択します。
Firefoxでは、ページの特定の部分のソースコードを表示することもできるため、問題を簡単に特定できます。 これを行うには、まずマウスで興味のある領域を強調表示します。 次に、右クリックし、ブラウザのコンテキストメニューから「選択ソースを表示」を選択します。
アンドロイド
FirefoxのAndroidバージョンでソースコードを表示するには、WebページのURLの先頭に次のテキストを付けます。view -source：。 たとえば、HTMLソースを表示するには、ブラウザのアドレスバーに次のテキストを送信します。view-source：https：// www。 。
iOS
あなたのiPad、iPhone、またはiPod touchでウェブページのソースコードを表示するには、App Storeで$ 0.99で利用可能なView Sourceアプリをお勧めします。 Firefoxに直接統合されているわけではありませんが、問題のページに関連付けられたHTMLやその他のコードを公開するために、ブラウザからアプリにURLを簡単にコピーして貼り付けることができます。
Apple Safari
iOSとmacOSで動作する
iOS
Safari for iOSには、デフォルトでページソースを表示する機能は含まれていませんが、ブラウザはView Sourceアプリとシームレスに統合されています.App Storeでは$ 0.99で利用できます。
このサードパーティ製アプリをインストールした後、Safariブラウザに戻り、画面の下部にある[共有]ボタンをタップし、正方形と上向きの矢印で表します。 iOS共有シートが表示され、Safariウィンドウの下半分がオーバーレイされます。 右にスクロールして[ソースの表示]ボタンを選択します。
アクティブなページのソースコードを色分けして構造化したものと、ページのアセット、スクリプトなどを表示するためのタブが表示されるようになりました。
マックOS
Safariのデスクトップ版でページのソースコードを表示するには、まず[ 開発 ]メニューを有効にする必要があります。 以下の手順では、この非表示のメニューをアクティブにして、ページのHTMLソースを表示します。
- 画面の上部にあるブラウザメニューのSafariをクリックします。
- ドロップダウンメニューが表示されたら、[ 環境設定]オプションを選択します。
- Safariの環境設定が表示されるはずです。 一番上の行の右端にある「 詳細」アイコンをクリックします。
- [詳細]セクションの下部には、 メニューバーの [ 現像の表示]メニューに空のチェックボックスが付いたオプションがあります。 このボックスを1回クリックするとチェックマークが表示され、左上隅にある赤色の 'x'をクリックすると環境設定ウィンドウが閉じます。
- 画面の上部にある[ 開発 ]メニューをクリックします。
- ドロップダウンメニューが表示されたら、[ ページソースを表示 ]を選択します。 COMMAND + OPTION + Uの代わりに、次のキーボードショートカットを使用することもできます。
オペラ
実行先：Linux、macOS、Windows
OperaブラウザでアクティブなWebページのソースコードを表示するには、次のキーボードショートカットを使用します。Ctrl + U （MacOSではCOMMAND + OPTION + U ） 現在のタブでソースを読み込む場合は、アドレスバー内のページのURLの左側に次のテキストを入力し、 Enterキーを押します。view -source：（つまり、view-source：https：// www。 ）。
Operaのデスクトップ版では、統合開発者ツールを使用して、HTMLソース、CSSなどの要素を表示することもできます。 このインターフェイスを起動するには、デフォルトでメインブラウザウィンドウの右側に表示されます。次のキーボードショートカットを押します： CTRL + SHIFT + I （ command + option + I on macOS）
Operaの開発者ツールセットには、以下の手順でアクセスすることもできます。
- ブラウザウィンドウの左上隅にあるOperaロゴをクリックします。
- プルダウンメニューが表示されたら、[ その他のツール ]オプションにマウスカーソルを合わせます。
- [ 開発者の表示]メニューをクリックします 。
- もう一度Operaロゴをクリックしてください。
- プルダウンメニューが表示されたら、カーソルを開発者の上に移動します。
- サブメニューが表示されたら、「 開発ツール」をクリックします 。
ビバルディ
Vivaldiブラウザ内でページソースを表示するには複数の方法があります。 最も簡単なのは、アクティブなページのコードを新しいタブに表示するCTRL + Uキーボードショートカットです。
現在のタブにソースコードを表示する、ページのURLの前に次のテキストを追加することもできます： view-source：。 この例は、 ビューソースです。http：// www。 。
別の方法は、ブラウザの統合開発者ツールを使用して、 Ctrl + Shift + Iの組み合わせを押すか、ブラウザのツールメニューの開発者ツールオプションを使用してアクセスできます。左上の「V」ロゴをクリックします。 開発ツールを使用すると、ページのソースをより詳細に分析できます。