Chromium Dev Tools：如何永久显示内边距、外边距与边框叠加层？

方法一：使用DevTools原生命令锁定高亮 #

这是官方原生支持的简便方案，能完美复刻原生叠加层的样式和跟随效果：

• 在Elements面板选中需要固定高亮的元素
• 打开命令面板：按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
• 输入Toggle Element Highlight并执行该命令，此时元素的高亮叠加层（含尺寸、类名提示框）会固定显示，即使鼠标离开DevTools窗口、滚动页面也不会消失
• 再次执行该命令即可取消固定

方法二：自定义代码手动添加持久化高亮 #

如果需要更灵活的样式控制，可以在Console面板运行以下代码，手动生成类似DevTools的高亮效果：

// 基于当前Elements面板选中的元素（$0）创建高亮
const target = $0;
const highlight = document.createElement('div');

// 基础样式设置
Object.assign(highlight.style, {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: '999999',
  outline: '2px solid #ffd700', // 黄色边框
  boxShadow: '0 0 0 10px rgba(0, 255, 0, 0.2), 0 0 0 20px rgba(255, 165, 0, 0.2)' // 绿色内边距、橙色外边距
});

// 同步元素位置和尺寸
const updatePosition = () => {
  const rect = target.getBoundingClientRect();
  Object.assign(highlight.style, {
    top: `${rect.top}px`,
    left: `${rect.left}px`,
    width: `${rect.width}px`,
    height: `${rect.height}px`
  });
};
updatePosition();

// 添加尺寸和类名提示框
const tooltip = document.createElement('div');
Object.assign(tooltip.style, {
  position: 'absolute',
  top: '-25px',
  left: '0',
  backgroundColor: '#000',
  color: '#fff',
  padding: '2px 6px',
  fontSize: '12px'
});
tooltip.textContent = `${Math.round(target.offsetWidth)}×${Math.round(target.offsetHeight)} ${target.className.trim()}`;
highlight.appendChild(tooltip);

// 监听滚动事件更新位置
window.addEventListener('scroll', updatePosition);
// 将高亮元素添加到页面
document.body.appendChild(highlight);

// 取消高亮时执行：
// document.body.removeChild(highlight);
// window.removeEventListener('scroll', updatePosition);

注意事项 #

• 原生命令方式会自动跟随元素滚动，样式完全匹配DevTools的叠加层，无需额外维护
• 自定义代码方式需要手动处理滚动时的位置更新，适合需要调整高亮样式的场景

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