VSCode Live Server扩展修改HTML/CSS后无法自动刷新页面求助

基础检查项 #

• 确认styles.css和HTML文件在同一目录下，路径没有拼写错误。路径错误不仅会导致CSS不生效，还可能干扰Live Server的文件监听逻辑。
• 务必在VSCode中打开整个项目文件夹，而非单独打开HTML文件。Live Server需要监听整个工作区的文件变动，单独打开单文件会导致监听失效。

调整Live Server配置 #

• 移除冲突的浏览器设置：你同时配置了liveServer.settings.AdvanceCustomBrowserCmdLine和liveServer.settings.CustomBrowser，这两个选项会互相冲突。建议保留后者，删除前者。
• 关闭useWebExt选项：liveServer.settings.useWebExt是配合Live Server专属浏览器扩展使用的，如果你没装对应的浏览器扩展，开启这个选项会直接导致自动刷新失效，改成false即可。
• 修正JSON语法错误：你的配置最后一行"liveServer.settings.CustomBrowser": "chrome",多了一个尾逗号，这会导致VSCode无法正确读取配置，删掉这个逗号。修改后的配置如下：

{
    "files.autoSave": "afterDelay",
    "liveServer.settings.fullReload": true,
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "liveServer.settings.wait": 3,
    "liveServer.settings.CustomBrowser": "chrome"
}

其他排查手段 #

• 开启浏览器禁用缓存：打开Chrome开发者工具（F12），在Network面板勾选「Disable cache」，避免浏览器缓存旧内容导致修改不显示。
• 重启Live Server和VSCode：有时候扩展进程会卡住，完全关闭VSCode后重新打开，再右键HTML文件选择「Open with Live Server」重启服务。
• 更新Live Server版本：旧版本可能存在已知bug，去VSCode扩展市场把Live Server更到最新版。

内容的提问来源于stack exchange，提问作者Kostyapp