スマホでWebサイトのソース表示をする方法：Android/iPhone対応【エンジニア向け】｜DAD UNION

「外出中にクライアントから急な修正依頼が来た」「移動中に競合サイトのmetaタグやJSの読み込み順を確認したい」

Webエンジニアやディレクターであれば、PCが開けない環境でもスマホで即座にHTMLソースコードを確認したい場面があるはずです。しかし、スマホのChromeやSafariには標準で「右クリック→ページのソースを表示」が存在しません。

本記事では、スマホ（Android/iPhone）でWebサイトのソースを表示させるための最も効率的な方法を解説します。「view-sourceと入力しても検索されてしまう」というAndroid特有のトラブル解決策もあわせて紹介します。

Contents

1. Android (Chrome) の場合：view-sourceスキームを使う

AndroidのChromeブラウザを使用している場合、最も手っ取り早いのはURLスキームを利用する方法です。

入力例：
view-source:https://example.com

⚠️ 注意：Pixelや最新Chromeでの「検索されてしまう」問題

URL欄に view-source: を入力した後、キーボードの「確定（実行/Go/→）」ボタンを押してはいけません。

確定ボタンを押すと、Chromeはそれを「検索ワード」と判断し、Google検索結果画面に飛ばされてしまいます。

正解の操作：
入力後にアドレスバーの下にサジェスト（予測候補）として表示される「view-source:…（地球儀アイコンや青文字）」をタップしてください。これでソース画面に遷移します。

iPhoneのSafariでは view-source: スキームが正しく動作しない、または操作が面倒な場合があります。また、Androidでも毎回入力するのが手間な場合は、ブックマークレット（JavaScript）を登録するのがエンジニアとしての最適解です。

javascript:location.href='view-source:'+location.href

ソースを見たいページを開いた状態で、アドレスバーに「ソース表示（登録した名前）」と入力し、ブックマーク候補からその項目をタップします。これで一発でソースコードが表示されます。

「会社の検証端末だから勝手にアプリを入れられない」「ブックマークレットの登録すら手間」という場合は、Webブラウザ上で完結するソースコード閲覧サービスを使うのが最も手軽です。

URLを貼り付けるだけでHTMLソースを取得し、色分け（シンタックスハイライト）して表示してくれる定番の無料ツールです。

⚠️ この方法のデメリット（注意点）

このツールは外部サーバーから対象サイトにアクセスする仕組みのため、以下のページは見ることができません。

あくまで「一般公開されているページ」の簡易チェック用として活用しましょう。

上記の方法で見られるのはあくまで「HTMLソース」であり、JavaScriptによって動的に生成されたDOMの状態や、CSSの当たり方、Consoleログまでは確認できません。

もし、レスポンシブ崩れやJSエラーの調査など、より深いデバッグが必要な場合は以下の方法を検討してください。

iPhoneの場合：MacとLightning/USB-Cケーブルで接続し、MacのSafariの「開発」メニューからiPhoneを選択してインスペクタを開く。
Androidの場合：PCとUSBケーブルで接続し、PC側のChromeで chrome://inspect を開き、端末を選択する（USBデバッグの有効化が必要）。

Android (Chrome)：URLの頭に view-source: をつける。ただし、確定ボタンではなくサジェストをタップすること。
iPhone / 頻繁に使う人：javascript:location.href='view-source:'+location.href をブックマーク登録する。

現場での急な対応に備えて、ブックマークレットを一つ仕込んでおくと安心です。

　
※参考にされる場合は自己責任でお願いします。