转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

原文出处:https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e

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使字体查看更加容易。它使您在把鼠标悬停在文本上就能快速查看它使用的字体。

结论

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

如果您对上面的内容有任何补充,欢迎评论告诉我,谢谢!

前端开发:这10个Chrome扩展你不得不知的更多相关文章

  1. 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)

    前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...

  2. 【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)

    项目名称:github-notification 项目地址:https://github.com/WQTeam/github-notification 说明:本人打算抽时间学习前端(html + cs ...

  3. 前端开发中的一些chrome插件推荐

    这篇博客推荐的都是谷歌chrome浏览器插件,理论上,与之相同内核的浏览器都能使用.由于是谷歌插件,所以在天朝的网络,你懂的! 红杏 专为 学者 .程序员.外贸工作者 打造的上网加速器.我们相信,上网 ...

  4. Chrome浏览器扩展开发系列之八:Chrome扩展的数据存储

    Google Chrome浏览器扩展可以使用如下任何一种存储机制: HTML5的localStorage API实现的本地存储(此处略) Google的chrome.storage.* API实现的浏 ...

  5. 开发人员必备的 Chrome 扩展

    Firebug:不用多介绍了吧 https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSni ...

  6. Web前端开发人员实用Chrome插件收集

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  7. 推荐几个Web前端开发实用的Chrome插件

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  8. Web前端开发Chrome插件

    参考:http://www.cnblogs.com/sosoft/p/3490481.html 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员 ...

  9. Web前端开发实用的Chrome插件

    Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...

随机推荐

  1. lvs+keepalived部署k8s v1.16.4高可用集群

    一.部署环境 1.1 主机列表 主机名 Centos版本 ip docker version flannel version Keepalived version 主机配置 备注 lvs-keepal ...

  2. IDEA使用 磨刀霍霍向代码

    工欲善其事,必先利其器 ,当下有数不清的 Java 程序员将石器时代的 Eclipse 替换成了现代化的智能开发工具 InteliJ IDEA ,写代码的小日子过得不亦乐乎(玩笑话,两者各有千秋,看个 ...

  3. 如何添加.pch文件

    1.Create a pch , call name is project+xxx.pch For example: DuoME-PrefixHeader.pch 2.在project——>Bu ...

  4. numpy 其它常用方法

    一.创建特殊的数组 1.ones() 语法 np.ones(shape, dtype=None) # shape 创建数组的shape # dtype 指定数组的数据类型 例子 import nump ...

  5. 安装Jupyter Notebook

    1.安装Ipython pip3 install -i https://pypi.douban.com/simple ipython 2.安装jupyter pip3 install -i https ...

  6. redis集合

    存值 r1 = conn.sadd('urls', 'www.bing.com') r2 = conn.sadd('urls', 'www.baidu.com') 若要存入集合的值已存在(redis) ...

  7. vue计算属性例子

    不使用计算属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. git使用中遇到的问题

    1.拉取时报错:Permission denied (publickey) 先检查一下你的乌龟设置是否用的不是乌龟自己的SSH 2.TortoiseGit报错: Couldn’t load this ...

  9. Commvault Oracle备份常用命令

    在进行Oracle数据库备份的配置.发起和恢复的过程中,需要用到许多Oracle数据库本身的命令.在此章节中进行命令的梳理,供大家参考. Oracle用户和实例相关命令 Linux/Unix平台 # ...

  10. Arrays.asList()用法梳理

    Arrays.asList()用法梳理 asList概述 Arrays是java容器相关操作的工具类,asList方法将Array转换为list,是Array和List之间的桥梁. asList本质 ...