分享 10 个超实用的 Chrome 扩展

更新日期: 2020-02-26阅读: 1.9k标签: 插件
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。


1. cssViewer

这个工具在识别和显示元素的CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在页面上任一元素上以查看它的所有CSS属性。您可以通过快捷键在CSSViewer的窗体中轻松复制您选定元素的样式。

也许您会感到奇怪,Chrome本身的开发者工具不是已经足够了吗,为什么我还要用它?

其实这个插件比我们浏览器中的开发者工具显示的信息更多也更先进。除了基础的元素的宽度和高度的盒子模型外,还包括了所有已生效的样式及更多信息。

 

2. Augury

Auury是由Rangle.io构建的DevTool扩展,用于调试、分析和优化angular项目。

Auury在DevTools中提供了丰富的UI,您可以:

  • 查看组件的依赖注入(DI)树图
  • 编辑及修改组件的属性
  • 发射事件
  • 等等…

我个人认为,它在我想要了解组件的变更检测触发器可以沿着组件树向下延伸到多深时很有用。
如果您是Angular开发人员,并且没有在您的DevTool中使用过Augury,那么这是件很可惜的事情。Augury有着您直接从浏览器调试Angular应用程序所需的一切,来试试吧。


3. react Developer Tools

这是React团队开发的很棒的DevTool。

就像Augury一样,React Developer Tools提供了一个丰富的UI,我们可以在其中监视React组件中的事件流。您可以检查React组件的属性和状态,随意更改属性和状态,并查看所作的变化在组件树中的传递过程。


4. JSONView

浏览器通常不太擅长显示JSON数据。数据通常以纯黑白的方式密集显示,这使得理解它非常困难,特别是您试图定位一个深度嵌套的属性时。
JSONView格式化和美化JSON数据。它以丰富着色的树状视图显示它们,使得标识属性和值变得更加容易。


5. Library Sniffer

我通常很想知道网页是基于什么框架构建的,或这个站点引用了什么库。
Library Sniffer在这方面对我的帮助很大。这个工具可以为你提供网页上的详细信息,无论它是基于类似React, Angular, vue, Svelte, Wordpress等平台或框架。


6. Web Developer

Web Developer会将工具栏添加到您的浏览器中。这个工具栏包含许多方便的工具,程序员和设计人员都可以在日常工作中使用它们,从而提高工作效率。它的范围从向元素添加轮廓、显示标尺、查找页面上的所有损坏图像到更改页面布局、操作图片等。
它将这些经常需要的功能添加到默认的DevTools检查器中。


7. LambdaTest

多浏览器的兼容性一直是一件令Web开发人员苦恼的事情。您的网站在不同的浏览器上的呈现是开发人员一直在考虑的问题。

我们通常选择在我们的机器上安装不同的浏览器,这样我们就可以在上面启动任何浏览器来测试我们的网站。
这个扩展可以为您做所有的事情。它使您可以在台式机和移动设备上使用不同的浏览器截取网页的屏幕截图,从而为兼容性问题提供了快速而决定性的答案。


8. ColorPick Eyedropper

ColorPick Eyedropper有一个浮动面板,它悬停在网页中的元素上方,显示元素的颜色。单击该元素会将所选元素的颜色复制到剪贴板。这是一个很好的方法,可以加快发现、复制和粘贴颜色所需的时间。


9. CSSPeeper

另一个检查和复制元素样式的出色工具。

使用CSSPeeper,您可以将鼠标悬停在网页中的任何元素上,然后单击鼠标即可复制元素的样式。

如果您曾经尝试从chrome inspector工具中的元素复制CSS样式代码,则可以轻松了解CSSPeeper带来的价值。


10. WhatFont

在浏览网页时,通常吸引我眼球的是页面中正在使用的字体。当我对某个文字感兴趣想要查看其使用的字体时,我会下意识地单击鼠标右键以打开开发人员工具,查看它的源代码。但是,这样还是太繁琐了。

WhatFont使字体查看更加容易。它使您在把鼠标悬停在文本上就能快速查看它使用的字体。


结论

以上只是基于我自己的理解,这些扩展是我的工作更加的轻松快捷。

链接: https://www.fly63.com/article/detial/7785

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!