Live Server是最直接有效的HTML预览方案，但仅适用于需HTTP协议支持的场景；双击打开因使用file://协议，会导致fetch、ES模块导入、localStorage等API受限或失败。
Live Server 是最直接有效的方案，但不是所有 HTML 场景都适合——关键看你要不要 HTTP 协议支持。
为什么不能直接双击 HTML 文件运行？
双击或用 Open in Default Browser 打开的是 file:// 协议页面。它不走 HTTP，会导致：
• fetch() 或 XMLHttpRequest 请求跨域失败（即使本地文件）
• ES 模块（import）加载报错：“Not supported in a document with no base URI”
• 本地 localStorage、Service Worker 等 API 可能受限或行为异常
• 开发时调试 AJAX 接口、前后端联调完全不可行
Live Server 启动后页面不自动刷新？
这不是插件坏了，而是监听机制没覆盖到你改的文件或路径。常见原因和对策：
- 修改了非当前目录下的 CSS/JS 文件（比如放在
src/或assets/），但 Live Server 默认只监听同级及子目录——检查liveServer.settings.root是否设对了 - 保存时文件未真正写入磁盘（如某些编辑器启用“延迟写入”或“原子保存”），可尝试关掉 VSCode 的
files.autoSave改为手动保存再试 - 浏览器缓存强干扰：开发者工具 → Network 标签页 → 勾选
Disable cache（仅 DevTools 开着时生效） - 用了符号链接（symlink）或网络挂载盘，Live Server 默认不追踪这类路径——需在
settings.json中加"liveServer.settings.useLocalIp": true并确认防火墙放行端口
怎么让 Live Server 用 Chrome 而不是默认浏览器？
VSCode 不会自动读取系统默认浏览器设置，必须显式配置：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 设置（
Ctrl+,），搜索live server custombrowser - 找到
Live Server > Settings: CustomBrowser，设为"chrome"（Windows/macOS/Linux 都认这个值） - 如果 Chrome 不在标准路径（比如便携版或自定义安装），还需配
Live Server > Settings: CustomBrowserPath，填绝对路径，例如："C:\Program Files\Google\Chrome\Application\chrome.exe" - 注意：改完设置后，已启动的 Live Server 不会自动切换浏览器，需右键重新选
Open with Live Server
HTTPS 本地预览必须自己搞证书？
是的，Live Server 原生不提供可信 HTTPS，但启用它比想象中轻量：
- 不需要 OpenSSL 命令行；用
mkcert更简单：choco install mkcert（Win）或brew install mkcert（macOS），然后执行mkcert -install && mkcert localhost，生成localhost.pem和localhost-key.pem - 在 VSCode 设置里开启
Live Server > Settings: Https，并把两个文件路径分别填进Cert和Key项 - 重启 Live Server，地址就变成
https://127.0.0.1:5500，浏览器不会报“不安全”，Service Worker也能注册 - ⚠️ 注意：每次换项目目录都要复制证书过去，或统一放在工作区根目录下，避免路径失效
端口冲突、局域网访问、多页面共享状态——这些都不是边缘问题，而是日常开发中大概率踩中的点。配置本身不难，难的是改完设置后没意识到要重开服务，或者误以为“开了 HTTPS 就万事大吉”，结果发现证书路径写错了一级目录。
