如何定位DOM悬停数值来源？如何导出内存全量数据？

别慌，这种悬停显示的数值一般逃不出几种常见实现逻辑，咱们一步步来排查：

1. 先查图片元素的自定义数据属性 #

很多网站会把悬停数值藏在data-*这类自定义属性里，比如data-tooltip、data-hover-value。你在Chrome审查元素里选中目标图片后，去右侧Elements面板的Attributes区扫一圈，找带数值的data-开头属性。要是找到了，直接用JS就能拿到：

// 替换成你的图片选择器和实际的data属性名
document.querySelector('.target-img').dataset.hoverValue;

2. 检查CSS伪元素的content值 #

如果是用CSS伪元素（比如::after/::before）配合:hover显示数值，那得通过计算样式来获取：

const img = document.querySelector('.target-img');
// 替换成实际用的伪元素:after或:before
const pseudoStyle = window.getComputedStyle(img, ':after');
const hoverValue = pseudoStyle.content.replace(/"/g, ''); // 去掉可能带的引号
console.log(hoverValue);

3. 捕获动态生成的tooltip元素 #

有些网站会在悬停时临时创建一个tooltip容器（比如带特定class的div），这时候可以监听悬停事件，立刻抓这个新元素：

const img = document.querySelector('.target-img');
img.addEventListener('mouseover', () => {
  // 替换成tooltip实际的类名或选择器
  const tooltip = document.querySelector('.hover-tooltip');
  if (tooltip) {
    console.log('悬停数值:', tooltip.textContent.trim());
  }
});

另外，悬停后立刻按Ctrl+F在Elements面板搜索数值，也能快速定位到承载它的元素。

4. 拦截网络请求（如果数值是实时拉取的） #

要是数值是悬停时从后端请求来的，打开Chrome的Network面板，悬停图片后看有没有新的XHR/Fetch请求，直接看响应内容就行。要是请求不好抓，还能手动拦截请求：

// 拦截fetch请求
const originalFetch = window.fetch;
window.fetch = (...args) => {
  console.log('触发请求的URL:', args[0]);
  return originalFetch(...args).then(res => {
    res.clone().json().then(data => console.log('请求返回数据:', data));
    return res;
  });
};

// 拦截XMLHttpRequest
const originalXHR = window.XMLHttpRequest;
window.XMLHttpRequest = function() {
  const xhr = new originalXHR();
  xhr.addEventListener('load', () => {
    console.log('XHR响应内容:', xhr.responseText);
  });
  return xhr;
};

5. 深挖JS调用栈（针对DOM断点没找到的情况） #

你之前试过DOM变更断点没头绪？那断点触发后，去Sources面板的Call Stack里往上翻，看看是哪个函数触发了DOM更新，顺着代码找下去，大概率能找到生成数值的逻辑——说不定数值就藏在某个局部变量或闭包里。

要是还是找不到，试试在控制台搜关键词：比如你知道数值的大概范围或相关业务词，用Object.keys(window).forEach(key => { if (window[key]?.toString().includes('你的关键词')) console.log(key, window[key]); })来排查全局变量。

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