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

news2025/1/13 3:35:29

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.coloradmin.cn/o/1259683.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

docker基础快速入门:基础命令、网络、docker compose工具

docker基础命令快速入门 目录 docker基本命令docker 网络docker compose Docker介绍 Docker是一个虚拟环境容器,可以将你的开发环境、代码、配置文件等一并打包到这个容器中,并发布和应用到任意平台中。 Docker的三个概念 镜像 Docker镜像是一个特…

Java飞翔的小鸟

一、项目分析 创建一个窗口和画板,把画板放到窗口上,在画板上绘画图片 (2)让小鸟在画面中动起来,可以上下飞 (3)让地面和管道动起来 (4)碰撞检测 (5&#xf…

2023信息技术应用创新论坛|云轴科技ZStack分享云原生超融合在智慧交通的应用

11月25日,2023信息技术应用创新论坛在常州开幕。江苏省工业和信息化厅副厅长池宇、中国电子工业标准化技术协会理事长胡燕、常州市常务副市长李林等领导出席论坛并致辞。中国工程院院士郑纬民出席并作主题报告。来自产学研用金等各界的千余名代表参加本次论坛。 在“…

UE5 - 虚幻引擎各模块流程图

来自虚幻官方的一些资料,分享一下; 一些模块的流程图,比如动画模块: 或角色相关流程: 由于图片比较大,上传到了网络,可自取: 链接:https://pan.baidu.com/s/1BQ2KiuP08c…

MATLAB的rvctools工具箱熟悉运动学【机械臂机器人示例】

1、rvctools下载安装 rvctools下载地址:rvctools下载 截图如下,点击红色箭头指示的“Download Shared Folder” 即可下载 下载之后进行解压,解压到D:\MATLAB\toolbox这个工具箱目录,这个安装路径根据自己的情况来选择&#xff0c…

【华为OD】统一考试C卷真题 100%通过: 传递悄悄话 二叉树遍历 C/C++实现

目录 题目描述: 示例1 解题思路: 代码实现: 题目描述: 给定一个二叉树,每个节点上站着一个人,节点数字表示父节点到该节点传递悄悄话需要花费的时间。 初始时,根节点所在位置的人有一个悄悄…

中通快递查询入口,根据物流更新量筛选出需要的单号记录

批量中通快递单号的物流信息,根据物流更新量将需要的单号记录筛选出来。 所需工具: 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤: 步骤1:运行【快递批量查询高手】软件,并登录 步骤2:点击主…

代码随想录算法训练营第六十天|84. 柱状图中最大的矩形

84. 柱状图中最大的矩形 给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 示例 1: 输入:heights [2,1,5,6,2,3] 输出:10 解释…

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

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

Linux 基本语句_12_信号

用途: 信号可以直接进行用户进程与内核进程之间的交互 特性: 对于一个进程,其可以注册或者不注册信号,不注册的信号,进程接受后会按默认功能处理,对于注册后的信号,进程会按自定义处理 自定义…

Mysql之局域网内不同ip互登陆mysql

1 navicat修改mysql表中user> host改为% 2 重新加载mysql服务 3登陆mysql -h 192.168.x.xxx(计算机ip) -P 3306 -uroot -p123456(密码)

AI大模型相关产品的数据飞轮如何建设?

1、背景 数据飞轮,是今年大模型带火的一个典型词汇,通过客户在应用程序中输入的提示词这样的数据反馈,使大模型快速迭代。简单说:好的产品 -> 更多的用户数据 -> 更好的模型质量 -> 更好的产品就进入了一个正向循环。一…

单片机学习10——独立按键

独立按键输入检测&#xff1a; #include<reg52.h>sbit LED1P1^0; sbit KEY1P3^4;void main() {KEY11;while(1){if(KEY10) //KEY1按下{LED10; //LED1被点亮}else{LED11;}} } 按键 #include<reg52.h>#define uchar unsigned char #define uint unsigned intsbit …

linux下的工具---vim

一、了解vim 1、vim是linux的开发工具 2、vi/vim的区别简单点来说&#xff0c;它们都是多模式编辑器&#xff0c;不同的是vim是vi的升级版本&#xff0c;它不仅兼容vi的所有指令&#xff0c;而且还有一些新的特性在里面。例如语法加亮&#xff0c;可视化操作不仅可以在终端运行…

苍穹外卖项目笔记(5)——Redis

1 入门 1.1 Redis 简介 Redis 是一个基于内存的 key-value 结构数据库&#xff0c;官网链接&#xff08;中文&#xff09;&#xff1a;https://www.redis.net.cn 特点&#xff1a; 基于内存存储&#xff0c;读写性能高适合存储热点数据&#xff08;热点商品、资讯、新闻&am…

数据结构与算法编程题31

判断给定二叉树是否是完全二叉树 #define _CRT_SECURE_NO_WARNINGS#include <iostream> using namespace std;typedef char ElemType; #define ERROR 0 #define OK 1 #define Maxsize 100 #define STR_SIZE 1024typedef struct BiTNode {ElemType data;BiTNode* lchild, …

160 相交链表

解题思路&#xff1a; \qquad 若两个链表a, b相交&#xff0c;则它们之间的区别就仅在于相交节点之前的部分&#xff08;其实任意两个链表最终都会相交&#xff0c;最坏相交于NULL节点&#xff09;。一开始的思路&#xff1a; \qquad\qquad\qquad 1、找到两个链表较长的那个&…

Linux基础项目开发1:量产工具——程序框架(一)

前言&#xff1a; 前面已经将Linux应用开发基础知识学习完了&#xff0c;现在让我们来做个小项目练练手&#xff0c;对之前的一些知识点进行一个更加具体详细的认识与了解&#xff0c;我们要进行的项目名称为&#xff1a;电子产品量产测试与烧写工具&#xff0c;这是一套软件&a…

车内总线通信技术简述

1. 前言 本文主要分享一些汽车总线通信技术&#xff08;CAN、CANFD、LIN、Flex Ray、MOST、LVDS、TTP/C、Ethernet&#xff09;&#xff0c;希望对大家能有所帮助。 2. 多种汽车总线通信技术 2.1 CAN CAN&#xff08;Controller Area Network&#xff09;全称为“控制器局域…

priority_queue模拟实现

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