仿M浏览器元素审查

简介

• 模拟移动端原生元素审查交互，参考M浏览器代码，提供接近原生的 DOM 调试体验。
• 支持原生浏览器环境和 GM 脚本环境（Tampermonkey / Violentmonkey 等）。
• 内置智能 Adblock 规则生成，根据元素特征自动生成多种高精度拦截建议。
• 集成存储管理工具，可实时查看、修改、删除当前域名的 Cookie、SessionStorage 和 LocalStorage。
• 提供简易 JS 执行终端，支持在移动端直接运行代码并查看实时控制台输出。
• 支持悬浮图标自定义，可调整大小、位置、SVG 样式，也可通过脚本菜单完全隐藏图标。
• 新增 DOM 树可视化浏览与直接编辑功能，支持文字编辑、HTML 源码编辑、元素删除、图片替换、操作撤销等。

使用说明

1. 开启审查面板
   通过脚本菜单“开启/关闭审查面板”或点击右下角悬浮图标（默认显示，可在菜单中隐藏）进入调试模式。进入后页面自动切换到拾取状态。

2. 元素拾取与高亮
   点击页面任意元素即可选中，高亮显示并自动展开 DOM 树视图。同时底部会出现操作栏。

3. DOM 编辑功能（新）

   • 文字模式：直接在页面上编辑元素文本内容（类似 contenteditable）。
   • 代码模式：在面板中编辑元素的完整 innerHTML，确认后同步到页面。
   • 删除元素：直接移除选中节点。
   • 替换图片：针对 img 标签或有背景图的元素，可上传本地图片替换。
   • 撤销操作：支持多次回退最近的修改（删除、替换、编辑等）。
   • 查看父元素：快速跳转到父节点继续审查。

4. Adblock 规则生成
   选中元素后切换到“AD规则”标签页，自动生成多条候选规则（域名+ID/类/属性/层级等组合）。
   支持：

   • 实时预览（隐藏元素效果）
   • 手动编辑规则
   • 一键复制，或直接添加到 Via/X浏览器（若环境支持）

5. 存储数据管理
   切换到“数据”标签页，可视化查看和管理当前域名的：

   • Cookie
   • SessionStorage
   • LocalStorage
     支持单条复制、修改、删除，以及一键清空全部。

6. JS 执行终端
   切换到“JS代码”标签页，可输入任意 JavaScript 代码并立即执行。
   支持查看实时日志（包括 console.log / error / warn / table 等），也可开启网页原生日志监听。

7. 图标与入口自定义
   在“图标”标签页可调整：

   • 图标大小、底部/右侧距离
   • 自定义 SVG 代码
   • 临时隐藏或通过菜单永久隐藏悬浮图标

小提示

• 大部分操作支持撤销（历史栈），误操作后可通过“撤销”按钮恢复。
• 规则预览和元素编辑均为临时效果，刷新页面会还原。
• 若当前页面有动态加载内容，建议重新拾取以获取最新 DOM 结构。