HTML ページのソース コードを表示することは、初心者だけでなく中級プログラマーにとっても HTML を学ぶ良い方法です。また、Web スクレイピング プロジェクトでそのようなアクションを制限していないサイトからデータを抽出する必要がある場合は、ソース コードのコード ブロックとタグを理解する必要があります。
Google Chrome では、 2 つの方法で任意の Web ページのソース コード。 1 つの方法は、ソース HTML コードを Web サーバーから直接表示することです。通常は、単一の「ソースの表示」タブとして開きます。
別の方法として、Web ブラウザが実際のソース コードを最適化し、Javascript 操作を追加した後にコードをチェックする方法があります。Chrome はこれを要素の検査ツールとして表示します。
ショートカットの使用
Chrome でウェブページのソース コードを開く最も簡単な方法は、キーボード ショートカットを使用することです。
[ソースの表示] タブを開くには、Windows では Ctrl + U を押します。Mac では、このショートカットは ⌘-Option-U です。
Inspect Elements ツールを開く必要がある場合は、Ctrl + Shift + C を押す必要があります。F12 または Ctrl + Shift + I を押して Developers ツールを開き、次に移動することもできます。
コンテキスト メニューの使用
Google Chrome の Web ページのコンテキスト メニュー (右クリック メニュー) には、ソース コードを開くオプションも含まれています。変更されていないソース コードまたはブラウザーによる最適化後のコードを表示することを選択できます。
Web ページ内で任意の場所を右クリックします。必要に応じて [ページ ソースの表示] または [検査] を選択します。検査すると、右クリックしたグラフィック要素に対応する正確なコード ブロックが表示されます。
URL を編集する
ソース コードを表示するもう 1 つの方法は、コードを追加することです。 URL へのスニペット。上記のオプションを使用してページ ソースを表示すると、ソース コードの URL アドレスに view-source: が表示されることがあります。実際には、このコードを手動で入力して同じタスクを実行できます。
アドレス バーをクリックします。 Home を押すか、キーボード カーソルが URL の前に来るまで左キーを押し続けます。したがって、URL が https://www.google.com だった場合は、view-source:https://www.google.com
Chrome メニューから
Inspect Elements を開くこともできますChrome のコントロール メニュー内からツールを使用します。ここで、Elements を含む Developers ツールと、Chrome コンソールなどの他のツールを開くことができます。
Chrome ウィンドウ内のトリプル ドット アイコンをクリックします。 その他のツール に移動し、開発者ツール を選択します。
