WebStorm 不支持直接真机调试，需通过 Chrome DevTools Protocol 依赖 ADB（Android）或 Safari Web Inspector（iOS）桥接；关键在于确保设备可被识别、开发服务器可被手机访问、source map 路径正确映射。
WebStorm 本身不直接提供移动端真机调试能力，它依赖 Chrome DevTools Protocol（CDP）与 Android 设备或 iOS 模拟器通信，而这个链路由 Chrome / Edge 浏览器和 ADB（Android）或 Safari Web Inspector（iOS）承载。你不是在 WebStorm 里“配手机”，而是在 WebStorm 里配好 JavaScript Debug 配置，让它能正确连接到已桥接的移动端浏览器上下文。
Chrome 连接 Android 设备失败：adb devices 不显示或设备离线
这是整个链路的第一道坎。WebStorm 的移动端调试完全依赖 ADB 正常工作 —— 它不自己启动 adb server，也不自动安装驱动。
- 先在终端运行
adb devices，确认输出里有device状态的条目；如果为空或显示offline，说明 USB 调试没通 - 检查手机是否开启「开发者选项」+「USB 调试」，且弹出授权对话框时点了「允许」（部分厂商如华为、小米会额外要求开启「USB 调试（安全设置）」）
- Windows 用户务必安装对应手机厂商的 USB 驱动（仅靠 Google USB Driver 不够），Mac/Linux 一般免驱但需确认
adb版本 ≥ 1.0.41 - 不要用 USB 集线器或延长线；换 Type-C 线（数据线，非充电线）；尝试切换 USB 连接模式为「文件传输（MTP）」或「PTP」
- WebStorm 不会帮你重启 adb，所以每次设备断连后，手动执行
adb kill-server && adb start-server
WebStorm 启动 Chrome 调试却打不开手机页面
常见现象：配置完 JavaScript Debug 并点击 ▶，Chrome 启动但地址栏是 about:blank 或报 ERR_CONNECTION_REFUSED。根本原因是 WebStorm 默认用内置服务器（http://localhost:63342）托管 HTML，而该端口无法被手机直接访问 —— 手机和开发机不在同一局域网，或防火墙拦截了 63342 端口。
- 别依赖 WebStorm 内置服务器；改用 Vite / Webpack Dev Server 等真实服务，确保它监听
0.0.0.0:5173（而非默认的localhost:5173） - 在
vite.config.ts中显式配置：server: { host: '0.0.0.0', port: 5173, strictPort: true } - 手机浏览器访问
http://<你的电脑局域网IP>:5173（比如http://192.168.1.100:5173），确认页面能正常加载 - 此时再在 WebStorm 中新建
JavaScript Debug配置，URL 填这个真实地址（http://192.168.1.100:5173），而不是http://localhost:63342/xxx.html - 勾选
Can accept external connections（Settings → Build, Execution, Deployment → Debugger → Built-in server）—— 否则 WebStorm 拒绝来自手机的 sourcemap 请求
断点打在 <script setup> 里无效，但浏览器 DevTools 里能停
说明源码映射（sourcemap）在手机 Chrome 上解析失败，或者 WebStorm 没正确关联到运行时脚本路径。Vue SFC 的 <script setup> 编译后路径和原始位置差异大，容易错位。
- 确保
vite.config.ts中build.sourcemap设为true（不是'inline'），且开发时没启用build.rollupOptions.output.inlineDynamicImports - 在手机 Chrome 地址栏输入
chrome://inspect→ 点击 Configure → 添加192.168.1.100:5173（你的电脑 IP + 端口），确保目标页面出现在「Remote Target」列表中 - 右键该页面 → 「Open in new tab」→ 在新标签页里按
F12打开 DevTools，看 Sources 面板能否展开原始.vue文件；如果不能，说明 sourcemap URL 路径不对（比如含file:///或绝对路径/src/...） - 在 WebStorm 的
JavaScript Debug配置里，取消勾选Use JavaScript Debug Proxy（该代理对跨设备 sourcemap 支持不稳定） - 临时加一句
debugger到<script setup>顶部，用手机 Chrome 自己触发断点；若它能停，就证明是 WebStorm 映射问题，不是代码或构建问题
iOS 真机调试几乎不可行，别强求 WebStorm 直连
Safari Web Inspector 对远程调试支持极弱，且 WebStorm 官方文档明确不支持 iOS 设备作为 JavaScript Debug 目标。所谓“iOS 调试”在 WebStorm 里实际是妥协方案：
- 用 Mac 开发机 + iPhone 通过 USB 连接，Safari 开启「开发」菜单 → iPhone 名称下勾选「自动显示开发菜单」
- 在 Safari 中打开
http://192.168.1.100:5173，然后 Safari → 开发 → iPhone 名称 → 页面标题，即可打开 Web Inspector - WebStorm 此时只能作为编辑器配合：关掉它的
JavaScript Debug配置，专注写代码 + 热更；所有断点、console、network 都交给 Safari Inspector 处理 - 别尝试在 WebStorm 里设 URL 为
http://localhost:63342并连 iPhone —— iOS 无法访问 macOS 内置服务器端口，且没有等效的chrome://inspect替代入口 - 如果必须用 WebStorm 调试逻辑，唯一可行路径是：用 Xcode 启动 iOS 模拟器 → 安装 Chrome for iOS 模拟器（需手动拖入 .app）→ 但此流程早已被 Apple 限制，2025 年后基本失效
真正卡住的从来不是 WebStorm 设置，而是设备网络可达性、ADB/Safari 桥接稳定性、以及 sourcemap 路径在跨设备场景下的语义一致性。一旦手机能通过浏览器访问 dev server，且 chrome://inspect 列出目标页，剩下的只是 WebStorm 映射精度问题 —— 它不会帮你修通网络，也不会替代 Chrome DevTools 的底层能力。
