“进步不是勤奋者的功劳。它是懒惰者在尝试寻找更简单的方法时取得的成果。”
——罗伯特·海因莱因

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等等。有的时候你肯定想知道这些，就像我一样。