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.mzph.cn/news/177550.shtml

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

相关文章

ArcGIS10.x系列 Python工具箱教程

ArcGIS10.x系列 Python工具箱教程 目录 1.前提 2.需要了解的资料 3.Python工具箱制作教程 4. Python工具箱具体样例代码(DEM流域分析-河网等级矢量化) 1.前提 如果你想自己写Python工具箱,那么假定你已经会ArcPy,如果只是自己…

Vue框架学习笔记——事件处理:v-on指令+methods

文章目录 前文提要事件处理的解析过程,v-on:事件名样例代码如下:效果展示图片:v-on:事件名"响应函数"v-on简写形式响应函数添加响应函数传参占位符"$event"注意事项 前文提要 本人仅做个人学习记录,如有错误…

前端web开发学习笔记

JavaWeb 前端Web开发HTMLCSSjavaScript1.JS引入2.JS基础语法3.JS函数4.JS对象 BOMDOM文档对象模型JS事件监听VueVue常用指令Vue的生命周期 AjaxAxios 前端工程化环境准备NodeJS安装和Vue-cli安装vue项目Vue组件库Element组件的使用 Vue路由Nginx打包部署 前端Web开发 HTML 负…

跳动的文字(文字渲染).html( 网上收集的1)

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>跳动的文字</title><style>#m1:hover {animation: shine 1s linear infinite;}keyframes shine {0% {color: #fff;}50% {color: #0000ff;}100% {color: #fff;}…

运行时错误/缺陷到底是什么缺陷

运行时错误(Run-time Error)是一种跟程序运行状态相关的缺陷。这类缺陷不能通过直接禁用相关特性来屏蔽&#xff0c;而是需要通过分析变量的数值状态来发现可能的异常。简单来说&#xff0c;这些缺陷通常只有当程序执行起来以后&#xff0c;才能逐渐暴露出的缺陷&#xff0c;一…

笔记十七、认识React的路由插件react-router-dom和基本使用

react-router 分类 web使用 react-router-dom native使用 react-router-native anywhere&#xff08;使用麻烦&#xff09; react-router 安装 yarn add react-router-dom main.jsx import React from "react"; import ReactDOM from "react-dom/client"…

【Mybatis系列】Mybatis之TypeHandler入门

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

MX6ULL学习笔记 (一)交叉工具链的安装

前言&#xff1a; ARM 裸机、Uboot 移植、Linux 移植这些都需要在 Ubuntu 下进行编译&#xff0c;编译就需要编译 器&#xff0c;Ubuntu 自带的 gcc 编译器是针对 X86 架构的&#xff01;而我们现在要编译的是 ARM 架构的代码&#xff0c;因为我们编译的代码是需要烧写到ARM板子…

区块链存证:杭州互联网法院备选方案之一

文章目录 背景上报的存证系统设计备选方案***总体原则******分层架构******基础节点******存证链******存证业务******存证接入******通用功能******跨链对接架构***业务流程描述用户发起原创内容存证&#xff08;对应上图中左边1,2,3活动&#xff09;发现侵权行为&#xff0c;…

互联网金融智能风险防控技术要求

《互联网金融智能风险防控技术要求》 8月6日&#xff0c;国家市场监督管理总局和国家标准化管理委员会发布《互联网金融智能风险防控技术要求》&#xff08;GB/T 42929-2023&#xff09;&#xff08;以下简称“《要求》”&#xff09;&#xff0c;将于2023年12月1日实施。 《要…

文章采集器-免费的文章采集工具大全

在当今信息爆炸的时代&#xff0c;获取有效的信息变得尤为关键。随之而来的问题是&#xff0c;如何高效地从海量信息中筛选出我们所需的内容呢&#xff1f;文章采集器应运而生&#xff0c;它就像是信息世界中的一把神奇的筛子&#xff0c;能够帮助我们从大海一般的信息中捞取我…

配置和运行yolov5时报错ModuleNotFoundError: No module named ‘ultralytics.yolo‘的解决方法

yolov5的官方文件 链接&#xff1a;https://pan.baidu.com/s/1WNoTDvBGDrgTfUiHDSB6Gg?pwd8MXz 提取码&#xff1a;8MXz 在终端里面运行detect.py文件&#xff0c;报下面的错误 分析上面的错误&#xff0c;发现是在utils/general.py文件里的39行处报错了。因为找不到check_r…

ruby3.2.2 报错 undefined symbol: EC_GROUP_new_curve_GF2m

一、执行ruby -ropenssl -e puts OpenSSL::OPENSSL_VERSION 查看openssl版本时报错 ruby -ropenssl -e puts OpenSSL::OPENSSL_VERSION 这是因为ruby内的openssl版本是3.2.0版本的 而自openssl3.0以后已经废弃 EC_GROUP_new_curve_GF2m了 二、解决方案 指定ruby内的openssl…

NX二次开发UF_CURVE_create_arc 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_create_arc Defined in: uf_curve.h int UF_CURVE_create_arc(UF_CURVE_arc_p_t arc_coords, tag_t * arc ) overview 概述 Creates an arc. You input the matrix tag, …

前端学习系列之html

目录 初识html 发展史 优势 W3C 标准 地址 格式 网页基本标签 标题标签 段落标签 换行标签 水平线标签 字体样式 注释和特殊符号 特殊符号 图像、超链接 图像 常见图像格式 格式 超链接 格式 重要属性 href&#xff1a;规定链接指向的页面的 URL target…

C#,《小白学程序》第二十七课:大数四则运算之“运算符重载”的算法及源程序

1 文本格式 using System; using System.Text; using System.Collections; using System.Collections.Generic; /// <summary> /// 大数的四则&#xff08;加减乘除&#xff09;运算 /// 及其运算符重载&#xff08;取余数&#xff09; /// </summary> public cl…

动态规划学习——斐波那契数列

目录 最长的斐波那契数列子序列的长度 1.题目 2.题目接口 3.解题思路及其代码 最长的斐波那契数列子序列的长度 1.题目 如果序列x_1&#xff0c;X_2&#xff0c;...&#xff0c;x_n 满足下列条件&#xff0c;就说它是斐波那契式的: 1.n > 3 2.对于所有i2 <n&a…

error “you should set MAGICKCORE_HDRI_ENABLE

最近做一个项目需要配置ImageMagick库&#xff0c;本项目配置环境如下&#xff1a; ImageMagick version 7 Operating system, version and so on ubuntu 20.04 Description error "you should set MAGICKCORE_HDRI_ENABLE 查阅网上的资料&#xff1a; 默认的是DMAGICKC…

蓝桥杯双向排序

这里写自定义目录标题 题目分析代码思路 题目分析 n,m都是 1 0 5 10^5 105 &#xff0c;需要将时间复杂度控制在 n log ⁡ n n \log n nlogn以内。 如果有两次连续的前缀操作&#xff0c;由于它们都是降序排列&#xff0c;等价于只做第二次排列&#xff0c;忽略掉第一次。 同…

建筑结构健康监测系统和传统人工监测的区别

在繁华的城市里&#xff0c;建筑结构作为城市生命线的重要一环&#xff0c;其安全与稳定对城市的运转和居民的生活至关重要。为了更好地守护建筑结构的健康&#xff0c;WITBEE万宾自主研发建筑结构健康监测系统让建筑安全&#xff0c;在上一个台阶。 WITBEE万宾建筑结构健康监测…