【神器分享】油猴脚本！网页元素可视化调试管家：支持 HTML 原位修改代码不用开启

29176413

也就是可以根据这个工具进行拓展更多的功能，当然现在这个只是一部分功能，
可以根据这个思路做很多工具，也就是浏览器开发者模式中的那些功能都可以进行拓展，例如css查看修改等等，
完结撒花~~~~~~
我觉得去网页广告应该很管用，也实用点吧，他的规则是持久化的保存的，也就是这次去掉了广告，下次打开就没有了，当然这只是一种功能，更多的功能大家自己发掘


核心功能介绍

- 智能元素选择 ：采用类似 Chrome DevTools 的高亮遮罩，鼠标悬停即可实时锁定网页元素。
- 双重 HTML 编辑模式 ：
  - 原位编辑 ：直接在网页当前位置弹出输入框，像改文档一样修改 HTML 结构。
  - 弹窗编辑 ：在独立的大窗口中编辑，支持 HTML 格式化预览。
- CSS 样式探针 ：在弹窗编辑时，右侧会自动列出该元素匹配的所有 CSS 规则（包括内联样式和外部样式表）。
- 永久性规则管理 ：
  - 隐藏与删除 ：一键隐藏（ display: none ）或彻底移除元素，操作会自动保存。
  - 域名分组 ：规则按网站域名自动分类，支持折叠/展开，管理井然有序。
- 交互式控制面板 ：
  - 自由拖拽 ：面板可随处停放，不遮挡视线。
  - 智能展开 ：打开面板时自动定位并展开当前网站的规则列表。
操作指南

1. 开启选择模式

- 点击控制面板上的 “开启选择模式” 按钮。此时鼠标在页面上移动时，所经过的元素会被蓝色遮罩高亮显示。
- 注意 ：该模式会一直保持，直到你手动点击“停止选择”或关闭面板。
2. 元素操作菜单

- 在选择模式下，对准目标元素 点击鼠标右键 ，将弹出功能菜单：
  - 隐藏元素 ：将元素设为不可见（保留位置）。
  - 彻底删除 ：直接从 DOM 树中移除。
  - 原位编辑 HTML ：在元素位置直接开启快速编辑。
  - 弹窗编辑 HTML ：开启带 CSS 预览的高级编辑器。
  - 选择父元素 ：当目标太小时，可通过此项逐级向上选取更大的容器。
3. 编辑 HTML

- 保存更改 ：在编辑器中修改代码后，点击 “✅ 保存” 按钮即可实时看到效果。
- 查看 CSS ：在“弹窗编辑”模式下，右侧面板会显示该元素受哪些 CSS 规则影响，方便你参考样式。
4. 规则管理

- 查看规则 ：在控制面板底部，点击各个域名标题即可查看已保存的屏蔽规则。
- 取消屏蔽 ：点击规则右侧出现的 × 号，即可恢复被隐藏/删除的元素。
- 当前网站高亮 ：当前访问的网站在列表中会以蓝色字体标注，并带有点亮图标。
快捷特性

- 最大化层级 ：控制面板和遮罩层拥有最高 Z-Index，确保不会被网页原有元素遮挡。
- 边界识别 ：右键菜单会自动检测屏幕边缘，防止菜单弹出在屏幕外。
- 格式化支持 ：编辑器会自动对 HTML 进行缩进处理，提升阅读体验。
技术信息

- 存储机制 ：使用 Tampermonkey 的 GM_setValue 存储，跨页面、跨会话持久化。
- 代码参考 ：
  - 拖拽逻辑实现： makeDraggable
  - CSS 匹配引擎： getMatchedCSSRules
  - 规则列表构造： updateRulesList

代码太长放在附件中
下载:https://xbl.lanzoue.com/izNtX3gmjoch 密码:br33

Kissmeet

用codebuddy IDE优化和增加了部分功能：
1、元素获取方式改用自定义的locateNewElement(x, y)这个函数
2、增了隐藏元素后的预览功能（点击眼睛按钮可以切换元素的隐藏与显示）
3、优化了删除隐藏元素的规则为立即恢复显示被隐藏的元素，不再重新刷新页面后才显示

Char007

下载试试，感谢分享

lzy8108

感谢您发布原创作品，吾爱因你而精彩！

君月栩

感谢楼主分享

lpf2003

感谢分享，能不能把网页本来隐藏的元素显示出来

Yoz666

有意思的插件，下载试试，感谢分享

29176413

lpf2003 发表于 2026-1-20 20:39
感谢分享，能不能把网页本来隐藏的元素显示出来

这个里面没有那个功能，你要针对需要的功能进行分析，让后丢给AI去实现不久好了，是不是很简单

MichaelAHN

不知道有啥用

双十一

这个可以用来去网页广告

sky木木

虽然看不懂，但感觉好厉害的样子

Dickxie

主要是用于干嘛？