VOL 397
14
2022-06
今天距2023年201天
这是ITester软件测试小栈第397次推文
点击上方蓝字“ITester软件测试小栈“关注我，每周一、三、五早上 09:00准时推送，每月不定期赠送技术书籍。
微信公众号后台回复“资源”、“测试工具包”领取测试资源，回复“微信交流群”、“内推群”一起进群打怪。
本文2789字，阅读约需7分钟
Hi，大家好，我是CoCo。在之前的文章给大伙推荐了10款超好用的谷歌插件：测试人必备的10款效率插件，墙裂安利一波，今天继续推荐一波，方法好，下班早，妥妥的提高工作效率。
一
CSS Viewer
1
简介
CSS Viewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件，在Chrome中安装了CSSViewer插件以后，用户就可以在设计网页的时候，快速地模仿网页中某个元素的表现形式，这对于一些使用公共库的开发者来说会大大地节约开发时间(寻找api的时间)。
2
说明
点击Chrome右上角的CSSViewer插件按钮，这时候就可以把鼠标在网页中进行浮动，从而找到需要看到的CSS属性，当浮动到一个元素上的时候，CSSViewer插件会自动以弹出窗口的形式，提醒用户该元素的详细CSS内容，包括字体大小、CSS类名、背景颜色、宽度、高度等。
二
Visual Inspector
1
简介
Visual Inspector这款插件可以高效的帮助前端页面重构，高度视觉还原，也方便测试时进行UI走查，能快速发现页面和视觉稿的差异，减少大量和设计师的沟通成本。可以随意修改设计稿大小，位置，透明度，混合模式等，方便各种设计风格的UI对比。
2
说明
点击INSPECT按钮可以实时查看选中元素的盒子模型、样式以及与其它元素的标注，尤其是查看邻元素的间距标注功能，这个相当好用。点击水滴icon可以查看当前网站样式的所有颜色。F12结合Visual Inspector，更能发挥更大价值哦。
三
Json View
1
简介
Json View可以便捷的对没有经过格式化或经过unicode编码的json数据进行转化，查看 Json 结构、数据转码、缩进、格式化，直接显示出格式化后的数据，同时它还支持各种数据类型的语法高亮，以及节点的收缩和展开等，可以非常方便的查看接口返回数据。
2
说明
安装Json View之后，谷歌浏览器是自动识别json格式数据的，所以只要把json格式的文件用谷歌浏览器打开就可以。
四
Vimium
1
简介
Vimium这个名字其实是 Vim 和 Chromium 的合体，继承了Vim的常用操作，完全脱离鼠标来控制浏览器，是一款黑客级别的Chrome插件。对熟悉Linux的同学来说，简直是神器。
2
说明
该插件有许多的快捷键可使用，还有很多命令行，快捷操作，方便浏览。
五
Code Cola
1
简介
Code Cola是一款非常好用的能查看网页代码样式的Chrome CSS样式可视化插件，有了这款Code Cola插件，可以直接在浏览器上修改你打开的网页。
2
说明
将鼠标移动至网页的任意板块即可发现板块区域会变成蓝色，点击即可在上述窗口中显示其所具有的样式信息。点击黑色窗口即可对网页进行编辑，可以选择字号、行高、字色、字形、对齐方式、文字描边等等，只要点击一下功能，这里会显示下拉的菜单，自行填写即可。
六
Vue devtools
1
简介
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用,被称为“Vue 调试神奇” vue是数据驱动的, 利用这个插件，这样就能看到vue中每个组件的data、props、computed等多种属性和方法，为我们项目的开发与调试提供了很多的便利 。
2
说明
安装成功后，运行本地Vue项目，打开浏览器控制台如下，可以便捷的查看vueX的数据以及组件结构等，非常方便。
七
Reat Developer Tools
1
简介
使用React进行开发，那必不可少的就是React Developer Tools, 它是Fecebook出品的，同样使用 React Developer Tools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。
2
说明
通过它我们可以查看应⽤程序的 React 组件分层结构，⽽不是神秘的浏览器 DOM 结构表⽰。
八
Light House
1
简介
前端开发中，对于自己开发的app或者web page性能的好坏，一直是让前端开发很在意的话题。我们需要专业的网站测试工具，让我们知道自己的网页还有哪些需要更为优化的方面，Lighthouse可以实现前端性能检测。
2
说明
Lighthouse 插件会对网页的各个测试项的结果打分，并给出优化建议报告，是一个非常实用的可视化网站优化工具。
九
Clear Cache
1
简介
Clear Cache通过单击一个按钮清除缓存和浏览数据。使用此扩展快速清除缓存，无需任何确认对话框，弹出窗口或其他烦恼。
2
说明
点击图标即可清除缓存、cookie等，测试必备。 可以根据需要清除的数据定制Clear Cache，这些数据包括应用缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据，密码和WebSQL等。
十
Fireshot
1
简介
捕捉网页截图，编辑并将它们保存为PDF，JPEG，GIF，PNG或BMP；上传，打印，在Photoshop中打开，复制到剪贴板或电子邮件。FireShot的抓住了Chrome浏览器的网页截图，可以编辑和注释您的截图。
2
说明
FireShot最新版插件能够截取各种形式的图片，整张截图、可视部分的、选定区域的都可以进行截图，也可以选择多种输出方式，同时FireShot还支持涂鸦、编辑截取的图片。
以上，是不是妥妥的惊喜效率工具？ITester软件测试小栈后台回复“谷歌插件”4个字，即可解锁本所有插件喔。如果大家还有其他实用插件分享，欢迎评论区留言。
以上
That‘s all
更多系列文章
敬请期待
ITester软件测试小栈（ID：ITestingA），专注于软件测试技术和宝藏干货分享，每周准时更新原创技术文章，每月不定期赠送技术书籍，愿我们在更高处相逢。喜欢记得星标⭐我，每周及时获得最新推送，第三方转载请注明出处。
