真机调试需确保网络通、协议对、工具链稳：Android须用Chrome for Android访问HTTP服务而非file://，adb devices显示device状态并开启USB调试安全选项；iOS需开启Safari高级设置中的Web检查器及Mac Safari开发菜单，首次连接确认信任；手机访问须用局域网IP而非localhost，服务绑定0.0.0.0并关闭防火墙；HTTPS等场景可用ngrok；viewport必须置于head最前，避免100vh误差，资源路径需适配不同连接方式。
真机调试不是“能连上就行”，而是必须让网络通、协议对、工具链稳，否则 chrome://inspect 里永远空着，或者连上了却看不到页面。
Android Chrome 远程调试连不上？先过这三关
连不上最常见原因不是线坏了，是设备没真正被 Chrome 认作“可调试目标”：
- 手机端必须用
Chrome for Android打开页面，file://协议绝对不行——得启动本地 HTTP 服务，比如python3 -m http.server 8000，再用手机访问http://192.168.x.x:8000/index.html - 电脑端运行
adb devices必须看到状态为device，不是unauthorized；若出现后者，手机弹窗里要勾选“始终允许来自这台计算机” - 部分国产机型（如小米、华为）需额外开启「USB 调试（安全设置）」或关闭「MIUI 优化」「EMUI 优化」，否则
adb可识别设备，但 Chrome 不显示网页标签页
iOS Safari Web Inspector 显示空白或卡死？检查这几个隐藏开关
iOS 真机调试依赖 macOS Safari 的开发菜单，但很多失败都卡在细节上：
- iPhone 设置中必须打开：「设置 → Safari → 高级 → Web 检查器」
- Mac Safari 偏好设置中必须勾选：「高级 → 在菜单栏中显示“开发”菜单」
- 首次连接需在 iPhone 弹出的「信任此电脑」窗口点确认；若跳过，后续所有调试请求都会静默失败
- iOS 16.4+ 版本下，页面含
document.write()或未关闭的console.debug()会导致 Inspector 卡白屏——临时注释掉再连
为什么手机访问 localhost 总是 404？这不是代码问题
localhost 对手机来说是它自己的回环地址，根本到不了你的开发机。必须改用局域网 IP：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 查开发机 IP：
ipconfig（Windows）或ifconfig（macOS/Linux），找IPv4 地址或inet开头那一行 - 服务启动时绑定到
0.0.0.0:3000，而不是默认的127.0.0.1:3000；Vite 项目加--host 0.0.0.0，Create React App 加HOST=0.0.0.0 - 手机浏览器访问
http://192.168.x.x:3000，注意关闭开发机防火墙或放行对应端口 - 需要 HTTPS、WebSocket 或跨域调试？用
ngrok http 3000，免费版每小时换域名，但能绕过所有本地网络限制
Device Mode 模拟器里样式正常，真机却错乱？viewport 和路径才是元凶
模拟器只骗过了 viewport 宽度，骗不过真实 UA、渲染引擎和资源加载路径：
-
必须放在最前面，漏写或位置靠后，iOS/Android 都会以桌面宽度渲染，vw/rem全失效 - 真机上用相对路径引用 CSS/JS（如
./css/style.css）在不同访问方式下行为不一致：USB 调试走adb reverse时路径解析基于手机本地，而局域网访问基于服务器根目录——建议统一用绝对路径或构建时处理 - iOS 中
100vh不准，因地址栏动态遮挡；不要依赖它做全屏布局，改用100%-webkit-fill-available或 JS 动态计算可用高度
真机调试最易被忽略的，是每次换一种连接方式（USB reverse / 局域网 IP / ngrok），页面里的资源路径、CORS 策略、甚至 window.location.origin 都可能悄然变化——别只盯着控制台报错，先确认 Network 面板里每个请求的状态码和响应内容是否真的到达了手机浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
