谷歌浏览器监控网页变化有多种方法，可以根据需求选择适合的方式

谷歌 Chrome官方 2026-04-09 3

浏览器自带工具

开发者工具（DevTools）

DOM变化监控：
- 打开 DevTools（F12）
- 右键点击元素 → "Break on" → 选择断点类型
- 支持子节点修改、属性修改、节点移除

控制台监听：

// 监控整个文档变化
new MutationObserver(mutations => {
  console.log('DOM changed:', mutations);
}).observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

浏览器扩展程序

扩展使用示例：

安装后设置监控频率（几分钟到几小时）
指定监控区域（CSS选择器）
设置通知方式（浏览器通知、邮件等）

编程方式监控

Chrome扩展开发

// content_script.js
const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('子节点变化');
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

书签脚本（Bookmarklet）

创建包含以下代码的书签：

javascript:(function(){
  new MutationObserver(m => console.log('变化:', m))
    .observe(document.body, {subtree:true, childList:true});
  alert('开始监控页面变化');
})();

高级监控方案

Puppeteer/Playwright自动化

// Puppeteer示例
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  let previousContent = '';
  setInterval(async () => {
    const currentContent = await page.$eval('#content', el => el.innerHTML);
    if (currentContent !== previousContent) {
      console.log('内容已更新');
      previousContent = currentContent;
    }
  }, 5000);
})();

网页变化API服务

第三方服务：Visualping、ChangeDetection
自建服务：使用无头浏览器定期抓取对比

实用技巧

监控特定内容

// 监控价格变化
const priceElement = document.querySelector('.price');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    console.log('价格变化:', mutation.target.textContent);
  });
});
observer.observe(priceElement, { characterData: true, subtree: true });