蘑菇视频

首页/肩带滑落边缘/正文

每日大赛吃瓜弹窗很多时到底怎么历史记录？照着做就行

作者：蘑菇视频肩带滑落边缘

每日大赛吃瓜弹窗很多时到底怎么历史记录？照着做就行

每日大赛吃瓜弹窗很多时到底怎么历史记录？照着做就行 第1张

在参加每日大赛或在线活动时，页面上不断弹出的“吃瓜”消息、系统提示或评论通知，经常让人想保存一份历史记录以便日后查看、复盘或整理证据。下面把可操作的方法和步骤都列清楚：按场景选方法，照着做就能把弹窗内容记录下来并导出保存。

先判断弹窗来源（决定用哪种方法）

通用策略（按重要性排序）

  1. 浏览器 DevTools + 保存网络日志（HAR）
  2. 插件/脚本实时抓取并写入本地（localStorage / 下载文件）
  3. 浏览器或系统的通知历史功能（移动端、Windows）
  4. 屏幕录制或自动截图（最后手段）

具体做法 — 浏览器（以 Chrome/Edge 为例） 方法 A：用 DevTools 捕获网络与 WebSocket

  1. 打开页面，F12 打开 DevTools。
  2. Network 面板勾选 “Preserve log” 保持记录。
  3. 如果弹窗由 WebSocket 推送，点 WS 条目，查看 Messages（帧）。
  4. 结束后右键 Network 面板任意请求，选择 “Save all as HAR with content” 导出 HAR 文件，后续可用 HAR 工具解析。

方法 B：用 MutationObserver 自动记录 DOM 弹窗（即时抓取并保存） 将下面脚本粘到控制台（Console）执行；它会监控页面特定弹窗容器内新增节点，把文本存到 localStorage，并提供导出按钮。

// 把下面整个代码一次性粘贴到控制台执行 (function(){ const containerSelector = '.popup-container, .toast, .notice'; // 根据页面改成实际弹窗父元素选择器 function findContainer(){ const s = ['.popup-container','.toast','.notice','#notifications']; // 可按需增删 return s.map(q=>document.querySelector(q)).find(x=>x); } const container = findContainer(); if(!container){ console.warn('没找到常见弹窗容器，请在脚本中调整 containerSelector。'); } const key = 'popuphistorylog'; if(!localStorage.getItem(key)) localStorage.setItem(key, JSON.stringify([])); const pushRecord = (text)=>{ const arr = JSON.parse(localStorage.getItem(key)||'[]'); arr.push({time:new Date().toISOString(), text}); localStorage.setItem(key, JSON.stringify(arr)); }; const observer = new MutationObserver(muts=>{ muts.forEach(m=>{ m.addedNodes.forEach(node=>{ if(node.nodeType===1){ const txt = node.innerText||node.textContent; if(txt && txt.trim().length>0){ pushRecord(txt.trim()); console.log('记录弹窗：', txt.trim()); } } }); }); }); observer.observe(container||document.body, {childList:true, subtree:true}); // 导出按钮 const btn = document.createElement('button'); btn.textContent='导出弹窗历史(JSON)'; Object.assign(btn.style,{position:'fixed',right:'10px',top:'10px',zIndex:999999,padding:'6px 10px',background:'#007aff',color:'#fff',border:'none',borderRadius:'4px',cursor:'pointer'}); btn.onclick=()=>{ const data = localStorage.getItem(key)||'[]'; const blob = new Blob([data],{type:'application/json'}); const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='popup_history.json'; a.click(); }; document.body.appendChild(btn); console.log('弹窗监控已启动，按页面右上角按钮导出历史。'); })();

使用说明：

方法 C：页面抓取后另存

浏览器高级：自动化与定时抓取

移动端（Android / iOS） Android

iOS

Windows / macOS（系统通知与桌面端）

抓包与网络层面（当弹窗由 Server 推送）

屏幕录制与截图自动化（不可抓DOM时的万能法）

保存与管理建议（方便查找）

排查常见问题

最后的快速流程（五步照做模板）

  1. 判断来源（浏览器 DOM / 系统通知 / 网络推送 / 画面渲染）。
  2. 若是浏览器 DOM：用控制台注入 MutationObserver 脚本并导出 JSON。
  3. 若是网络推送：在 DevTools Network 抓 HAR 或查看 WS 消息。
  4. 若是系统通知：用系统通知历史或安装通知记录应用（移动端）。
  5. 若以上都不可行：做屏幕录制或自动截图并用 OCR 转文本。

#每日#大赛#吃瓜

相关文章