VS Code 保存后网页不自动刷新，需确认Live Server插件已手动启动且通过http://地址访问；检查文件路径是否正确、浏览器缓存是否清除、监听文件类型是否包含CSS/JS；端口冲突时查看状态栏报错并更换端口。

VS Code 保存后网页不自动刷新？检查 Live Server 插件是否真在运行

不是装了插件就等于生效——Live Server 必须手动启动，且只对当前打开的 HTML 文件生效。常见错误是双击 HTML 文件预览（用浏览器直接打开 file:// 协议），这时修改保存完全不会触发刷新。

• 右键点击你的 index.html → 选 Open with Live Server（不是“Open in Default Browser”）
• 确认右下角状态栏出现 Go Live 按钮变灰、并显示类似 http://127.0.0.1:5500/ 的地址
• 浏览器必须访问这个 http:// 地址，而非本地文件路径；关掉所有 file:// 标签页再试

为什么改了 CSS/JS 保存后页面没变？可能是缓存或路径问题

Live Server 确实监听保存事件，但浏览器可能拿缓存的旧资源，或者你引用的文件路径根本没被它托管。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 确保 <link rel="stylesheet" href="style.css"> 中的 style.css 和 HTML 在同一目录，或路径能被服务器解析（比如别写成 ../css/style.css 却没建对应文件夹）
• 按 Ctrl+Shift+R（Windows/Linux）或 Cmd+Shift+R（macOS）强制硬性刷新，绕过缓存
• 检查浏览器开发者工具（F12）的 Network 面板：保存后刷新时，style.css 和 script.js 的状态码是不是 304（缓存未变）或 404（路径错）

想保存就实时看效果，但不想装插件？用原生 browser-sync 更可控

Live Server 简单，但遇到多文件、代理、HTTPS 模拟等需求就卡住。browser-sync 命令行方式更透明，也方便以后迁移到构建流程。

• 全局安装：npm install -g browser-sync
• 在项目根目录运行：browser-sync start --server --files "*.html, *.css, *.js"
• 它会起一个本地服务，并自动注入刷新脚本；修改任意匹配的文件，所有已打开的页面都会刷新
• 注意：--files 参数必须明确列出要监听的扩展名，漏掉 *.css 就不会响应样式修改

改完代码还是没反应？先看终端有没有报错，再查端口冲突

Live Server 启动失败时，VS Code 不一定弹明显提示，它可能悄悄换端口或静默退出。

• 打开 VS Code 底部状态栏，找 Go Live 右侧的小三角 ▼，点开看有没有报错，比如 address already in use :::5500
• 如果端口被占，它会自动切到 5501，但浏览器还开着 5500 页面，自然收不到更新
• 临时解决：关掉其他占用 5500 的程序（如另一个 VS Code 窗口、Python 的 SimpleHTTPServer），或右键 Go Live → Change Port

改来改去没反应，八成不是代码问题，而是服务没跑起来、浏览器没连对地址、或者文件压根没被监听到——盯着状态栏和 Network 面板比反复保存十次更管用。