手機開啟遠程調試教程（適用于 Chrome / Safari）
前端移動端調試指南｜適用 iPhone 和 Android｜WebDebugX 出品
本教程將詳細介紹如何在 iPhone 和 Android 手機上開啟網頁檢查器，配合 WebDebugX 實現遠程調試。教程包含 Chrome、Safari 瀏覽器設置，USB 調試啟用方法，以及 App 中啟用調試支持的代碼示例，幫助開發者快速定位移動端網頁問題。
一、iPhone 開啟 Chrome 遠程調試功能（需配合 WebDebugX 使用）
- 打開 Chrome 瀏覽器，點擊底部菜單欄。
- 進入 設置 → 內容設置。
- 啟用 網頁檢查器 開關。
? 配合 WebDebugX 即可連接設備并進行網頁調試。
二、iPhone 啟用 Safari 網頁檢查器（Safari Web Inspector）
- 打開 系統設置，搜索“Safari”。
- 滑動到底部，進入【高級】選項。
- 打開【**網頁檢查器（Web Inspector）】開關。
💡 使用WebDebugX，Safari 遠程調試不需要連接 Mac，查看調試設備。
三、安卓手機開啟 Chrome 遠程調試（適配所有主流安卓設備）
- 打開手機【設置】→【關于手機】→ 連續點擊 7 次“版本號”激活開發者模式。
- 返回設置首頁，搜索“開發者選項”。
- 找到并開啟【**USB 調試（USB Debugging）】功能。
?? 提示：不同品牌手機如華為、小米、OPPO、vivo 等，開發者選項路徑可能略有差異。建議結合品牌名稱進行搜索。
四、自研 App 啟用網頁檢查器（支持 iOS 與 Android）
為確保網頁內容在 WebView 中可調試，請在對應語言中啟用調試配置：
iOS 開發（Objective-C）：
if (@available(iOS 14.0, *)) {webView.inspectable = YES;
}
iOS 開發（Swift）：
if #available(iOS 14.0, *) {webView.isInspectable = true
}
Android 開發（Java）：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {WebView.setWebContentsDebuggingEnabled(true);
}
Android 開發（Kotlin）：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {WebView.setWebContentsDebuggingEnabled(true)
}
? 啟用以上設置后，即可在 WebDebugX 中使用遠程檢查器查看 WebView 內嵌網頁內容。
五、PC 上啟用 Chrome 調試模式（Windows / macOS 通用）
通過命令行啟動 Chrome 瀏覽器，開啟遠程調試端口：
chrome.exe --remote-debugging-port=9222 --user-data-dir=chromedatadir
?? 注意事項：
- 如果運行多個 Chrome 實例，請確保每個實例的
--user-data-dir不同。 --remote-debugging-port的值也不能重復，避免端口沖突。
推薦閱讀
👉 官方詳細圖文教程 - WebDebugX
👉 WebDebugX — 專業的移動端網頁遠程調試工具，支持 iOS / Android / WebView 應用調試。
)
