🐎 ☘️ 💃🏼 每个Web开发人员都需要的浏览器扩展 😇 🧓🏼 💣

现代浏览器不仅是出色的Web浏览应用程序。

浏览器也是向Web开发人员提供大量方便工具的平台，以帮助他们创建出色的网站。除了内置工具外，开发人员还可以使用大量浏览器扩展。他认为，这篇文章的作者选择了最好的扩展，这些扩展旨在帮助程序员解决面对它们的各种任务。这些主要是Google Chrome浏览器的扩展程序。

用于React / Redux和Vue.js的开发工具

React和Vue.js是著名的前端开发工具。为了尽可能有效地使用它们，值得安装适当的浏览器扩展。React Developer Tools

扩展增强了开发人员工具的功能。使用它，您可以检查React组件，传递给组件的属性以及组件的状态。它可以为React开发人员带来真正的好处。

React Developer Tools

如果在使用应用程序状态时遇到任何问题，则可以使用 Redux DevTools扩展。它可以用于以不同方式排列的状态；与Redux一起使用时，它特别好用。顺便说一句，这是给您的提示。安装此扩展程序，然后访问airbnb.com等网站。它使用React / Redux，因此，在Redux DevTools的帮助下，您将能够找到该站点上页面状态管理的工作方式。对我来说-这非常有用。

Vue.js devtools与React Developer Tools相同，但适用于Vue.js。该扩展对于调试Vue组件非常方便，并且对使用此框架的每个人都非常有用。

Vue.js开发工具

Jsonview

您是否曾经想到过在其他程序员的浏览器中JSON数据看起来清晰准确，而在您的浏览器中却不是这样？也许整个观点是，其他人使用了JSONView扩展。此扩展非常快速且准确地格式化JSON数据。JSONView绝对是我最喜欢的浏览器扩展之一。

Jsonview

图书馆嗅探器

对于想要快速找出使用哪些工具，库或框架来创建他们查看的页面的任何人来说，Library Sniffer是一个很好的工具。例如，在Library Sniffer的帮助下，您可以找到创建网站的内容：WordPress，Drupal，React，Vue.js，AngularJS ...

图书馆嗅探器

CSS扫描2.0

CSS Scan 2.0是一个有用的扩展，允许开发人员仅将鼠标悬停在页面元素上即可浏览和复制CSS。是的，他只有一分。事实是，要使用它，您需要购买许可证。

CSS Scan 2.0

此扩展具有免费的替代版本 -CSS Peeper。它主要是为设计人员设计的，而不是为编写代码的人员设计的。

Web开发人员

Web Developer 扩展允许您为浏览器配备一个包含许多不同工具的面板。例如，在他们的帮助下，您可以关闭页面上的JavaScript，控制页面的位置以及处理图像。此扩展程序可用于Chrome和Firefox。

Web开发人员

什么字体

WhatFont是一个非常小的扩展，它使您可以识别网页上使用的字体。为了找出文本片段设计用于什么字体，足以启用扩展并将鼠标指针移到该片段上就足够了。如您所见，与他合作非常简单。与以前的扩展一样，它可以供在Chrome中工作的人和在Firefox中工作的人使用。

什么字体

卡洛斯拉

该ColorZilla扩展可以在Chrome和Firefox的使用。它为开发人员提供了获取颜色校样的工具，选择颜色的工具，渐变生成器以及其他处理颜色的有用工具。例如，您可以使用它来找出网页中任何像素具有的颜色。它存储使用颜色的历史记录，并包含用于查看调色板的工具。

卡洛斯拉

光谱

内容可访问性是现代Web开发的重要方面。事实是，许多人与网页交互的能力有限。这样的限制之一是色觉缺陷（CVD）。它影响一个人区分某些颜色的能力。使用Spectrum扩展，您可以研究适合各种CVD人群的场所。

光谱

网站选板

“ 站点调色板”扩展允许您从站点中提取站点上使用的颜色，并将其排列为调色板。它支持多种生成调色板的方法，允许您通过发布特殊链接来发布调色板，支持打印调色板的功能，并将其转换为PDF文件。并且这不限于站点调色板。

网站选板

托比

Toby 扩展旨在组织浏览器标签，以便在工作过程中不必保持打开大量标签的方式。这是一种易于使用鼠标操作的选项卡控制面板。此扩展可以积极影响Web开发人员的生产力。

托比

Talend API测试仪

Talend API Tester是一个很好的扩展，它允许您使用具有各种API的浏览器进行工作。这些可以是基于REST，SOAP和HTTP技术的API。例如，这类似于Postman。该扩展程序的免费版本支持执行所有类型的HTTP请求，安全的数据交换，身份验证。

Talend API测试仪

全页截屏

您是否曾经想过快速且没有不必要的动作来获取正在查看的页面的完整屏幕截图？如果是这样，那么“ 全屏截屏”扩展程序可能会派上用场。有了它，您可以获取PDF格式或图像形式的页面全部内容的屏幕截图。它甚至可以与支持滚动的元素以及elements一起使用iframe。

全页截屏

摘要

我们为Web开发人员审查了大约十二种浏览器扩展。我们希望您在其中找到对您有用的东西。

亲爱的读者们！您使用什么浏览器扩展进行Web开发？

每个Web开发人员都需要的浏览器扩展