如何在 iPhone 上偵錯網頁——不必用 Mac

先看診斷：自動掃描這一關

在動手翻 DOM 之前，先讓自動掃描把顯而易見的問題講出來：OpenHTML 的診斷會列出頁面引用卻找不到的檔案、被隱私預設封鎖的遠端資源、JavaScript 執行期錯誤，以及編碼問題——只要有現成解法，每一項都附一鍵修正（允許網路、啟用 JS、改用本地伺服器）。

實務上，這一步幾秒鐘就能解掉大部分「為什麼是空白／沒有樣式／只動一半」的狀況，尤其是AI 產生的頁面——它們常常引用根本沒被產生出來的檔案。

主控台：頁面自己說了什麼

主控台會即時擷取頁面 JavaScript 的 log、warn 和 error 輸出。未被捕捉的例外連同訊息一起落在這裡——互動功能失靈時，這通常是最快的線索。

元素檢查器：在裝置上翻 DOM（Pro）

• 點一下任何元素，就能看到它的標籤名稱、屬性和計算後樣式。
• 就地編輯屬性來驗證猜想——把那個 class 拿掉，佈局是不是就正常了？
• 從正在檢查的元素直接跳到原始碼檢視器裡對應的那一行。

網路面板：每一筆請求，連時間一起看（Pro）

觀察 fetch、XHR 和 WebSocket 流量，包含網址、狀態碼、大小和時間——等同於裝置上的網路分頁。整段工作階段可以匯出成 HAR 檔案，之後再拿到桌面版開發者工具、Charles 或 Proxyman 裡分析。

別忘了隱私預設：在你逐份文件允許之前，頁面連不上網路，所以網路面板空空如也，可能只是代表這個頁面被保持在離線狀態——診斷會告訴你。

重現真實的執行環境

• 本地伺服器模式（Pro）把專案架在 127.0.0.1 上，讓 fetch()、ES 模組和 JSON 載入的行為跟正式環境一致——跑 ZIP 網頁專案時尤其必要。
• 視窗預設（Pro）以手機、平板和桌面寬度算繪頁面，把響應式的毛病抖出來。
• 頁面對行動版適應得太積極時，用要求桌面版網站（Pro）載入桌面版佈局。

一次實際的排查流程

1. 匯入頁面或專案；診斷標出一個被封鎖的 CDN 樣式表和一則主控台錯誤。
2. 為這份文件允許網路 → 樣式進來了，錯誤還在。
3. 主控台顯示 app.js 裡有個未定義的變數；原始碼檢視器直接跳到那一行。
4. 在檢查器裡改 DOM 屬性，確認這個修法有效——回到桌前再把檔案正式改好，重新匯入驗證。