在VS Code中开发HTML网站时，如何实现页面自动刷新？

前端工具集成方案 #

• 使用live-server轻量工具：通过npm全局安装后，在项目根目录启动即可监听文件变化，自动刷新页面。安装命令：npm install -g live-server，启动直接运行live-server。
• 借助Webpack/Vite等构建工具：这类工具默认自带**热模块替换（HMR）**功能，修改代码后不仅自动刷新，还能保留页面状态，无需重载整个页面。比如用Vite初始化的项目，执行npm run dev就会自动开启热更新。

浏览器端无扩展方案 #

• 开发者工具+本地服务器：先搭建本地服务器（比如用Python命令python -m http.server），然后打开Opera的F12开发者工具，进入设置（齿轮图标），找到「网络」或「调试」板块，勾选「文件变化时自动重载页面」（不同版本位置略有差异）。
• 自定义监听脚本：在HTML中嵌入一段JS脚本，定时检测页面文件的修改时间，变化时自动刷新。示例代码：

// 放入HTML的<script>标签内
let lastModifiedTime = 0;
setInterval(async () => {
  const headResponse = await fetch(window.location.href, { method: 'HEAD' });
  const currentModified = new Date(headResponse.headers.get('Last-Modified')).getTime();
  if (currentModified > lastModifiedTime) {
    lastModifiedTime = currentModified;
    window.location.reload();
  }
}, 1000); // 每秒检查一次

Opera相关注意事项 #

之前安装的扩展无效大概率是权限不足或版本适配问题，建议优先尝试上述工具类方案，比浏览器扩展更稳定可靠。

内容的提问来源于stack exchange，提问作者Nguyễn Quang Đức