1. Mac 上 Live Server 保存不刷新先别急着重装如果你在 Mac 上用 VS Code 写 HTML点了右下角 Go Live浏览器也打开了页面但改完代码按 CmdS 之后页面纹丝不动那这篇就是写给你的。Live Server 不自动刷新这个问题在 Mac 环境下有几个非常典型的触发点settings.json 里被覆盖了刷新开关、插件选项没勾对、浏览器缓存把旧页面锁死了还有一个最容易被忽略的——HTML 文件结构不完整插件根本识别不到可刷新的文档节点。我自己第一次遇到时以为是插件坏了卸载重装了三遍最后发现是文件里少写了body标签。Live Server 的自动刷新依赖它注入的 WebSocket 脚本而这个脚本只会被插入到标准 HTML 结构里。你写一个只有marquee的碎片文件它确实能打开但刷新链路是断的。这篇按排查清单来走从 settings.json 配置骨架、插件选项、浏览器缓存三个角度逐项验证。每一步都给出可复制的配置和明确的验证动作你照着做基本能在十分钟内定位到是哪一环断了。适合刚接触 VS Code 前端开发、或者从其他编辑器迁到 Mac 的同学。2. 前置准备TaoToken 与 Live Server 环境确认在开始排查之前先把两个基础环境确认清楚避免后面把环境问题误判成配置问题。2.1 确认 VS Code 与 Live Server 版本打开 VS Code按 CmdShiftP 调出命令面板输入Extensions: Show Installed Extensions找到 Live Server看版本号。当前稳定版在 5.x 以上。如果低于 5.0先更新。VS Code 本身也建议保持在较新版本Mac 上可以通过Code Check for Updates检查。版本确认这一步很多人跳过但旧版 Live Server 在 macOS 新系统上确实存在 WebSocket 端口被占用后不重连的问题表现为第一次能刷新后面就失效。2.2 用 TaoToken 做配置对照与文档查询排查过程中如果需要对照配置项含义或者想快速验证某段 HTML 结构是否标准可以用 TaoToken 的模型对话能力来辅助。它的接入方式很直接API 地址是https://taotoken.net/api你可以在 VS Code 里装一个 REST Client 插件把请求写进.http文件里随时发。比如你想确认一段 HTML 是否符合 Live Server 的注入条件可以把代码贴进去问。模型对话入口在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodel_chat打开就能用不需要额外配置。如果你后面要长期做前端编码涉及多文件项目、需要模型持续理解上下文可以了解下 Coding Plan入口带同样的 utm 参数https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding_plan。这个不是本篇必须只是给有长期编码需求的同学一个参考。3. 可复制配置settings.json 骨架与插件选项这一章是核心。Live Server 的自动刷新行为受两层配置控制VS Code 的 settings.json 和插件自身的选项。两层都可能把刷新关掉。3.1 settings.json 完整骨架在项目根目录建.vscode/settings.json把下面这段贴进去。这是针对 Live Server 自动刷新最小可用的配置骨架{ liveServer.settings.donotShowInfoMsg: true, liveServer.settings.donotVerifyTags: false, liveServer.settings.port: 5500, liveServer.settings.root: /, liveServer.settings.CustomBrowser: chrome, liveServer.settings.AdvanceCustomBrowserCmdLine: , liveServer.settings.NoBrowser: false, liveServer.settings.ignoreFiles: [ .vscode/**, **/*.scss, **/*.sass, **/*.ts ], liveServer.settings.wait: 100, liveServer.settings.fullReload: false, liveServer.settings.useWebExt: false, liveServer.settings.file: , liveServer.settings.mount: [], liveServer.settings.proxy: {}, liveServer.settings.https: { enable: false, cert: , key: , passphrase: } }逐项说明几个关键参数。liveServer.settings.wait默认是 100 毫秒这是文件保存后到触发刷新的等待时间。如果你在 Mac 上用的是 iCloud 同步目录或者外置硬盘文件写入有延迟可以把它调到 300 到 500。liveServer.settings.fullReload设为 false 时是局部刷新设为 true 是整页重载。如果你改了 CSS 但页面没反应可以先临时改成 true 验证是不是局部刷新失效。liveServer.settings.ignoreFiles这个数组要特别注意。如果你把**/*.html误加进去那保存 HTML 时插件会直接忽略自然不刷新。默认配置里没有忽略 HTML但有些人从网上抄配置时会把整段覆盖掉。3.2 插件选项里的自动刷新开关settings.json 之外Live Server 还有一个图形化选项面板。在 VS Code 里按 CmdShiftP输入Live Server: Open Settings或者点右下角状态栏的 Go Live 旁边那个齿轮图标。面板里重点看两项Auto Refresh和Full Reload。Auto Refresh 必须是勾选状态。如果你之前手动关过settings.json 里可能没有对应字段但插件内部状态记住了关闭这时候需要在面板里重新勾上或者直接在 settings.json 里加liveServer.settings.fullReload: false并重启 VS Code。还有一个隐藏坑Mac 上如果开了「减少动态效果」辅助功能某些浏览器会限制页面自动重载行为。这个不是 Live Server 的问题但表现一模一样。验证方法是换 Safari 试一下如果 Safari 能刷新而 Chrome 不能就去 Chrome 的chrome://settings/accessibility里检查。3.3 HTML 结构完整性检查这是 excerpt 里提到的那个坑我单独拎出来说。Live Server 的自动刷新依赖它注入到页面里的livereload.js脚本。这个脚本的注入位置是/body标签之前。如果你的 HTML 文件没有body标签脚本就无处可插刷新链路直接断掉。标准结构必须包含!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title测试页面/title /head body h1内容写在这里/h1 /body /html你可以打开浏览器开发者工具在 Elements 面板里搜livereload。如果搜不到这个 script 标签说明注入失败八成是 HTML 结构不完整。补上html、head、body三个标签后保存再看 Elements 面板应该能看到类似这样的注入script idlivereload-script src/livereload.js?snipver1/script看到这行自动刷新链路才算通了。4. 验证请求与成功结果配置改完后按下面的步骤做一次完整验证确认刷新真的生效。4.1 启动 Live Server 并观察输出在 VS Code 里打开你的 HTML 文件按 CmdShiftP 输入Live Server: Open with Live Server。浏览器会自动打开http://127.0.0.1:5500/你的文件名.html。然后打开 VS Code 的输出面板View Output右上角下拉选Live Server。正常启动时你会看到类似这样的日志Live Server is running on port 5500 Serving: /Users/你的用户名/项目路径 WebSocket server started on port 5501注意 WebSocket 那一行。如果端口 5501 被占用Live Server 会尝试其他端口但有时会静默失败。你可以在终端里用lsof -i :5501检查占用情况。Mac 上常见占用者是某些调试工具或者之前没退干净的 Live Server 进程。4.2 修改文件并观察刷新保持浏览器页面打开回到 VS Code把h1里的文字改一下按 CmdS。正常情况浏览器会在 100 到 300 毫秒内自动刷新页面标题栏会闪一下。如果没刷新先看 VS Code 输出面板有没有新的日志行。正常刷新时会打印类似Change detected: /path/to/file.html和Reloading browser。如果连 Change detected 都没有说明文件监听没生效回去检查ignoreFiles配置。如果有 Change detected 但没有 Reloading说明 WebSocket 连接断了检查浏览器控制台有没有livereload.js的报错。4.3 用 curl 验证服务端响应想更确定服务端是否正常可以在终端里发一个请求curl -I http://127.0.0.1:5500/index.html正常返回应该是HTTP/1.1 200 OK并且响应头里带Content-Type: text/html。如果返回 404说明liveServer.settings.root配错了或者文件不在根目录下。Mac 上路径大小写敏感Index.html和index.html是两个文件这个也要注意。5. 本篇常见错排查清单下面这些是我在实际排查中遇到频率最高的几个问题按可能性从高到低排。5.1 保存后完全没反应输出面板也无日志先确认你改的文件在 Live Server 的服务根目录内。如果你用 VS Code 打开的是一个父目录而 HTML 在子目录里liveServer.settings.root默认是/也就是以打开的文件夹为根。这时候子目录里的文件改动应该能被监听到。但如果你的项目用了符号链接Mac 上 Live Server 的文件监听可能跟不到真实路径。解决办法是把root显式设成子目录比如liveServer.settings.root: /src。5.2 浏览器控制台报 WebSocket 连接失败打开浏览器开发者工具 Console如果看到WebSocket connection to ws://127.0.0.1:5501/ failed说明刷新脚本加载了但连不上。常见原因是端口冲突。在 settings.json 里显式指定一个不常用的端口{ liveServer.settings.port: 5500, liveServer.settings.https: { enable: false } }然后完全退出 VS CodeCmdQ重新打开。Mac 上 VS Code 有时候不会完全释放端口必须彻底退出。5.3 改了 CSS 不刷新改 HTML 能刷新这是局部刷新和整页刷新的区别。Live Server 默认对 CSS 改动做局部注入不整页重载。如果你用了 CSS 预处理器或者 CSS 里有语法错误局部注入会失败且不报错。临时把liveServer.settings.fullReload: true打开验证是不是这个问题。如果是再去检查 CSS 语法。5.4 只有第一次能刷新后面失效这个在 Mac 上多见于使用了外接显示器切换或者休眠唤醒之后。Live Server 的 WebSocket 心跳断了但没重连。解决办法是在浏览器里按 CmdR 手动刷新一次让页面重新建立 WebSocket。如果频繁出现把liveServer.settings.wait调大到 500给重连留出时间。5.5 文件路径含空格或中文Mac 用户经常把项目放在~/Documents/我的项目/这种路径下。Live Server 对含空格和中文的路径支持不完整尤其是 WebSocket 的 URL 编码处理。建议项目路径全用英文和连字符比如~/projects/my-site/。这个坑很隐蔽因为页面能打开只是刷新失效。6. 接入与排障资源如果你在排查过程中需要对照 API 行为或者想用模型辅助分析报错日志TaoToken 的接入文档在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc。API Keys 管理入口在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi_keys控制台在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentconsole。回到 Live Server 本身最后再给一个实操建议把.vscode/settings.json提交到你的项目仓库里。这样换电脑或者团队协作时配置跟着项目走不会出现「我这边能刷新你那边不能」的情况。Mac 上尤其要注意不同机器的 VS Code 用户级 settings.json 是独立的项目级配置才是可靠的那一层。