Mac なしで iPhone の Web ページをデバッグする方法

まずは診断：自動チェックに任せる

DOM をつつく前に、自動スキャンに分かりやすい問題を教えてもらいましょう。OpenHTML の診断は、ページが参照しているのに見つからないファイル、プライバシーのデフォルト設定でブロックされたリモートリソース、JavaScript の実行時エラー、エンコーディングの問題を一覧にします。修正方法があるものには、それぞれワンタップの修正（ネットワークを許可、JS を有効化、ローカルサーバーに切り替え）が付きます。

実際のところ、「なぜ真っ白なのか／スタイルが当たらないのか／半分しか動かないのか」という事例のほとんどは、これで数秒のうちに片付きます。特に、生成されなかったファイルを参照している AI 生成のページ では効果的です。

コンソール：ページの声を聞く

コンソールは、ページの JavaScript が出力する log・warn・error をリアルタイムで捉えます。キャッチされなかった例外もメッセージ付きでここに現れます。操作が効かなくなったとき、たいてい最も早い手がかりになります。

要素インスペクタ：端末上で DOM を見る（Pro）

• どの要素をタップしても、タグ・属性・計算済みスタイルを確認できます。
• 属性をその場で編集して仮説を試せます。そのクラスを外せばレイアウトは直るのか？
• 検査中の要素から、ソース表示の該当行へ直接ジャンプできます。

ネットワークパネル：すべてのリクエストをタイミング付きで（Pro）

fetch・XHR・WebSocket の通信を、URL・ステータスコード・サイズ・タイミングとともに観察できます。デスクトップのネットワークタブに相当するものが、端末内にあるわけです。セッション全体を HAR ファイルとして書き出せば、あとからデスクトップの DevTools や Charles、Proxyman で分析できます。

プライバシーのデフォルトを思い出してください。書類ごとに許可するまで、ページはネットワークに接続できません。ネットワークパネルが空なのは、単にページがオフラインに保たれているだけかもしれません。その場合は診断がそう教えてくれます。

本番に近い条件で再現する

• ローカルサーバーモード（Pro）は 127.0.0.1 でプロジェクトを配信するので、fetch()、ES モジュール、JSON の読み込みが本番と同じように動きます。ZIP の Web プロジェクトには欠かせません。
• ビューポートのプリセット（Pro）は、スマートフォン・タブレット・デスクトップの幅でページを描画し、レスポンシブの不具合をあぶり出します。
• デスクトップ用サイトを表示（Pro）は、モバイルへの適応が行き過ぎているページで、デスクトップ向けのレイアウトを読み込みます。

実際のデバッグの流れ

1. ページまたはプロジェクトを読み込むと、診断がブロックされた CDN のスタイルシートとコンソールエラー 1 件を指摘する。
2. その書類にネットワークを許可する → スタイルが届く。エラーは残ったまま。
3. コンソールが app.js の未定義変数を示し、ソース表示がその行へジャンプする。
4. インスペクタで DOM の属性を編集して直ることを確かめ、机に戻ってからファイルを正しく修正し、読み込み直して検証する。