HBuilderX本地调试H5需配置manifest.json的h5→devServer：设port、disableHostCheck:true、https:true；HTTPS调试推荐mkcert生成localhost.pem/key并内联路径，避免“no start line”错误。
在HBuilderX中快速预览H5页面并完成本地调试配置，是前端开发日常中最频繁的操作之一——你改完一行CSS，需要立刻看到真机级渲染效果；你加了一段地理位置API调用，必须确认HTTPS上下文已就绪；你遇到白屏或console报错，得让日志实时回传到IDE控制台。
运行到浏览器：三步启动本地H5预览
打开HBuilderX，确保项目已保存且index.html处于编辑状态。
点击顶部菜单【运行】→【运行到浏览器】→【Chrome】（若未安装Chrome，请先下载并设为系统默认浏览器）。
此时HBuilderX自动启动本地服务（默认端口8080），并在Chrome中打开http://127.0.0.1:8080。页面即刻加载，支持F5刷新、Ctrl+R重载，无需手动启服务。
H5本地调试核心配置：修改manifest.json
在项目根目录下找到manifest.json文件，双击打开，切换至【源码视图】。
定位到"h5"节点，在其内部添加"devServer"对象：
"h5": {
"devServer": {
"port": 8080,
"disableHostCheck": true,
"https": false
}
}
【port必须与浏览器实际访问端口一致，否则页面空白无响应】
保存后，再次执行【运行到浏览器】，新配置立即生效。
启用HTTPS调试（适配Camera/GPS等敏感API）
方法一：一键开启HTTPS（不验证证书）
将manifest.json中"https": false改为"https": true，保存并重启运行。
方法二：配置自签名证书（推荐用于需真实权限测试）
① 安装mkcert工具：brew install mkcert（macOS）或从GitHub下载Windows版；
② 执行mkcert localhost，生成localhost.pem和localhost-key.pem；
③ 将两个文件放入项目根目录，在manifest.json中补全路径：
"devServer": {
"https": true,
"cert": "./localhost.pem",
"key": "./localhost-key.pem"
}
【证书文件必须为PEM格式，且路径为相对路径（以项目根目录为基准）】
解决常见白屏与跨域问题
第一步：检查控制台是否报Invalid Host header。
若出现，确认manifest.json中"disableHostCheck": true已写入h5 → devServer层级，不是放在顶层或"mp-weixin"下。
第二步：若调用本地后端接口失败，检查是否启用了代理。
在manifest.json的"h5" → "devServer"中加入proxy配置：
"proxy": {
"/api": {
"target": "http://localhost:3000",
"changeOrigin": true,
"secure": false
}
}
第三步：保存manifest.json后，必须关闭当前浏览器标签页并重新运行，缓存会导致配置不生效。
