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

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

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

https://github.com/invokeG/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应用商店提交状态(谷歌听说很慢还得交💴就没弄)

  • 2023.11.27
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/193503.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

javascript 运算符

javascript 运算符 目录 javascript 运算符 一、算术运算符 1、自增运算符 2、自减运算符 二、比较运算符 三、赋值运算符 四、逻辑运算符 五、条件运算符 疑难解答: 这一节,我们来介绍JavaScript的运算符。运算符是完成一系列操作的符号&…

vim工具以及如何给用户加上sudo的权限

Linux开发工具之vim以及如何给用户配置sudo的权限文件的操作 1.vim概念的介绍 2.vim的多模式的介绍 3.vim的命令模式与低行模式的相关指令操作 4.vim如何配置 5.如何给普通用户配置sudo的权限 本文开始~~~~ 1. vim概念的介绍 vim是一款多模式的文本编辑器,简单…

CSGO搬砖还能做吗?CSGO饰品未来走势如何?

steam/csgo搬砖项目真能月入过万吗?到底真的假的? 如何看待CSGO饰品市场的整体走向? 从整体来说,CSGO的饰品市场与规模肯定会持续不断的上升,大盘不会发生特别大的波动,目前处于稳定期!&…

PT里如何针对某个模块设置false path

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 如题,这个问题实际上讲的是get_cells的用法,我们要抓取某个模块内的全部cell,在ICC2里可以get_flat_cells xx/xx/module_name*,但…

创意二维码案例:意大利艺术家的最新二维码艺术展!

意大利艺术家——米开朗基罗皮斯特莱托(Michelangelo Pistoletto)的个人艺术展“二维码‘说’”(QR CODE POSSESSION)正在北京798艺术区的常青艺术画廊展出,这是一次别出心裁的创意艺术展! 主要体现在3个方…

final关键字-Java

final关键字 一、使用场景1、当不希望类被继承时,可以用final修饰。2、当不希望父类的某个方法被子类覆盖/重写(override)时,可以用final修饰。3、当不希望类的的某个属性的值被修改,可以用final修饰。4、当不希望某个局部变量被修改&#xf…

防火墙简介

防火墙概念 是指一种将内部网和公众访问网(如Internet)分开的方法,它实际上是一种建立在现代通信网络技术和信息安全技术基础上的应用性安全技术,隔离技术。 将需要保护的网络和不可信网络进行隔离,隐藏信息并…

振南技术干货集:znFAT 硬刚日本的 FATFS 历险记(5)

注解目录 1、znFAT 的起源 1.1 源于论坛 (那是一个论坛文化兴盛的年代。网友 DIY SDMP3 播放器激起了我的兴趣。) 1.2 硬盘 MP3 推了我一把 (“坤哥”的硬盘 MP3 播放器,让我深陷 FAT 文件系统不能自拔。) 1.3 我…

Java开发者的Python快速进修指南:自定义模块及常用模块

自定义模块 我来举一个在Java开发中常用的开发方式作为例子。在我们进行项目开发时,通常会在项目的结构中创建一个util包,用于存放一些工具类。同样,Python也可以采用类似的方式来组织代码结构,让大家更容易理解。 在同目录下 如果…

priority_queue模拟实现

目录 仿函数 模拟实现 结果 大根堆 小根堆 完整代码 priority_queue.h test.c 仿函数 仿函数的通俗定义:仿函数(functor)又称为函数对象(function object)是一个能行使函数功能 的类。仿函数的语法几乎和我们…

为啥网络安全那么缺人,但很多人却找不到工作?

文章目录 一、学校的偏向于学术二、学的东西太基础三、不上班行不行 为什么网络安全的人才缺口那么大,但是大学毕业能找到网安工作的人却很少,就连招聘都没有其他岗位多? 明明央视都说了网络安全的人才缺口还有300多万,现在找不到…

Vue框架学习笔记——计算属性

文章目录 前文提要代码需求描述插值语法实现methods实现 计算属性getter执行时间:setter 计算属性简写形式(只读不改,才能如此简写)slice截取元素,限制输入字符数量 前文提要 本人仅做个人学习记录,如有错…

【一周AI简讯】OpenAI奥特曼王者归来,马斯克AI模型Grok下周开放测试,ChatGPT语音对话功能向所有用户免费开放

OpenAI奥特曼王者归来,董事会改组 终于,经历大约5天的极限拉扯,年底AI界吃瓜大戏落下帷幕,奥特曼确认回归。 ChatGPT语音对话功能向所有用户免费开放 ChatGPT 语音输入最初于 9 月份推出,标题是“ChatGPT 现在可以看…

12、模块化编程

模块化编程 1、传统方式编程:所有的函数均放在main.c里,若使用的模块比较多,则一个文件内会有很多的代码,不利于代码的组织和管理,而且很影响便朝着的思路 2、模块化编程:把各个模块的代码放在不同的.c文件…

线性分类器--图像表示

整个模型 图像表示 二进制图像 灰度图像 彩色图像 大多数分类算法都要求输入向量! rbg的图像矩阵转列向量 大小为 32X32 的话,图像矩阵转列向量是多少维? 32x32x3 3072 维列向量

魏副业而战:视频号副业项目赚钱攻略,每天30分钟,日入500+

我是魏哥,与其躺平,不如魏副业而战! 最近很多团队在操作视频号分成计划项目。 说真的,这个副业项目很不错,魏哥也操作测试一下,每天收益大几百,收益如下: 大家看了,是不…

Linux——使用命令查看文件和文件夹数量

目录 一、相关命令参数解析二、查看当前目录下的文件数量2.1 包含子目录中的文件2.2 不包含子目录中的目录 三、查看当前目录下的文件夹个数3.1 不包含目录中的目录3.2 包含目录中的目录 四、查看当前文件夹下叫某某的文件的数量实例 五、总结 一、相关命令参数解析 "&qu…

C++中的类与对象

类和对象的基本概念 C 和 C中 struct 区别 c 语言 struct 只有变量 c语言 struct 既有变量,也有函数 类的封装 我们编写程序的目的是为了解决现实中的问题,而这些问题的构成都是由各种事物组成,我们在计算机中要解决这种问题&#x…

python之pyqt专栏6-信号与槽2

上一篇python之pyqt专栏5-信号与槽1-CSDN博客,我们通过信号与槽实现了点击Button,改变Label的文本内容。可以知道 信号是在类中定义的,是类的属性 槽函数是信号通过connect连接的任意成员函数,当信号发生时,执行与信号…

【通讯协议】REST API vs GraphQL

在API设计方面,REST和GraphQL各有缺点。下图显示了 REST 和 GraphQL 之间的快速比较。 REST 使用标准 HTTP 方法(如 GET、POST、PUT、DELETE)进行 CRUD 操作。当您需要在单独的服务/应用程序之间提供简单、统一的接口时,效果很好…
最新文章