移动端网页的调试比桌面端复杂，因为代码运行在手机浏览器上，调试工具在电脑上。
本节介绍如何在电脑上调试手机浏览器中的网页。
前提条件：
步骤：
chrome://inspect/#devices2024-2026 更新：Chrome 还支持通过 WiFi 进行无线调试，无需 USB 线（首次执行
adb tcpip 5555时需要先连一次 USB）。在手机上通过adb tcpip 5555和adb connect <手机IP>:5555连接后，即可在chrome://inspect/#devices中看到设备。
如果你的 Android 应用内嵌了 WebView，也可以使用同样的方式调试：
// Android 代码
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}chrome://inspect/#devices 中找到 WebView 页面，点击 "inspect"前提条件：
步骤：
2024-2026 更新：macOS Sonoma + iOS 17+ 支持无线调试（无需 USB 线）。前提是 iPhone 和 Mac 在同一 WiFi 网络下，且 iPhone 已通过 USB 配对过一次。
如果 iOS 应用内嵌了 WKWebView，调试方式与 Safari 相同：
isInspectable 属性设置为 true：// iOS 16.4+
if #available(iOS 16.4, *) {
webView.isInspectable = true
}2024-2026 更新：iOS 16.4+ 要求显式设置
isInspectable = true才能调试 WKWebView。之前的版本默认可调试（Debug 构建）。
如果没有真机，可以使用云测试平台：
这些平台提供了各种型号的手机浏览器，可以直接在网页中调试。
Chrome DevTools 自带设备模拟模式：
Cmd+Shift+M）注意：Device Mode 只是模拟，不能完全替代真机调试。某些 iOS/Android 特有的问题只在真机上出现。
2024-2026 新增：Playwright 支持模拟移动设备进行自动化测试和调试：
const { chromium, devices } = require('playwright');
const iPhone = devices['iPhone 14 Pro'];
(async () => {
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext({
...iPhone,
});
const page = await context.newPage();
await page.goto('https://example.com');
// 在 DevTools 中调试
await page.pause();
})();| 问题 | 原因 | 解决方案 |
|---|---|---|
chrome://inspect 看不到设备 | ADB 未连接 | 检查 USB 调试是否开启，重装驱动 |
| inspect 页面白屏 | 网络问题（CDN 资源加载失败） | 翻墙或配置代理 |
| iOS 调试连接断开 | USB 连接不稳定 | 使用 MFi 认证线缆，尝试无线调试 |
| WebView 无法调试 | 未启用调试 | Android: setWebContentsDebuggingEnabled(true)；iOS: isInspectable = true |
| 触摸事件无法模拟 | 未开启 Device Mode 的触摸模拟 | 在 Device Mode 中启用触摸模拟 |