HTML ソース コード エクストラクター
あらゆる Web ページの HTML ソース コードを簡単に抽出します。コンテンツを直接表示、コピー、ダウンロードできます。ブラウザ拡張機能は必要ありません。
Google Chromeでページソースを検査する方法
Google Chrome で Web ページのソース コードを検査することは、開発者、デザイナー、SEO 専門家にとってシンプルで非常に便利なタスクです。以下の手順に従います。
Google Chromeを開く
Google Chrome ブラウザを使用していることを確認してください。調べたいページを開きます。
開発者ツールにアクセスする
開発者ツール (DevTools) を開くには、主に 3 つの方法があります。
- ページ上の任意の場所を右クリックし、コンテキスト メニューから [検査] を選択します。
-
キーボード ショートカットを使用します。
Windows/Linux: Ctrl + Shift + IMac: Cmd + Option + I
- Chrome の右上隅にある 3 点メニュー (⋮) > [その他のツール] > [開発者ツール] をクリックします。
ソースコードを参照する
DevTools を開くと、いくつかのタブが表示されます。ソースコードを検査するための主なものは次のとおりです。
要素
ページの HTML 構造を表示します。要素の上にマウスを置くと、ページ上の対応する領域が強調表示されます。
コンソール
JavaScript コマンドを実行し、ページ スクリプトをデバッグできます。
ネットワーク
ページによってロードされたすべてのリソース (HTML、CSS、JavaScript、画像) を表示します。
HTML を探索する
[要素] タブで、DevTools の左上隅にあるセレクター アイコン (< >) をクリックし、ページ上の任意の要素をクリックします。これにより、対応する HTML コードが強調表示されます。 DevTools で HTML を直接編集して、一時的な変更をテストできます。
全ページのソースを表示
ページのソース コード全体を表示したい場合は、次のようにします。
- ページ上の任意の場所 (DevTools の外側) を右クリックします。
- 「ページのソースを表示」を選択します。
- 新しいタブが開き、完全な HTML が表示されます。
追加のヒント
要素をコピー: DevTools で要素を右クリックし、[コピー] > [要素のコピー] を選択します。
HTML で検索:
使用する Ctrl + F (または Cmd + F Mac の場合)、HTML 内の特定の単語またはタグを検索します。
ソースコードで検査できること
よくある質問
この HTML ソース コード エクストラクターについて
この無料の HTML ソース コード抽出ツールは、ワークフローを離れることなくページのマークアップを定期的に検査する必要がある SEO 専門家、Web 開発者、デジタル マーケティング担当者向けに設計されています。クライアント サイトを監査している場合でも、競合他社のページを比較している場合でも、CMS が正しいメタ タグを出力しているかどうかを確認している場合でも、このツールは数秒で生の HTML を提供します。
ブラウザネイティブの「ページソースの表示」とは異なり、この抽出ツールはどのデバイスからでも機能し、ワンクリックで完全なソースをコピーまたはダウンロードできます。抽出はサーバー側のプロキシを通じて行われるため、出力には、Web クローラー (Googlebot を含む) がページをリクエストしたときに実際に受け取る内容が反映されます。