【ArchSummit】如何通过AIOps推动可量化的业务价值增长和效率提升?>>> 了解详情
写点什么

提升前端开发效率:你应该知道的 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:244976

评论 1 条评论

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

Karmada: 云原生多云容器编排平台

华为云原生团队

开源 容器 k8s多集群管理 多云管理平台 多云

TCP 三次握手

W🌥

计算机网络 TCP/IP 8月日更

Go 效率工具集合

潇洒哥 - 老苗

Go 语言

耗时3年,从小厂逆袭,坐上美团L8技术专家(面经+心得)

Java 编程 程序员 架构 面试

绝了!阿里甩出“源码阅读指南”,原来源码才是最经典的学习范例

Java 编程 架构 面试 程序人生

一文带你了解大厂亿级并发下高性能服务器是如何实现的!

Linux服务器开发

事件驱动 多进程 Linux服务器开发 IO多路复用 高性能服务器

舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践

API7.ai 技术团队

nginx 开源 网关 kong APISIX

企业在运营过程中需要解决的五项网络安全项目

九河云安全

YYDS《剑指Offer》再续新篇,百万程序员人手一册

博文视点Broadview

想聊天?自己搭建个聊天机器人吧!

百度开发者中心

人工智能 最佳实践 方法论 飞桨 语言 & 开发

大数据集群跨多版本升级、业务0中断,只因背后有TA

华为云开发者联盟

大数据 FusionInsight

跟我读论文丨ACL2021 NER BERT化隐马尔可夫模型用于多源弱监督命名实体识别

华为云开发者联盟

BERT 弱监督 隐马尔可夫 CHMM HMM模型

高防云服务器服务器的价值会随着时间而扩展,从"成本效率"扩展到"新服务和技术"

九河云安全

企业数字化转型第一步,云服务器的部署以及搭建

九河云安全

连续霸榜丨EasyDL到底有多强?

百度大脑

人工智能 EasyDL

程序员投入时间和精力实现财富增长之道,这可能会伴随你程序员整个生涯(请不要连续点赞)

孙叫兽

程序员 赚钱 教程 引航计划 签约计划第二季

高防服务器大数据时代下的最佳应用途径

九河云安全

贡献者,是衡量开源项目的金指标

API7.ai 技术团队

开源 网关 APISIX

5招教你实现多线程场景下的线程安全

华为云开发者联盟

Java 线程 多线程 线程安全

知乎李大海对话阿里云贾扬清:透视AI应用难题与未来趋势

阿里云大数据AI技术

读完这份JVM高级笔记,彻底玩转Java虚拟机,面试再也不用“虚”

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

数据库的简述与常用操作指南

行者AI

数据库

对象存储手把手教四 | Bucket 生命周期管理

QingStor分布式存储

对象存储 分布式存储 生命周期 数据管理

Asop 之 消息处理机制

Qunar技术沙龙

android Linux 消息队列 安卓 epoll

图谱可视化|手把手教你采集明星人物关系并进行图谱展示

Python研究者

知识图谱 8月日更

使用FL studio中文版进行音乐合并和剪切

懒得勤快

FastApi-11-模板渲染

Python研究所

FastApi 8月日更

云服务器市场改变了行业市场的发展规模

九河云安全

Redis扩展数据类型详解

码农参上

redis 8月日更

7金5银,中国跳水梦之队背后的"黑科技"是什么?

百度大脑

人工智能 黑科技 跳水队

波场DAPP钱包开发|波场DAPP特点

Geek_23f0c3

钱包系统开发 DAPP智能合约交易系统开发 波场DAPP 波场钱包

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