任意のブラウザで任意の Web サイトの HTML コードを表示する方法

Web ページは、正しく順序付けられた HTML 要素のセットとして定義することもできますが、Web 開発者とデザイナーがユーザーの注意を引き付けようとする製品にすぎません。 アクセスした Web ページが内部で動作することを確認したい場合は、好奇心からであるか、単に自己学習のニーズを満たすためであるかにかかわらず、次のことができます。 HTML コードにアクセスする 任意のブラウザから任意の Web ページを非常に簡単に。

Satcounter のデータによると、2022 年 XNUMX 月には、 最も使用されているブラウザ 世界中のコンピュータは Google です クロム、66% のシェアを持つ。 XNUMX 番目の位置にあり、継続的な成長を遂げているのは、 Microsoft エッジ(Edge) 市場シェアが 10% 強のクロム。 XNUMX 番目と XNUMX 番目の位置は Safari です (この記事では使用できないため、この記事では説明しません)。 Windows)と Firefoxの 市場シェアはそれぞれ 9.1% と 7.6% です。

任意のブラウザで任意の Web サイトの HTML コードを表示する

デスクトップ プラットフォームで世界で最も使用されている 5 つのブラウザーの分類は、次のように締めくくられます (モバイル デバイスでは状況はあまり変わりません)。 Opera、現在は中国企業のコングロマリットの背後にある会社で、2.6%のシェアを持っています。 最も使用されているブラウザを考慮して、さまざまなブラウザを使用して任意の Web サイトの HTML コードにアクセスする方法を以下に示します。

Web サイトの HTML コードとは何ですか? また、その目的は何ですか?

すべてのブラウザーには、開発者向けツール、Web インスペクター、要素インスペクターなどと呼ばれる機能が含まれています。これらの主な目的は、ユーザーを許可することです。 Web の HTML コードにアクセスする 、それを構成するさまざまな要素の動作を分析し、エラーを検出し、解決策に取り組むためにアクセスする Web のソース コード。 また、Web デザインの最初の一歩を踏み出すユーザーにも特に役立ちます。

各ブラウザーは、ベース ブラウザーに実装された異なるインスペクターを使用します。 Chrome、Edge、Opera の場合、Chromium ベースであるため、使用されるインスペクターはまったく同じです。 わずかに変更されているのは、レイアウトとブラウジング オプションだけです。

HTML コードにアクセスすると、すべての情報が次のように分類されます。 さまざまなタブ そのため、それを構成するすべてのセクションに簡単にアクセスできます。 私たちの知識が非常に高い場合は、要素タブにアクセスすることで十分な知識を得ることができます.

[要素] タブから、Web のすべての HTML コードにアクセスできます。 インスペクターでコードのさまざまな行にマウスを移動すると、ウェブ上で参照されているコンテンツがどのように強調表示され、ウェブのどのセクションを参照しているかが示されます。

グーグルクロームで

Google Chrome で利用できる開発者ツールは、アクセスするすべての Web サイトの HTML コードにアクセスできるようにする機能です。 Google のブラウザは、このツールにアクセスするための XNUMX つの異なる方法を提供しています。これらの方法は、キーボード ショートカットから Chrome 構成メニューのファンクション キーにまで及びます。

コード HTML Chrome

  • F12 キー。 これは、縮小キーボードを使用せず、ファンクション キー (Fn) を使用する必要がある限り、Google Chrome 開発者ツールにアクセスする最速の方法です。 このボタンを初めて使用すると、ブラウザはこのキーの操作をこの機能に関連付けることができます。
  • Control + Shift + i . 日常生活でキーボード ショートカットを採用して生産性を高め、マウスへの依存を減らしている場合は、このキーボード ショートカットを使用して Chrome コードにアクセスできます。
  • メニューから . Google Chrome 構成メニューから、右上隅にある XNUMX つの縦の点をクリックして、[ツール] メニューにアクセスしてコードを調べることもできます。 次に、[その他のツール] に移動し、最後に最後のオプションである [開発者ツール] をクリックします。
  • 右マウスボタン 、Web のソース コードと開発者用ツールの両方にアクセスできます。

Microsoft Edge 経由

Microsoft Edge で見つけたページの HTML コードにアクセスしたい場合、Microsoft ブラウザーは XNUMX つの異なる方法を提供します。 どちらも Chromium に基づいており、同じブラウザー ベースを共有しているため、XNUMX つの方法がすべて Google Chrome と同じであることは驚くべきことではありません。

コード HTML Edge

Google とは異なり、Microsoft はこのツールを開発ツールと呼んでおり、以下に示すさまざまな方法のいずれかを使用してアクセスできるツールです。

  • ファンクションキー F12。 Chrome と同様に、これが最も速くて簡単な方法です。 このボタンを初めて使用すると、ブラウザはこのキーの操作をこの機能に関連付けることができます。
  • ショートカットで Control + Shift + i . すでに慣れている場合は、生活にもう XNUMX つのショートカットを追加しても問題ありません。
  • メニューから . 右上隅にある XNUMX つの水平ポイントをクリックします。 次に、[その他のツール] をクリックし、最後に最後のオプションである [開発ツール] をクリックします。
  • 私たちがいるウェブサイトのソースコードにアクセスするには、 右マウスボタン をクリックし、[ページのソース コードを表示] オプションを選択します。 [検査] オプションを選択すると、Edge Developer Tool が表示されます。

開発者ツールに初めてアクセスする場合、ブラウザーは Microsoft Edge 開発者ツールを開くかどうかを尋ねます。

Firefoxから

Mozilla Foundation の Firefox は、このリストで Chromium に基づいていない唯一のブラウザーであるため、上記の方法は理論的には機能しないはずですが、まったく同じであるため機能しません。

コード HTML Firefox

ただし、他のブラウザーと比較して Firefox が提供する主な違いは、現在の Web のコード インスペクターが表示される場所にあります。 すべての Chromium ベースのブラウザーは Web コードをブラウザーの右側に表示しますが、Firefox はこの情報を下部に表示することを選択し、表示された情報にアクセスしやすくしています。

Firefox から開発者ツール パネルにアクセスする場合、Chrome と Edge Chromium で同じ 3 つのオプションがあります。

  • F12 キー。 このファンクション キーを押すと、Firefox はブラウザの下部に開発者ツールを表示します。
  • キーボードショートカットの使用 Control + Shift + i 私たちがいるウェブのHTMLコードを開きます。
  • マウスを離すのが難しいユーザーの XNUMX 人である場合は、次の方法で Web サイトの HTML コードにアクセスできます。 Firefox のオプション メニュー 、ブラウザーの右上隅にある XNUMX 本の水平線をクリックし、[その他のツール] > [開発者ツール] をクリックします。
  • ノーザンダイバー社の 右マウスボタン 、[ページのソース コードを表示] オプションを選択すると、Web の HTML コードにアクセスできます。 ただし、開発者ツール パネルにアクセスする場合は、[検査] オプションを選択する必要があります。

Opera

Opera は Google Chrome や Microsoft Edge と同様に Chromium プロジェクトに基づいていますが、このブラウザで利用できる方法は同じではありません。 同じプロジェクトに基づく他のブラウザと一致するのは、それが表示されている場所であり、ブラウザの右側に他なりません。

コード HTML Opera

Opera ブラウザーがユーザーに任意のページの HTML コードにアクセスするために提供するさまざまな方法は次のとおりです。

  • キーボードショートカットで Control + Shift + i 、どのプロジェクトに基づいているかに関係なく、すべてのブラウザーがユニバーサルとして採用しているのと同じキーボード ショートカットです。 ショートカット コントロール + シフト + c 利用可能です
  • マウスの右ボタンを押して、オプションを選択します 要素を検査します ウェブ上のどこからでも。
  • Opera で開いた Web の HTML コードは、右側のボタンの [ページ ソース] オプションから利用できます。 HTML コードを検査するには、右ボタンを押したときに表示される同じメニューから、[検査] オプションを選択する必要があります。