“进步不是勤奋者的功劳。它是懒惰者在尝试寻找更简单的方法时取得的成果。”
——罗伯特·海因莱因
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和状态，并查看在组件树中是如何更改和传播的。
我经常使用的一项很酷的功能是高亮显示重渲染的组件。
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开发的大坑之一。开发人员经常要考虑如何在不同的浏览器上呈现自己的网站。
我们通常选择的方法是在计算机上安装不同的浏览器，以便我们可以启动任何浏览器并在其上测试我们的网站。
这款扩展程序为你完成了所有工作。它让你可以使用桌面和移动设备上的各种浏览器来截取网页的屏幕快照，从而快速、果断地解答兼容性问题。
8.ColorPick Eyedropper
ColorPick Eyedropper有一个浮动面板，这个浮动面板悬停在网页中的元素上方，以显示元素的颜色。单击该元素会将所选元素的颜色复制到剪贴板。这是快速发现、复制和粘贴颜色的好方法。
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