HBuilderX“运行到浏览器”空白页主因是未正确打开并保存index.html文件，且项目根目录需与其一致；应通过右键index.html选择“在内置浏览器中运行”，确保路径、协议和服务上下文匹配。
点击“运行到浏览器”按钮就能预览，但路径必须正确
HBuilderX 不会自动识别 index.html 为入口页——它只按当前活动文件来运行。如果你在项目根目录下有 index.html，但当前编辑器标签页打开的是 style.css 或其他文件，点“运行到浏览器”会报错或打开空白页。
确保操作前：
- 在编辑器中**真正打开了 index.html 文件**（标签页显示该文件名）
- 文件已保存（未保存的修改不会被预览）
- 项目根目录就是该 index.html 所在目录（否则相对路径资源如 ./js/app.js 可能加载失败）
右键菜单里选“在内置浏览器中运行”最稳妥
比顶部工具栏按钮更可靠，尤其当项目结构较深时。右键点击资源管理器中的 index.html 文件 → 选择“在内置浏览器中运行”，HBuilderX 会生成一个类似 http://127.0.0.1:8080/index.html 的本地服务地址，并自动打开内置浏览器预览。
这个方式绕过了“当前活动文件”限制，也避免了因误开其他文件导致的 404 错误。注意：
- 内置浏览器不支持部分新 API（如 navigator.mediaDevices.getUserMedia），需要真浏览器调试时请选“在 Chrome 中运行”
- 若提示端口被占用，可在 设置 → 运行配置 → Web服务器端口 修改默认 8080
用 Live Server 插件解决刷新延迟和跨域问题
HBuilderX 自带的预览服务对静态资源（尤其是 AJAX 请求、fetch 调用）默认禁用跨域，直接双击打开 file:// 协议又会触发浏览器安全策略。这时候装个 Live Server 插件更实用：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
安装后右键 index.html → “使用 Live Server 启动”，它会起一个真实 HTTP 服务（如 http://localhost:5500/），支持：
- 自动刷新（保存即更新，不用手动 F5）
- 正常处理 fetch('/api/data.json') 这类相对路径请求
- 允许前端调用本地 mock 接口（只要同域）
- 支持 HTTPS 切换（需额外配置证书）
预览时控制台报“找不到 JS/CSS”大概率是路径写错了
常见错误现象：index.html 能打开，但页面空白，F12 看控制台一堆 404，比如 GET http://127.0.0.1:8080/js/main.js net::ERR_ABORTED 404。这不是 HBuilderX 的问题，而是 HTML 里的路径没跟项目结构对齐。
立即学习“前端免费学习笔记（深入）”；
检查这三点：
- <script src="js/main.js"></script> 是相对路径，意味着 js/main.js 必须在项目根目录下的 js/ 子目录里
- 如果你把 index.html 放在 src/ 文件夹里，就得改成 <script src="../js/main.js">
- 避免用绝对路径 /js/main.js（它会从域名根开始找，不是项目根）
HBuilderX 预览本身很简单，真正卡住人的永远是路径、协议、服务上下文这三件事。别急着查“怎么配置”，先盯住地址栏里那个 URL，再对照文件树看资源到底在哪儿。
