如何在浏览器中实时查看频繁更新的原始JSON文件（无需手动刷新）

以下几个方案可以满足你直接查看原始JSON文件并实时获取变更的需求：

方案1：浏览器扩展自动刷新 #

找支持文件变更监控+自动刷新的浏览器扩展，这类工具可以：

• 让你直接在浏览器中打开JSON文件（无论是本地file://协议还是远程HTTP地址）
• 自动检测文件的修改时间变化，一旦文件更新就自动刷新页面
• 保留浏览器原生的JSON格式化视图（就是打开JSON时默认的结构化、可折叠的显示效果）

方案2：本地极简HTTP服务+Server-Sent Events（SSE） #

如果直接打开本地JSON文件存在权限限制，或者需要更可靠的实时推送，可以搭一个超简单的Node.js服务，既提供JSON文件访问，又能实时通知浏览器更新：

1. 创建一个server.js脚本，内容如下：

const http = require('http');
const fs = require('fs');
const path = require('path');

// 替换成你的JSON文件路径
const jsonFilePath = path.resolve('./your-target.json');
const serverPort = 3000;

let lastFileModifyTime = fs.statSync(jsonFilePath).mtime;

const server = http.createServer((req, res) => {
  // 主页面：展示原始JSON并监听更新
  if (req.url === '/') {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(`
      <style>pre { white-space: pre-wrap; font-family: monospace; }</style>
      <pre id="raw-json"></pre>
      <script>
        // 加载初始JSON内容
        function loadJson() {
          fetch('/raw-json')
            .then(res => res.text())
            .then(content => document.getElementById('raw-json').textContent = content);
        }
        loadJson();

        // 监听SSE更新通知
        const eventSource = new EventSource('/update-notify');
        eventSource.onmessage = () => loadJson();
      </script>
    `);
  }
  // 提供原始JSON内容
  else if (req.url === '/raw-json') {
    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(fs.readFileSync(jsonFilePath));
  }
  // SSE更新推送端点
  else if (req.url === '/update-notify') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    // 每秒检查一次文件是否更新
    const checkInterval = setInterval(() => {
      fs.stat(jsonFilePath, (err, stats) => {
        if (err) return;
        if (stats.mtime > lastFileModifyTime) {
          lastFileModifyTime = stats.mtime;
          res.write('data: refresh\n\n');
        }
      });
    }, 1000);

    // 客户端断开连接时清理定时器
    req.on('close', () => clearInterval(checkInterval));
  }
});

server.listen(serverPort, () => {
  console.log(`服务已启动：http://localhost:${serverPort}`);
});

2. 在终端运行node server.js，然后打开浏览器访问http://localhost:3000，就能看到原始格式的JSON内容，文件每次更新都会自动刷新显示。

方案3：命令行工具触发浏览器刷新 #

如果你习惯用命令行，可通过以下步骤实现：

1. 先启动一个本地HTTP服务，比如用Python：

python3 -m http.server 8000

2. 用entr工具（需提前安装，比如brew install entr或apt install entr）监控JSON文件变化，触发浏览器刷新：

echo './your-target.json' | entr -s 'osascript -e "tell application \"Chrome\" to reload active tab of window 1"'

（注：上面的命令针对Chrome，若用Safari，把Chrome换成Safari即可）

打开浏览器访问http://localhost:8000/your-target.json，之后JSON文件更新时，命令行会自动触发浏览器刷新，保持原生JSON视图不变。

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