読んでいるWebページは、とりわけソースコードで構成されています。それはあなたのWebブラウザがダウンロードしている情報で、あなたが現在読んでいるものに変換されます。
ほとんどのWebブラウザでは、現在使用しているデバイスの種類に関係なく、追加のソフトウェアを必要とせずにWebページのソースコードを表示することができます。
中には高度な機能や構造を提供するものもあり、ページ上でHTMLや他のプログラミングコードを見やすくすることができます。
なぜソースコードを見たいのですか？
ページのソースコードを表示する理由はいくつかあります。あなたがウェブ開発者であれば、別のプログラマーの特定のスタイルや実装でカバーを覗いてみてください。たぶんあなたは品質保証をしており、ウェブページの特定の部分がレンダリングされているかどうか、またはそれがどういうふうに動作しているのかを確かめようとしています。
また、自分のページをコーディングする方法を学び、実際の例を探している初心者かもしれません。もちろん、あなたはこれらのカテゴリのいずれにも属さず、ただの好奇心からソースを見たいと思うかもしれません。
以下に、選択したブラウザでソースコードを表示する方法を示します。
グーグルクローム
実行中：Chrome OS、Linux、macOS、Windows
Chromeのデスクトップ版では、次のキーボードショートカットを使用して、ページのソースコードを表示する3つの異なる方法が提供されています。 CTRL + U (COMMAND + OPTION + U macOS上で）。
このショートカットを押すと、アクティブなページのHTMLやその他のコードを表示する新しいブラウザタブが開きます。このソースは色分けされており、あなたが探しているものをコンパクトにして見つけることが簡単にできます。また、Chromeのアドレスバーに次のテキストを入力し、ウェブページのURLの左側に追加して、 入る キー： ビューソース： （すなわち、ビューソース：https：//www.Go-Travels.com）。
3つ目の方法は、Chromeの開発ツールを使用する方法です。このツールを使用すると、ページのコードをさらに深く理解し、テストや開発のためにオンザフライで調整することができます。このキーボードショートカットを使用して、開発者ツールのインターフェイスを開いたり閉じたりすることができます。 CTRL + SHIFT + I (COMMAND + OPTION + I macOS上で）。また、次のような方法で起動することもできます。
-
Chromeのメインメニューボタンを選択します（右上にあり、縦に並んだ3つの点で表されます）。
-
ドロップダウンメニューが表示されたら、マウスカーソルを その他のツール オプション。
-
サブメニューが表示されたら、 開発者ツール.
アンドロイド
Android用Chromeでウェブページのソースを表示するのは、アドレス（またはURL）の前に次のテキストを追加して送信するだけです。 ビューソース：。これの例は、 閲覧元：https：//www.Go-Travels.com 。問題のページの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開発ツール オプションをリストから選択します。
devツールを初めて実行した後、Edgeはブラウザのコンテキストメニューに2つの追加オプションを追加します（Webページ内のどこかを右クリックするとアクセスできます）。 要素を検査する そして ソースを表示、後者は デバッガ 開発ツールのインターフェイスの一部にソースコードが埋め込まれています。
Mozilla Firefox
実行先：Linux、macOS、Windows
Firefoxのデスクトップ版でページのソースコードを表示するには、 CTRL + U (COMMAND + U on macOS）をクリックすると、アクティブなWebページ用のHTMLとその他のコードを含む新しいタブが開きます。
次のテキストをFirefoxのアドレスバーに直接入力すると、ページのURLの左に移動すると、代わりに現在のタブに同じソースが表示されます。 ビューソース： ( すなわち、ビューソース：https：//www.dotdash.com ).
ページのソースコードにアクセスするもう1つの方法は、次の手順を実行してアクセス可能なFirefoxの開発ツールです。
-
ブラウザウィンドウの右上隅にある3つの水平線で表されるメインメニューボタンを選択します。
-
ポップアウトメニューが表示されたら、 開発者 「レンチ」アイコン。
-
Web Developerのコンテキストメニューが表示されるはずです。を選択 ページソース オプション。
Firefoxでは、ページの特定の部分のソースコードを表示して、問題を簡単に特定することもできます。これを行うには、まずマウスで興味のある領域を強調表示します。次に、右クリックして 選択ソースの表示 ブラウザのコンテキストメニューから選択します。
アンドロイド
FirefoxのAndroidバージョンでソースコードを表示するには、WebページのURLに次のテキストを付加します。 ビューソース：。たとえば、DotdashのHTMLソースを表示するには、ブラウザのアドレスバーに次のテキストを入力します。 view-source：https：//www.dotdash.com .
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の環境設定が表示されるはずです。クリックしてください 上級 アイコンをクリックして、最上部の行の右端に配置します。
-
アドバンスセクションの下部には、ラベル付きのオプションがあります メニューバーに現像メニューを表示する空のチェックボックスが付いています。このボックスを1回選択するとチェックマークが表示され、左上隅にある赤色の「x」をクリックして設定ウィンドウを閉じます。
-
を選択 開発する メニューが表示されます。
-
ドロップダウンメニューが表示されたら、 ページソースを表示する。代わりに、次のキーボードショートカットを使用することもできます。 COMMAND + OPTION + U.
オペラ
実行先：Linux、macOS、Windows
OperaブラウザでアクティブなWebページからソースコードを表示するには、次のキーボードショートカットを使用します。 CTRL + U (COMMAND + OPTION + U macOS上で）。代わりに現在のタブでソースを読み込む場合は、アドレスバー内のページのURLの左側に次のテキストを入力してヒットします 次のように入力します。view-source： ( すなわち、ビューソース：https：//www.Go-Travels.com ).
デスクトップ版のOperaでは、統合された開発ツールを使用して、HTMLソース、CSSなどの要素を表示することもできます。このインターフェイスを起動するには、デフォルトでメインブラウザウィンドウの右側に表示されます。次のキーボードショートカットを押します。 CTRL + SHIFT + I (COMMAND + OPTION + I macOS上で）。
Operaの開発者ツールセットには、以下の手順でアクセスすることもできます。
-
ブラウザウィンドウの左上隅にあるOperaロゴを選択します。
-
ドロップダウンメニューが表示されたら、マウスカーソルを その他のツール オプション。
-
クリック 開発者メニューを表示する.
-
もう一度Operaロゴを選択してください。
-
プルダウンメニューが表示されたら、カーソルを上に移動します 開発者.
-
サブメニューが表示されたら、 開発者ツール.
ビバルディ
Vivaldiブラウザ内でページソースを表示するには複数の方法があります。最も簡単なのは、 CTRL + U キーボードショートカット。アクティブなページのコードを新しいタブに表示します。
現在のタブにソースコードを表示するページのURLの前に次のテキストを追加することもできます。 ビューソース：。これの例は、 view-source：http：//www.dotdash.com .
もう1つの方法は、ブラウザの統合開発者ツールを使用して、 CTRL + SHIFT + I または 開発者ツール ブラウザのオプション ツール メニュー - V ロゴを左上隅に表示します。開発ツールを使用すると、ページのソースをより詳細に分析できます。
