立即领取|华润集团、宁德核电、东风岚图等 20+ 标杆企业数字化人才培养实践案例 了解详情
写点什么

提升前端开发效率:你应该知道的 10 个 Chrome 扩展程序

  • 2020-03-10
  • 本文字数:2451 字

    阅读完需:约 8 分钟

提升前端开发效率:你应该知道的10个Chrome扩展程序

“进步不是勤奋者的功劳。它是懒惰者在尝试寻找更简单的方法时取得的成果。”

——罗伯特·海因莱因

1.CSSViewer


这款工具用来识别和显示元素的 CSS 属性是非常方便的。它包含一个浮动面板,你可以将其悬停以检查页面上的元素。CSSViewer 将你选择的 CSS 显示在一个提示框中,使你可以轻松地复制所选的 CSS。


它比我们浏览器中的内置版本先进得多,后者只能显示其下方元素的宽度和高度。


https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en


2.Angury


这是我的最爱,也是我的 DevTool 扩展首选。


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


Augury 在 DevTools 中提供了丰富的 UI,你可以在其中:


  • 查看组件的 DI 树图

  • 编辑和更改组件中的属性

  • 发射事件

  • 还有更多功能……


当我想了解组件的变更检测触发器可以进入组件树多深时,我觉得这款工具是很有用的。


如果你是 Angular 开发人员,并且没有在 DevTools 中使用过 Augury,这次可不要错过它了。当你要直接从浏览器调试 Angular 应用程序时,Angury 就是你需要的一切。


https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en

3.React Developer Tools


可以将 React Developer Tools 视为“React 版的 Angury”。


这是 React 团队开发的,很棒的开发工具。


就像 Augury 一样,React Developer Tools 提供了一个内容丰富的 UI,我们可以在其中监控 React 组件中的事件流。你可以检查 React 组件的 props 和状态,随意更改 props 和状态,并查看在组件树中是如何更改和传播的。


我经常使用的一项很酷的功能是高亮显示重渲染的组件。


https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

4.JSONView


浏览器通常不擅长显示 JSON 数据。通常情况下,数据都会以黑白两种颜色显示,而且看起来十分密集,理解起来也很困难,尤其是在尝试定位深层嵌套的属性时会让人感觉特别麻烦。


JSONView 能格式化并美化 JSON 数据。它以彩色树状视图显示它们,让我们更容易识别属性和值。


https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

5.Library Sniffer

我经常会在浏览一些网页的时候想知道这个网页是用哪个框架构建的,以及它所使用的是哪些库。


对于有和我一样的需求的开发者,Library Sniffer 绝对是一个绝佳的选择。这款工具将为你提供网页上的详细信息,Library Sniffer 会告诉你,你正在浏览的网页到底是运行在哪个框架上,是 React、Angular、Vue、Svelte 还是 Wordpress 等等。有的时候你肯定想知道这些,就像我一样。


https://chrome.google.com/webstore/detail/library-sniffer/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh?hl=en

6.Web Developer


这是一个工具包。Web Developer 在你的浏览器上添加一个工具栏。这个工具栏有许多方便的道具,程序员和设计人员都可以在日常工作中用到它们,从而简化自己的工作。它的用途包括添加轮廓到元素、显示标尺、查找页面上所有损坏的图像、更改页面的布局和处理图像等。


它还将更多常用功能添加到了默认的 DevTools 检查器中。


https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

7.LambdaTest

浏览器兼容性永远是 Web 开发的大坑之一。开发人员经常要考虑如何在不同的浏览器上呈现自己的网站。


我们通常选择的方法是在计算机上安装不同的浏览器,以便我们可以启动任何浏览器并在其上测试我们的网站。


这款扩展程序为你完成了所有工作。它让你可以使用桌面和移动设备上的各种浏览器来截取网页的屏幕快照,从而快速、果断地解答兼容性问题。


https://chrome.google.com/webstore/detail/lambdatest-screenshots/fjcjehbiabkhkdbpkenkhaahhopildlh?ref=producthunt

8.ColorPick Eyedropper


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


https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en

9.CSSPeeper

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


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


如果你曾经试过在 chromeinspector 工具中从一个元素复制 CSS 样式代码,就能轻松理解 CSSPeeper 所带来的价值。


https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en

10.WhatFont


“排版是基于经验和想象力的二维架构”

——赫尔曼·萨普夫


在查看网页时,经常让我眼前一亮的是网页所使用的字体。如果我看上了某种字体,就会本能地单击鼠标右键来查看页面源,进而检查并揭示这一奇迹的源头。但这套流程对于这么简单而常见的东西来说有些过于复杂。


WhatFont 让字体查看起来更加容易。你可以将鼠标悬停在文本上以快速查阅其字体系列。


https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

附赠:Bit


除了上面的十个扩展程序外,Bit 也值得一提。Bit 不是 Chrome 扩展程序,但绝对是遵从“让你的开发工作更轻松”这一精神的工具。


你可以使用 Bit 从任何代码库中“获取”可重用组件,并将它们共享到 bit.dev 中的组件集合中。与你的团队成员一起使用它,可以最大程度地(在存储库内和在不同存储库之间)重用代码,加快开发速度,并使代码库更易维护。


因此,无论你是要创建自己的可重用组件的私有集合,还是要查阅由开源社区构建的无数组件列表,Bit 都是你的好伙伴(https://github.com/teambit/bit)。

小结

这些工具是我的最爱,因为它们使我的工作更加轻松快捷。如果你对此有任何疑问,或建议我添加、更正或删除任何内容,如果你有你觉得棒的选择,欢迎留言表达你的看法。


原文链接


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


2020-03-10 18:245517

评论 1 条评论

发布
暂无评论
发现更多内容

《分布式Java应用基础与实践》.pdf

田维常

分布式 电子书

快速了解阿里微服务热门开源分布式事务框架——Seata

比伯

Java 架构 微服务 seata

JVM真香系列:堆内存详解

田维常

Java JVM 堆栈 虚拟机

当代程序员必备技能(算法)之:递归详解

Java架构师迁哥

深入浅出node中间件原理

徐小夕

Java node.js 大前端 中间件 数据可视化

十年资深架构师分享:如果这么做还收不到一线互联网大厂面试,请来找我。

Java架构师迁哥

薇娅和李佳琦带货百亿奇迹背后是这些技术团队的努力

阿里云视频云

apipost如何设置断言

测试人生路

接口测试

双十一背后的技术

anyRTC开发者

大数据 AI 音视频 WebRTC RTC

详解快速开发平台与工作流通用组件的设计规范

Marilyn

敏捷开发 企业应用

基于Fabric的性能测试与调优实践

华为云开发者联盟

区块链 算法 测试 fabric 华为云

架构师Week4作业

lggl

作业

[译文]设计模式01 – 抽象工厂模式(附代码实例)

YoungZY

设计模式 译文

堪称完美!11月华为首发Spring响应式微服务,三管齐下

小Q

Java spring 学习 架构 面试

【活动回顾】Flutter实时音视频应用场景实践

ZEGO即构

flutter RTC

曾陷“数据风暴”危机的赛默飞世尔如何化险为夷的?

华为云开发者联盟

数据库 大数据 云服务 华为云 RDS

Linux一切皆文件,如果你没做到这一步,那这就是句话而已

小Q

Java Linux 学习 架构 面试

实时音视频面视必备:快速掌握11个视频技术相关的基础概念

JackJiang

音视频 即时通讯 视频

秋风到,ModelArts“ AI市场算法Fast-SCNN指南”秋膘贴起来

华为云开发者联盟

AI 算法 开发 OBS modelarts

面经手册 · 第17篇《码农会锁,ReentrantLock之AQS原理分析和实践使用》

小傅哥

Java AQS CAS unsafe CLH

架构师Week4总结

lggl

作业

氪信团队再夺冠!易观数科第四届OLAP算法大赛前三甲诞生!

易观大数据

数据库 算法 OLAP

堪称完美!11月华为官方首发Spring响应式微服务,Spring+SpringBoot+SpringCloud三管齐下

Java架构追梦

Java 架构 微服务 springboot SpringCloud

[Pulsar 社区周报] 2020-10-31 ~ 2020-11-06

Apache Pulsar

大数据 开源

护航11.11,如何筑牢安全防御系统?

京东科技开发者

云计算 云安全 DDoS

2020双11:看阿里背后的黑科技!

人工智能 云计算 大数据 运维 黑科技

三部门联合发言不得虚报直播销售额业绩:双十一何以刺激了用户的购买欲

石头IT视角

阿里P8整理出SQL笔记:收获不止SOL优化抓住SQL的本质

Java~~~

MySQL 阿里 sql查询 SQL优化 SQL光标

深入解析 Flink 的算子链机制

Apache Flink

flink 流计算

再拔头筹,FusionInsight为华为云大数据打造硬实力

华为云开发者联盟

大数据 数据仓库 数据湖 FusionInsight 华为云

携oneAPI Gold版本和服务器GPU 英特尔领先业界进入XPU时代

E科讯

提升前端开发效率:你应该知道的10个Chrome扩展程序_文化 & 方法_Chidume Nnamdi_InfoQ精选文章