监控网页变化有多种方式，以下是几种常见的方法

谷歌 Google解答 2026-04-09 4

浏览器扩展（推荐）

Distill Web Monitor

功能最全面的网页监控工具
支持视觉选择监控区域
可设置多种通知方式（邮件、推送等）
支持定时检查

Page Monitor

简洁易用
支持可视化选择监控区域
可设置检查频率

Visualping

视觉对比功能强大
支持截图对比
有免费额度

开发者工具方法

手动检查网络请求

// 在控制台监听网络请求
// 按F12打开开发者工具 -> Network标签
// 勾选Preserve log（保留日志）

监控DOM变化

// 在控制台执行以下代码监控DOM变化
const observer = new MutationObserver((mutations) => {
  console.log('DOM changed:', mutations);
});
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  characterData: true
});

监控控制台输出

// 重写console方法
const originalLog = console.log;
console.log = function(...args) {
  originalLog.apply(console, args);
  // 记录日志或发送到服务器
};

编程方式

使用Puppeteer（Node.js）

const puppeteer = require('puppeteer');
async function monitorWebsite(url, selector) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  let previousContent = '';
  setInterval(async () => {
    await page.goto(url);
    const currentContent = await page.$(selector);
    const text = await page.evaluate(el => el.textContent, currentContent);
    if (text !== previousContent) {
      console.log('Content changed:', text);
      previousContent = text;
    }
  }, 5000); // 每5秒检查一次
}