提高前端开发效率：你应该知道的10个Chrome扩展CSSViewer是一个用于识别和显示元素CSS属性的便捷工具。它包含一个浮动面板，您可以将鼠标悬停在上面以检查页面上的元素。CSSViewer在工具提示中显示您选择的CSS，使您可以轻松复制所选的CSS。它比我们浏览器中的内置版本先进得多，后者只能显示其下方元素的宽度和高度。https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=enAngury这是我最喜欢的DevTool扩展工具。Augury是由Rangle.io构建的DevTool扩展，用于调试、分析和优化Angular项目。Augury在DevTools中提供了丰富的UI，您可以在其中：查看组件的DI树视图编辑和更改组件中的属性发出事件等等...当我想了解组件的更改检测触发器可以进入组件时，我找到了这个工具当树很深时很有用。如果你是一名Angular开发者，还没有在DevTools中使用过Augury，这次不要错过。当您想直接从浏览器调试Angular应用程序时，Angury是您需要的一切。https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=enReact开发工具将React开发工具视为“React的愤怒”。这是一个很棒的开发工具，由React团队开发。就像Augury一样，ReactDeveloperTools提供了丰富的UI，我们可以在其中监控React组件中的事件流。您可以检查React组件的属性和状态，随意更改属性和状态，并查看更改如何通过组件树传播。我经常使用的一个很酷的功能是突出显示重新渲染的组件。https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=enJSONView浏览器通常不擅长显示JSON数据。数据通常以黑白方式呈现，看起来很密集且难以理解，尤其是在尝试定位深层嵌套的属性时。JSONView可以格式化和美化JSON数据。它以彩色树视图显示它们，从而更容易识别属性和值。https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobhLibrarySniffer我经常浏览一些网页，想知道这个网页是用哪个框架构建的，它使用了哪些库。对于和我有相同需求的开发者来说，LibrarySniffer绝对是一个绝佳的选择。该工具将为您提供网页上的详细信息。LibrarySniffer会告诉你你正在浏览的网页是运行在哪个框架上的，是React、Angular、Vue、Svelte、Wordpress等等。有时候你必须知道这些，就像我一样。https://chrome.google.com/webstore/detail/library-sniffer/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh?hl=enWebDeveloper这是一个工具包。WebDeveloper向您的浏览器添加一个工具栏。这个工具栏有很多方便的道具，程序员和设计师都可以在日常工作中使用它们来简化他们的工作。它的用途包括向元素添加轮廓、显示标尺、查找页面上所有损坏的图像、更改页面布局、操纵图像等。它还为默认的DevTools检查器添加了更多常用功能。https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhmLambdaTest浏览器兼容性一直是网页开发的陷阱之一。开发人员经常需要考虑如何在不同的浏览器上呈现他们的网站。我们通常选择的方法是在我们的计算机上安装不同的浏览器，以便我们可以启动任何浏览器并在其上测试我们的网站。此扩展程序为您完成所有工作。它可以让您在桌面和移动设备上使用各种浏览器截取网页，以快速、果断地回答兼容性问题。https://chrome.google.com/webstore/detail/lambdatest-screenshots/fjcjehbiabkhkdbpkenkhaahhopildlh?ref=producthuntColorPickEyedropperColorPick吸管有一个浮动面板，悬停在网页中的元素上以显示元素的颜色。单击元素会将所选元素的颜色复制到剪贴板。这是快速发现、复制和粘贴颜色的好方法。https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=enCSSPeeper另一个用于检查和复制元素样式的好工具。使用CSSPeeper，您可以将鼠标悬停在网页上的任何元素上，然后单击一下即可复制该元素的样式。如果您曾尝试从chromeinspector工具中的元素复制CSS样式代码，您可以轻松理解CSSPeeper带来的价值。https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=enWhatFont“排版是一种基于经验和想象力的二维架构。-HermannSapf查看网页时，经常引起我注意的是网页上使用的字体。如果我看到某种字体，我会本能地点击鼠标右键查看该页面的来源，以检验并揭示这个奇迹的来源。但是对于如此简单和常见的事情来说，这个过程有点过于复杂。WhatFont使字体查看更容易。您可以将鼠标悬停在文本上以快速查阅其字体系列。https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en奖励：Bit除了上面的十个扩展，Bit也值得一提。Bit不是Chrome扩展，但绝对是一个本着“让您的开发工作更轻松”精神的工具。您可以使用Bit从任何代码库中“抓取”可重用组件，并将它们共享到bit.dev中的组件集合中。与您的团队成员一起使用它可以最大限度地重用代码（在存储库内和不同存储库之间），加快开发速度，并使代码库更易于维护。所以无论你是想创建自己的可重用组件私有集合，还是查看开源社区构建的无数组件列表，Bit都是你的好伙伴：https://github.com/teambit/bit
