ソースを表示 + スマート分析
SEO監査、技術検出、パフォーマンス指標とともに、HTMLソースコード全体をブラウザで調べられます。
どんなウェブページの裏側のHTMLも、スマホでそのまま確認できます - アプリもパソコンも不要。下にURLを貼り付ければ整形&ハイライトされたソースが表示されます。iPhoneとAndroidの手順は下のセクションをご覧ください。
モバイルブラウザはソースを隠しています。このツール(と下の手順)がそれを取り戻します。
パソコンなら、ページのHTMLはキーボードショートカット一つで見られます。しかしスマホでは事情が違います。iPhoneのSafariには「ソースを表示」がなく、view-source: のURLも完全にブロックされます。一方 AndroidのChromeは view-source: に対応していますが、生のHTMLが長い1行に詰め込まれて表示され、とても読めたものではありません。
このページ上部のツールはどんなスマホ・タブレットでも動作します。当サイトのサーバーがページを取得し、整形&シンタックスハイライトされたHTMLを返すので、小さな画面でも読みやすく、アプリのインストールもパソコンも不要です。以下では各プラットフォームの標準的な方法と、どんなときにツールを使うべきかを説明します。
iOSには標準のview-sourceがないため、ウェブツールが最も手軽です。
注意: URLの前に view-source: と入力しても、iOSのSafariでは動作しません - そのテキストを検索するだけです。iPhoneでは上のツールが確実な選択肢です。
Android版Chromeには標準の方法があります - さらに手軽で整形された代替手段も。
view-source: と入力します(例: view-source:https://example.com)。Chromeがそのページの生のHTMLを表示します。chrome://inspect を開きます。Chromeの生の view-source: に対する利点 - そしてiPhoneが標準ではまったくできないこと。
view-source: がブロックされている環境でも同じ整形表示をノートパソコンで使いたい、あるいは専用のフォーマッターが必要ですか? HTMLビューアをお試しいただくか、各デスクトップ・モバイルブラウザでソースを表示する方法をご覧ください。
スマホでHTMLソースを表示することについてのよくある質問。
iOSのSafariには「ソースを表示」機能が標準で搭載されておらず、view-source: のURLもiPhoneでは動作しません。もっとも簡単なのは本ツールのようなウェブツールを使う方法です。このページを開き、URLを貼り付けて「ソース表示」をタップするだけです。ブックマークレットを使ったり、iPhoneをMacに接続してSafariのWebインスペクタを使う方法もあります。
Android版Chromeでは、URLバーでアドレスの前に view-source: と入力します(例: view-source:https://example.com)。Chromeが生のHTMLを表示します。ただし整形されていないため、読みやすくハイライトされた表示にはこのページ上部のツールをご利用ください。
Android版Chromeでは使えます。iPhoneのSafariではブロックされていて使えません。本ツールはページをブラウザではなく当サイトのサーバーが取得するため、どちらでも、また他のモバイルブラウザでも動作します。
いいえ。これはウェブツールです。モバイルブラウザで開いてURLを貼り付けるだけで、ダウンロードやインストールは一切不要です。
はい。スマホでURLを貼り付ければ、デスクトップやノートパソコンがなくても、整形されたHTMLソースをその場で確認できます。
標準の view-source: は生のHTMLをそのまま表示するため、多くの場合ミニファイされて1行に詰め込まれ、小さな画面では非常に読みづらくなります。本ツールはマークアップを整形し、シンタックスハイライトを適用するので、スマホでも読みやすく表示されます。
はい。「コピー」でHTMLをクリップボードに入れられますし、「ダウンロード」で端末に .html ファイルとして保存できます。
いいえ。表示されるのは、クライアント側のJavaScriptが実行される前にサーバーが返した生のHTMLです。これは検索エンジンが最初に見るものと同じ状態です。スクリプトによって変更されたライブDOMを調べるには、デスクトップのDevToolsまたはリモートデバッグが必要です。
ウェブコンテンツ、ソースコード、SEOをさらに深く知るためのリソース。

SEO監査、技術検出、パフォーマンス指標とともに、HTMLソースコード全体をブラウザで調べられます。

コピーを保存しておきたいですか? 公開ページのHTML全体をダウンロード可能なファイルとして保存できます。

HTML構造が検索順位に与える影響と、ページを監査する際に確認すべきポイント。

HTMLの構造やタグ、そしてどんなページのマークアップも理解するための初心者向け入門。

HTML5タグの完全索引と解説 - 抽出した、あるいは生のマークアップを調べるときに便利です。

HTML・CSS・JavaScriptを扱うための、無料・有料のおすすめエディタとIDEのガイド。