ShowWeb-浏览器插件:可视化元素路径查看器

ShowWeb👻:可视化元素路径查看器适配【谷歌】【Edge】

每次写前端最烦的就是一层一层找元素,又臭又长。所以我开发了一个小插件来缓解这个问题,这个插件可以输出整个路径,并把最后元素的内容输出方便查看,开箱即用,插拔方便。同时也非常欢迎大家使用!👻。

GitHub: https://github.com/invokeG/ShowWeb
Edge扩展商店:ShowWeb


简介:

轻松了解网页上的元素结构!这款插件允许你通过按住Alt键并点击页面上的任何元素,立即可视化查看该元素的DOM路径。无需繁琐的开发者工具,一键获取元素信息,包括标签名、类名、ID等。另外,提供了方便的弹出框,展示了元素的路径和内容,让你更直观地理解和调试页面结构。

特色:

  • 快速查看元素路径: 按住Alt键,点击任意页面元素,即可获取其DOM路径。

  • 可视化弹出框: 以清晰的方式展示元素路径和内容,方便开发者快速定位和调试。

  • 简洁实用: 无需打开开发者工具,快速获取页面元素信息。

如何使用:

  1. 激活插件:按住Alt键,并点击页面上的任何元素。
  2. 查看信息:弹出框将显示元素的DOM路径和内容。

在这里插入图片描述


下载&安装


下载链接(GitHub)https://github.com/invokeG/ShowWeb


安装(谷歌 & Edge)

  1. 浏览器右上角 -> 扩展程序 ->管理扩展程序
  2. 打开开发者模式
  3. 选择加载已解压的扩展程序,选择解压好的文件夹
  4. 完成,Alt + Click 即可使用

我也是第一次做插件,欢迎大家提出宝贵意见,互相学习。有感兴趣的小伙伴也可以在GitHub提交Pr一起玩耍⭐。👻

发布

同时更新Edge应用商店提交状态(谷歌听说很慢还得交💴就没弄)

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值