VS Code 里双击打开 HTML 文件为啥不显示效果
因为浏览器直接读取本地 file:// 路径时，很多现代 API（比如 fetch、import、Service Worker）会被禁用，连相对路径的 CSS/JS 都可能 404。这不是 VS Code 的问题，是浏览器安全策略。
实操建议：
- 别双击 HTML 文件，也别拖进浏览器——一律用“启动本地服务器”方式预览
- 最轻量方案：安装 VS Code 官方插件
Live Server，右键 HTML 文件 →Open with Live Server - 如果不用插件，终端进项目目录，运行
python3 -m http.server 8000（Python 3）或npx http-server（需 Node），然后访问http://localhost:8000/xxx.html
Live Server 插件点开没反应或端口被占怎么办
常见现象：右键没 Open with Live Server，或点了弹出错误 address already in use :::5500。
原因和解法：
立即学习“前端免费学习笔记（深入）”；
- 插件没启用：检查左下角状态栏有没有
Live Server图标；没有就去扩展页搜Live Server并启用 - 端口冲突：默认用 5500，被其他程序（比如另一个 VS Code 窗口、旧的 Live Server 进程）占了；改端口：在 VS Code 设置里搜
liveServer.settings.port，改成5501或其他空闲端口 - 文件不在工作区根目录：Live Server 默认只对当前工作区（
File → Open Folder打开的文件夹）里的 HTML 生效；如果只是单个文件，先用Open Folder包一层再试
HTML 里引用 JS/CSS 路径总 404 怎么排查
不是代码写错，大概率是路径写法和服务器根目录不匹配。Live Server 把工作区根目录当作 /，和双击打开的 file:// 行为完全不同。
关键判断点：
-
src="script.js"→ 相对于当前 HTML 所在目录（推荐，最不容易错） -
src="/script.js"→ 相对于工作区根目录（必须确保script.js真在根目录下） -
src="../js/script.js"→ 上级目录的js/文件夹，注意层级数别多算少算 - 浏览器按
F12→Network标签，看 404 的请求地址，对照文件树确认真实路径
为什么改了 HTML 刷新页面没更新，或者 CSS 不生效
不是 VS Code 没保存，而是浏览器缓存太强，尤其用了 Live Server 后它会自动刷新，但有时 JS/CSS 仍走缓存。
快速解决：
- 强制刷新：Windows/Linux 按
Ctrl + F5，macOS 按Cmd + Shift + R - 开发时关掉缓存：F12 →
Network标签 → 勾选Disable cache（仅 DevTools 开着时有效） - CSS 不生效？检查是否被其他样式覆盖（F12 里看 computed 样式）、
link标签是否漏写rel="stylesheet"、路径是否真加载成功（Network 里 status 是 200）
复杂点在于：Live Server 的自动刷新依赖文件系统通知，某些远程文件系统（如 WSL2 挂载的 Windows 目录）或杀毒软件会干扰监听，导致改了代码也不刷新——这时候只能手动刷新，或把项目移到原生 Linux 文件系统里。
