真机访问页面空白或404的根本原因是开发服务器默认仅监听localhost，未配置为监听0.0.0.0，导致手机通过局域网IP访问时请求被拒绝或资源无法加载；需在vite.config.ts中设server.host: "0.0.0.0"（Vite）或vue.config.js中设devServer.host: "0.0.0.0"并禁用主机检查。
真机访问时页面空白或资源 404
根本原因是 WebStorm 启动的开发服务器默认只监听 localhost，手机访问的是你电脑的局域网 IP（比如 192.168.1.100），但 Vite 或 Vue CLI 并未允许外部请求，导致静态资源返回 404 或直接拒绝连接。
解决方式不是改 WebStorm 的内置服务器端口，而是让开发服务器本身接受外部连接：
- Vite 项目：在
vite.config.ts中显式配置server.host: "0.0.0.0"（不能写成true，Vite 2.x+ 不再支持布尔值） - Vue CLI 项目：在
vue.config.js中加devServer: { host: "0.0.0.0", disableHostCheck: true } - 确保防火墙没拦截该端口（macOS 可在「系统设置 → 隐私与安全性 → 防火墙」中临时关闭测试）
验证方法：终端执行 netstat -an | grep :<your-port></your-port>，看到 *.<your-port></your-port> 或 *.63342 表示已监听所有接口；若只显示 127.0.0.1.<your-port></your-port>，说明配置未生效。
WebStorm 调试配置里 Remote URL 总是映射失败
Remote URL 映射失效，常见于路径前缀不一致。比如你在浏览器地址栏打开的是 http://192.168.1.100:5173/，但 WebStorm 调试配置里填的 Remote URL 是 webpack:///src 或 vite:///src —— 这类协议前缀只对 localhost 有效，真机访问时 Chrome 实际加载的是普通 HTTP 资源，Source Map 无法按协议匹配。
立即学习“前端免费学习笔记（深入）”；
正确做法是关闭 WebStorm 的 JavaScript Debug 配置，改用 Node.js 启动调试：
- 新建 Node.js 运行配置，
JavaScript file填node_modules/vite/bin/vite.js -
Application parameters填dev --host 0.0.0.0 --port 5173 - 务必勾选
--inspect-brk，并设Working directory为项目根目录 - 启动后，Chrome 自动连上调试器，Sources 面板会显示
file://下的原始.vue文件，而非 chunk
注意：webpack:/// 和 vite:/// 是构建工具注入的虚拟协议，只在 localhost + dev server 场景下由浏览器解析；真机访问时，这些前缀不会被识别，强行填会导致断点永远不命中。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
手机能打开页面但断点不触发
表面能访问，实际 Source Map 没加载成功。最常被忽略的是 TypeScript 编译层干扰：即使 Vite 开启了 sourcemap，如果 tsconfig.json 里 "sourceMap": false 或缺失该字段，TS 编译器就不会生成 .map 文件，Vite 也就无 map 可用。
检查步骤：
- 打开 Chrome DevTools → Sources → 切换到 Page 标签页，展开左侧文件树，找有没有
src/xxx.vue或src/xxx.ts（不是chunk-xxx.js） - 右键任意 JS 文件 → “Save as” → 看保存下来的是否带
//# sourceMappingURL=xxx.map注释 - 确认
tsconfig.json中"compilerOptions": { "sourceMap": true }已启用
Vue 3 的 <script setup> 语法对 Source Map 更敏感：断点必须打在组合式 API 函数内部（如 onMounted(() => { debugger })），不能打在顶层响应式声明上（如 const count = ref(0)），否则编译后行号完全错位。
Mac 上热点共享后手机连不上
Mac 热点默认开启防火墙且限制入站连接，即使 Vite 监听了 0.0.0.0，手机仍可能被系统拦截。
临时放行命令（终端执行）：
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --setglobalstate off
更稳妥的做法是不用 Mac 热点，改用 USB 网络共享或路由器同网段 —— 真机调试本质是局域网通信，只要手机和电脑在同一子网、端口开放、服务监听全接口，就一定能通。反复失败时，优先排查网络拓扑，而不是折腾 WebStorm 配置。
