VisBug:帮助前端开发人员的浏览器插件
作为前端开发者相信肯定有遇到过以下场景:
- 看到一个网站某个模块不错的样式效果想要看CSS代码
- 开发过程中调整样式,如字符溢出,对齐,字体大小颜色之类
- 更改网站数据或样式截图分享
在开发过程中,我们通常会遇到需要不断调整代码才能达到预期效果的情况。如果是线上网站的情况,一般会简单粗暴地使用 F12 来查看代码或更改数据。但今天我发现了一个非常不错的 Chrome 插件,可以提供更好的解决方案。我亲自试用了一下,感觉非常棒。在本文中,我将分享这个插件的具体功能,看看是否正好能够解决你的问题。
这个插件的名称是:VisBug
VisBug 是一款由 Adam Argyle 所创作的用于 Web 开发的浏览器扩展,它可以在 Google Chrome 和 Firefox 浏览器中使用。VisBug 的主要目的是为 Web 开发者提供一种更加直观、易用和有趣的方式来开发和设计网站。VisBug 与浏览器的开发者工具类似,但提供了更多的可视化工具,可以在页面上实时编辑 CSS 样式、HTML 元素和布局,以及检查和改进页面的可访问性和性能。
简单来说就是插件提供了一种更直观的方式来编辑网页,能够很轻松的进行设计和调试,包括移动、调整大小、编辑文本,修改颜色、实施预览效果等,能够提高有强迫症同学日常反复调整的效率。
安装完成后打开对应想要调试的网站,点击插件后会出现一个左侧栏,包含各种工具选项。
VisBug 的主要功能包括以下功能点,以下说明顺序和和上面功能点截图顺序一一对应:
1、测量元素之间的间距,选中元素后移动鼠标可以显示各种元素和被选元素之间的距离,就像平时查看设计图一样。
2、被选元素CSS样式查看,hover时会跟随鼠标移动变化,需要复制或停留的点击该元素即可,该弹窗不会消失可以进行复制操作,直到点击下一个元素关闭窗口。
3、显示被选元素的视觉相关属性,这个感觉比较实用的数据不多。
4、选中元素之后,可以按左键或者方向键盘拖拽
5、显示元素的外边距(margin),可通过键盘调整大小。
键盘调整的操作方式,后续相关功能点也有支持,具体的操作方式可以hover对应的功能点查看。
6、显示元素的内边距(padding),和外边距一样。
7、基于flex布局调整元素的样式,通过键盘调整非常方便。
8、调整元素的字体颜色和背景颜色,选中元素后修改调色板即可。
9、如果元素有阴影,则可以调节阴影相关细节。
10、调整元素位置,任意拖拽
11、调整字体大小、字体间距、行距
12、编辑元素(删除添加文字或者图片),对于要更改数据的场景就非常方便了。
13、搜索页面元素(支持标签、class、id等选择器)
主要功能点就介绍完了,有兴趣的同学可以安装体验一下。VisBug 插件可以帮助开发人员更加轻松地进行 Web 开发和设计,并提高他们的创造力和生产力。如果您是一名 Web 开发者或设计师,VisBug 可以是您的一款不可或缺的工具。
看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~
专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)
本文正在参加「金石计划」
推荐阅读
-
VisBug:帮助前端开发人员的浏览器插件
-
Java 类加载器的作用 - 简介:类加载器是 Java™ 中一个非常重要的概念。类加载器负责将 Java 类的字节码加载到 Java 虚拟机中。本文首先详细介绍了 Java 类加载器的基本概念,包括代理模型、加载类的具体过程和线程上下文类加载器等。然后介绍了如何开发自己的类加载器,最后介绍了类加载器在 Web 容器和 OSGi™ 中的应用。 类加载器是 Java 语言的一项创新,也是 Java 语言广受欢迎的重要原因之一。它允许将 Java 类动态加载到 Java 虚拟机中并执行。类加载器从 JDK 1.0 开始出现,最初是为了满足 Java Applets 的需求而开发的,Java Applets 需要从远程位置下载 Java 类文件并在浏览器中执行。现在,类加载器已广泛应用于网络容器和 OSGi。一般来说,Java 应用程序的开发人员不需要直接与类加载器交互;Java 虚拟机的默认行为足以应对大多数情况。但是,如果遇到需要与类加载器交互的情况,而您又不太了解类加载器的机制,就很容易花费大量时间调试异常,如 ClassNotFoundException 和 NoClassDefFoundError。本文将详细介绍 Java 的类加载器,帮助读者深入理解 Java 语言中的这一重要概念。下面先介绍一些基本概念。 类加载器的基本概念 顾名思义,类加载器用于将 Java 类加载到 Java 虚拟机中。一般来说,Java 虚拟机以如下方式使用 Java 类:Java 源程序(.java 文件)经 Java 编译器编译后转换为 Java 字节代码(.class 文件)。类加载器负责读取 Java 字节代码并将其转换为 java.lang 实例。每个实例都用来表示一个 Java 类。通过该实例的 newInstance 方法创建该类的对象。实际情况可能更加复杂,例如,Java 字节代码可能是由工具动态生成或通过网络下载的。 基本上,所有类加载器都是 java.lang.ClassLoader 类的实例。下面将详细介绍这个 Java 类。 java.lang.ClassLoader 类简介 java.lang.ClassLoader 类的基本职责是根据给定类的名称为其查找或生成相应的字节码,然后根据这些字节码定义一个 Java 类,即 java.lang.Class 类的实例。除此之外,ClassLoader 还负责加载 Java 应用程序所需的资源,如图像文件和配置文件。不过,本文只讨论它加载类的功能。为了履行加载类的职责,ClassLoader 提供了许多方法,其中比较重要的方法如表 1 所示。下文将详细介绍这些方法。 表 1.与加载类相关的 ClassLoader 方法
-
http://tools.yesky.com/309/30987309.shtml-买到回家的火车票无疑是眼下最最重要的事情。今年铁道部开通了12306网上订票通道,每天都有无数人守在电脑前不停按着鼠标,希望能够幸运地登录上购票网站、成功订到回家的那张小小的火车票。无奈订票人数太多,登录、订票、支付等等环节都困难重重,有没有什么好工具可以帮助我们呢? 网上购买火车票主要有以下几个步骤:安全登录购票网站——车票查询——车票预订——确认订单——网上支付。如果能在几个重要环节上能有一些快速自动的帮手,就一定能在春运购票大战中抢得先机。 我们知道,Chrome浏览器以快速简洁见长,并且有非常丰富的插件。最近,有开发者提供了一个快速网购火车票Chrome浏览器插件——12306订票助手,可以帮助我们自动完成重复登录、刷票、预定、提交订单等一系列订票步骤,有效提高订票成功率。 首先下载安装Chrome浏览器,然后在Chrome浏览器的地址栏中输入插件地址“https://github.com/zzdhidden/12306/raw/master/12306BookingAssistant.user.js”,回车后便会看到弹出的提示窗口,询问是否安装这个插件。 (现在需要再扩展程序页面将。js拖进去才能安装!!!!) 图示:安装插件 点击“安装”之后,这个12306订票助手插件就安装好了。 图示:插件安装完毕 图示:chrome插件管理 现在,准备工作已经完成,接下来就是最惊心动魄的订票操作了!进入12306火车票订票官网,大家会发现安装了12306订票助手插件的Chrome浏览器在不同的订票界面会出现不同的绿色小按钮,有“自动登录”、“自动刷票”、“自动提交订单”等,就是这些绿色的小按钮,帮助我们省去了不停重复点击鼠标的刷新动作,并且会在成功的时候发出声音提醒用户,所以可以大大提高订票成功率。 图示:购票插件中的主要功能按钮 自动登录