在谷歌浏览器中监控网页变化，主要有以下几种方法

谷歌 Chrome2026 2026-04-09 5

浏览器内置方法

开发者工具 - DOM 变化监控

按 F12 或右键选择"检查"打开开发者工具
右键点击任意元素 → "Break on" → 选择：
- Subtree modifications（子树修改）
- Attributes modifications（属性修改）
- Node removal（节点移除）

控制台使用 MutationObserver API

// 在控制台中运行
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        console.log('变化类型:', mutation.type);
        console.log('变化的节点:', mutation.target);
    });
});
// 开始监控整个文档
observer.observe(document, {
    childList: true,      // 监控子元素变化
    subtree: true,        // 监控所有后代
    attributes: true,     // 监控属性变化
    characterData: true   // 监控文本内容变化
});
// 停止监控
// observer.disconnect();

浏览器扩展程序

自动化脚本方法

使用 Puppeteer（Node.js）

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    // 监控特定元素变化
    await page.exposeFunction('onChange', () => {
        console.log('页面内容已变化！');
    });
    await page.evaluate(() => {
        const target = document.querySelector('#target');
        const observer = new MutationObserver(() => {
            window.onChange();
        });
        observer.observe(target, { childList: true, subtree: true });
    });
    // 保持浏览器打开
})();

使用 Selenium（Python）

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://example.com")
previous_content = driver.page_source
while True:
    time.sleep(5)
    current_content = driver.page_source
    if current_content != previous_content:
        print("页面发生变化！")
        previous_content = current_content

实用技巧

监控特定元素

// 监控ID为"content"的元素
const target = document.getElementById('content');
const observer = new MutationObserver((mutations) => {
    console.log('目标元素已更新');
});
observer.observe(target, { childList: true, subtree: true });

监控网络请求

在开发者工具的 Network 标签中：

查看XHR/Fetch请求
使用过滤器筛选特定请求
右键请求 → "Save as HAR with content"

保存页面快照对比

// 定期比较页面内容
let lastHTML = document.documentElement.outerHTML;
setInterval(() => {
    const currentHTML = document.documentElement.outerHTML;
    if (lastHTML !== currentHTML) {
        console.log('页面整体变化检测到！');
        lastHTML = currentHTML;
    }
}, 5000);