Windows开发环境下，如何实现浏览器（Chrome）文件变更后自动刷新HTML页面？

阿华AIGC实验室

2026-5-20

嘿，这个问题我太熟了！做前端开发的时候天天跟这个打交道，给你分享几个靠谱的办法，不管是不用额外工具的轻量方案，还是用Node.js的专业流程都能搞定：

不用Node.js的快速方案

如果你不想折腾工具，这两个方法足够应付日常需求：

Chrome开发者工具自带实验功能
按F12打开DevTools，点击右上角的齿轮图标进入设置，切换到「Experiments」标签页，勾选「Auto-reload upon save」，然后重启DevTools就行。之后你修改本地HTML/CSS/JS并保存，Chrome会自动刷新当前页面。不过这个功能偶尔会抽风，而且只对当前打开的页面生效。
VS Code插件快捷方案
直接装个「Live Server」插件，装完右键HTML文件选「Open with Live Server」，它会自动开个本地服务器，修改文件秒刷新，还能解决本地文件的跨域问题，比折腾Chrome扩展省心多了。

用Node.js实现专业自动刷新

如果需要更稳定、功能更多的方案，Node.js的工具绝对是首选，推荐两个最常用的：

live-server（极简省心）
先确保你已经装了Node.js，然后打开CMD或PowerShell，进入你的项目文件夹，依次运行：
```
npm install -g live-server
live-server
```
它会自动打开Chrome，帮你起个本地服务器，并且监听所有文件变化——只要你修改保存，页面立刻自动刷新。连路径都不用手动输，太省心了。
browser-sync（功能强大）
这个工具不仅能自动刷新，还支持多设备同步滚动、点击，适合做响应式测试。安装和使用步骤：
```
npm install -g browser-sync
# 进入项目文件夹后，监听所有文件变化并启动服务器
browser-sync start --server --files "*"
# 如果只想监听HTML/CSS/JS，可以更精准：
# browser-sync start --server --files "*.html, *.css, *.js"
```
运行后会给出本地访问地址，打开后修改文件就会自动刷新，多设备连同一个局域网还能同步操作。

自定义脚本（适合深度定制）
如果想搞懂底层原理，也可以自己写个简单的监听脚本。步骤如下：

项目文件夹里初始化npm：npm init -y
安装依赖：npm install chokidar ws

新建server.js文件，写入以下代码：

const chokidar = require('chokidar');
const WebSocket = require('ws');
const http = require('http');
const fs = require('fs');
const path = require('path');

// 创建静态文件服务器
const server = http.createServer((req, res) => {
  let filePath = '.' + req.url;
  if (filePath === './') filePath = './index.html';

  const extname = path.extname(filePath);
  let contentType = 'text/html';
  switch (extname) {
    case '.js': contentType = 'text/javascript'; break;
    case '.css': contentType = 'text/css'; break;
    case '.json': contentType = 'application/json'; break;
  }

  fs.readFile(filePath, (error, content) => {
    if (error) {
      if(error.code === 'ENOENT') {
        res.writeHead(404);
        res.end('File not found');
      } else {
        res.writeHead(500);
        res.end('Server Error: ' + error.code);
      }
    } else {
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content, 'utf-8');
    }
  });
});

const wss = new WebSocket.Server({ server });

// 监听项目文件变化
const watcher = chokidar.watch('.', { ignored: /node_modules/, persistent: true });

watcher.on('change', (path) => {
  console.log(`File ${path} updated`);
  // 通知所有连接的浏览器刷新
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send('refresh');
    }
  });
});

server.listen(8080, () => {
  console.log('Server running at http://localhost:8080');
});

在你的HTML文件底部添加WebSocket监听脚本：

<script>
  const ws = new WebSocket('ws://localhost:8080');
  ws.onmessage = (event) => {
    if (event.data === 'refresh') {
      window.location.reload();
    }
  };
</script>