WebStorm内置服务器默认仅响应localhost，手机无法访问；必须修改端口、勾选“Can accept external connections”、用Debug模式启动HTML文件，并确保手机与电脑同局域网且防火墙放行该端口。
WebStorm 内置 Web 服务器默认只响应 localhost，手机访问不到——必须改端口、开外网、配 IP 地址三步全做对，缺一不可。
修改内置服务器端口并启用外部连接
WebStorm 的内置服务（用于 HTML Live Preview）默认监听 63342 端口且绑定 127.0.0.1，手机无法访问。需手动放开限制：
- 进入
Settings → Build, Execution, Deployment → Debugger → Built-in server - 把
Port改为未被占用的值，比如8080或8888（避开系统常用端口如80、443、3000） - 务必勾选
Can accept external connections - 点击
Apply，否则设置不生效
注意：改完端口后，所有通过 Debug 模式打开的页面地址都会变成 http://你的IP:新端口/xxx.html，不是 localhost。
用 Debug 模式启动 HTML 文件（不是 Run）
Live Preview 依赖调试会话建立的 WebSocket 连接，只有 Debug 'index.html' 才能触发实时更新，Run 或右键“Open in Browser”完全无效：
- 右键项目中的 HTML 文件 → 选择
Debug 'xxx.html'（菜单项带虫子图标） - 浏览器自动打开，地址形如
http://192.168.x.x:8080/xxx.html，**不是localhost** - 地址栏右侧出现 JetBrains IDE Support 插件图标，且页面顶部有黄色提示条：“JetBrains IDE Support is connected”——这是连接成功的唯一标志
- 若黄色条被误点关闭，或刷新页面后地址变成
localhost，连接即断，需重新 Debug 启动
确保手机和电脑在同一局域网，并关闭防火墙拦截
即使 WebStorm 设置正确，Windows 防火墙也可能拦截新端口：
- 在 Windows 控制面板中打开
Windows Defender 防火墙 → 高级设置 → 入站规则 - 查找名称含
WebStorm或对应端口号（如8080）的规则 - 若无对应规则，需手动新建：允许 TCP 端口，协议类型选
TCP，特定本地端口填你设的8080 - 确认手机和电脑连的是同一个 WiFi，且路由器未开启 AP 隔离（部分企业/校园网会禁用设备互访）
常见失败现象：ERR_CONNECTION_REFUSED 或 ERR_CONNECTION_TIMED_OUT，基本都卡在这一步。
别混淆 Vue/React 项目的 npm serve 和内置服务器
Vue CLI 或 Vite 项目用 npm run serve 启动的是独立开发服务器（如 http://localhost:5173），和 WebStorm 内置服务器无关。想让手机访问这类项目，得单独配置：
- 运行命令时加参数：
npm run dev -- --host 0.0.0.0 --port 8888（Vue CLI）或vite --host 0.0.0.0 --port 8888（Vite） -
--host 0.0.0.0表示监听所有网卡，不只是localhost - 此时手机访问的是
http://你的IP:8888/，不是 WebStorm 的63342或你改过的内置端口 - 这种模式下，WebStorm 的 Debug HTML 功能完全不参与，纯靠框架自己的 dev server
真正容易被忽略的是：WebStorm 内置服务器只对纯 HTML/CSS/JS 静态文件有效；一旦项目依赖构建工具（Vue、React、Svelte），就得绕过它，直接调框架自己的服务——这时候 WebStorm 只是编辑器，不是服务器。
