10个实用的谷歌插件,技术专家必备,按框共享

点击上方头像关注我,每周上午 09:00准时推送,每月不定期赠送技术书籍。

本文2789字,阅读约需7分钟

Hi,大家好,我是CoCo。在之前的文章给大伙推荐了10款超好用的谷歌插件:测试人必备的10款效率插件,墙裂安利一波,今天继续推荐一波,方法好,下班早,妥妥的提高工作效率。

CSS Viewer

01 简介

CSS Viewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件,在Chrome中安装了CSSViewer插件以后,用户就可以在设计网页的时候,快速地模仿网页中某个元素的表现形式,这对于一些使用公共库的开发者来说会大大地节约开发时间(寻找api的时间)。

02 说明

点击Chrome右上角的CSSViewer插件按钮,这时候就可以把鼠标在网页中进行浮动,从而找到需要看到的CSS属性,当浮动到一个元素上的时候,CSSViewer插件会自动以弹出窗口的形式,提醒用户该元素的详细CSS内容,包括字体大小、CSS类名、背景颜色、宽度、高度等。

Visual Inspector

01 简介

Visual Inspector这款插件可以高效的帮助前端页面重构,高度视觉还原,也方便测试时进行UI走查,能快速发现页面和视觉稿的差异,减少大量和设计师的沟通成本。可以随意修改设计稿大小,位置,透明度,混合模式等,方便各种设计风格的UI对比。

02 说明

点击INSPECT按钮可以实时查看选中元素的盒子模型、样式以及与其它元素的标注,尤其是查看邻元素的间距标注功能,这个相当好用。点击水滴icon可以查看当前网站样式的所有颜色。F12结合Visual Inspector,更能发挥更大价值哦。

Json View

01 简介

Json View可以便捷的对没有经过格式化或经过unicode编码的json数据进行转化,查看 Json 结构、数据转码、缩进、格式化,直接显示出格式化后的数据,同时它还支持各种数据类型的语法高亮,以及节点的收缩和展开等,可以非常方便的查看接口返回数据。

02 说明

安装Json View之后,谷歌浏览器是自动识别json格式数据的,所以只要把json格式的文件用谷歌浏览器打开就可以。

Vimium

01 简介

Vimium这个名字其实是 Vim 和 Chromium 的合体,继承了Vim的常用操作,完全脱离鼠标来控制浏览器,是一款黑客级别的Chrome插件。对熟悉Linux的同学来说,简直是神器。

02 说明

该插件有许多的快捷键可使用,还有很多命令行,快捷操作,方便浏览。

Code Cola

01 简介

Code Cola是一款非常好用的能查看网页代码样式的Chrome CSS样式可视化插件,有了这款Code Cola插件,可以直接在浏览器上修改你打开的网页。

02 说明

将鼠标移动至网页的任意板块即可发现板块区域会变成蓝色,点击即可在上述窗口中显示其所具有的样式信息。点击黑色窗口即可对网页进行编辑,可以选择字号、行高、字色、字形、对齐方式、文字描边等等,只要点击一下功能,这里会显示下拉的菜单,自行填写即可。

Vue devtools

01 简介

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,被称为“Vue 调试神奇” vue是数据驱动的, 利用这个插件,这样就能看到vue中每个组件的data、props、computed等多种属性和方法,为我们项目的开发与调试提供了很多的便利 。

02 说明

安装成功后,运行本地Vue项目,打开浏览器控制台如下,可以便捷的查看vueX的数据以及组件结构等,非常方便。

Reat Developer Tools

01 简介

使用React进行开发,那必不可少的就是React Developer Tools, 它是Fecebook出品的,同样使用 React Developer Tools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。

02说明

通过它我们可以查看应⽤程序的 React 组件分层结构,⽽不是神秘的浏览器 DOM 结构表⽰。

Light House

01 简介

前端开发中,对于自己开发的app或者web page性能的好坏,一直是让前端开发很在意的话题。我们需要专业的网站测试工具,让我们知道自己的网页还有哪些需要更为优化的方面,Lighthouse可以实现前端性能检测。

02 说明

Lighthouse 插件会对网页的各个测试项的结果打分,并给出优化建议报告,是一个非常实用的可视化网站优化工具。

Clear Cache

01 简介

Clear Cache通过单击一个按钮清除缓存和浏览数据。使用此扩展快速清除缓存,无需任何确认对话框,弹出窗口或其他烦恼。

02 说明

点击图标即可清除缓存、Cookie等,测试必备。 可以根据需要清除的数据定制Clear Cache,这些数据包括应用缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据,密码和WebSQL等。

Fireshot

01 简介

捕捉网页截图,编辑并将它们保存为PDF,JPEG,GIF,PNG或BMP;上传,打印,在Photoshop中打开,复制到剪贴板或电子邮件。FireShot的抓住了Chrome浏览器的网页截图,可以编辑和注释您的截图。

02 说明

FireShot最新版插件能够截取各种形式的图片,整张截图、可视部分的、选定区域的都可以进行截图,也可以选择多种输出方式,同时FireShot还支持涂鸦、编辑截取的图片。

以上,是不是妥妥的惊喜效率工具?ITester软件测试小栈后台回复“谷歌插件”4个字,即可解锁本所有插件喔。如果大家还有其他实用插件分享,欢迎评论区留言。

更多系列文章

敬请期待


我是CoCo,计算机科学与技术专业,深漂大厂互联网民工(女),坐标深圳。5年工作经验,3年持续输出技术文。ITester软件测试小栈(ID:ITestingA)号主,Boss直聘好文社区签约作者,腾讯云社区优质创作者。专注于软件测试技术和宝藏干货分享,每周准时更新原创技术文章,每月不定期赠送技术书籍,愿我们在更高处相逢。喜欢记得星标⭐我,每周及时获得最新推送,第三方转载请注明出处。

想获取更多最新干货内容

快来星标 置顶 关注

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据