跳到主要内容

元素检测与高亮

Schema Element Editor 提供多种元素检测和高亮模式，帮助您快速定位页面中可编辑的 Schema 元素。

基础检测模式​

单元素高亮​

这是最常用的检测方式：

  1. 激活插件
  2. 按住 Alt 键（Mac 上是 Option 键）
  3. 将鼠标在页面上移动
  4. 带有 data-id 属性的元素会显示：
    • 蓝色高亮边框
    • 参数值 tooltip

点击高亮元素即可打开 Schema 编辑器。

配置选项​

在插件配置页面的「元素检测与高亮」→「基础模式」中，您可以调整：

配置项说明默认值
节流间隔控制鼠标移动检测频率，16ms 约为 60fps16ms
限制向上搜索层级关闭时搜索到根元素；开启后按「向上搜索深度」限制层数关闭
向上搜索深度查找父元素的最大层数（仅在「限制向上搜索层级」开启时生效）5
高亮框颜色自定义高亮框的颜色#1677FF

搜索模式（批量高亮）​

当您想快速查看页面上所有可编辑元素时，可以使用搜索模式。

使用方法​

  1. 按住 Alt 键
  2. 同时按下配置的快捷键（默认是 A）
  3. 页面上所有带有 data-id 属性的元素都会被高亮
  4. 松开 Alt 键，所有高亮自动消失

配置选项​

在「元素检测与高亮」→「搜索模式」中配置：

配置项说明默认值
启用功能是否启用批量高亮功能开启
快捷键触发批量高亮的按键（配合 Alt 使用）A
最大高亮数量避免页面卡顿的限制500

使用场景​

  • 🔍 快速了解页面上有哪些元素可以编辑
  • 🐛 调试时定位特定参数的元素
  • 📊 了解页面的 Schema 元素分布情况

录制模式​

录制模式是一种特殊的检测模式，用于捕获 Schema 数据的动态变化。详细说明请参阅 录制模式。

快速切换​

  1. 按住 Alt 键
  2. 按下 R 键（可在配置中自定义）
  3. 高亮框变为红色，表示进入录制模式
  4. 点击目标元素，以录制模式打开编辑器

iframe 支持​

Schema Element Editor 支持检测页面中同源 iframe 内的元素。

启用方法​

  1. 打开插件配置页面
  2. 找到「元素检测与高亮」→「iframe 支持」
  3. 开启「启用 iframe 元素检测」

特性说明​

特性说明
同源支持✅ 支持同源 iframe 内的元素检测
跨域支持❌ 跨域 iframe 会显示"跨域 iframe 暂不支持"提示
高亮渲染高亮框和 tooltip 统一渲染在主页面，不会被 iframe 边界裁剪

Schema 数据来源​

您可以配置 iframe 内元素的 Schema 数据由谁提供：

选项说明
iframe 内部（默认）向 iframe 的 window 发送 postMessage
主页面向 top frame 的 window 发送 postMessage

性能建议​

💡 如果页面不包含需要检测的 iframe，建议关闭此功能以减少资源消耗。

高亮样式自定义​

基础模式高亮颜色​

在「基础模式」配置中，点击颜色选择器可以自定义高亮框颜色。

录制模式高亮颜色​

录制模式使用独立的高亮颜色（默认红色），在「录制模式」配置中设置。

故障排除​

元素无法被检测​

  1. 检查属性名配置

    • 默认检测 data-id 属性
    • 如果您的页面使用不同的属性名，请在「集成配置」→「元素标记配置」中修改

  2. 检查插件状态

    • 确保工具栏图标为蓝色（激活状态）

  3. 检查页面集成

    • 页面需要正确标记元素并提供数据接口

高亮位置不准确​

  1. 页面布局问题

    • 某些复杂的 CSS 布局可能影响高亮框定位
    • 滚动页面后高亮会自动清除以避免位置错位

  2. iframe 场景

    • 确保已启用 iframe 支持
    • 检查是否为同源 iframe

批量高亮导致页面卡顿​

  1. 减少最大高亮数量

    • 在配置中将「最大高亮数量」调低

  2. 关闭不需要的功能

    • 如果不需要批量高亮，可以关闭该功能