孔子曰：“工欲善其事,必先利其器”这句话现在运用到现在的web前端开发中也是非常的贴切的，要想要做好一个产品的话那么肯定是要用到好的工具的，那么web前端开发用什么工具呢?今天粤嵌科技就来给大家整理下。

　　1.APICloud Studio3

　　基于Vscode深度定制，可以快速轻松地构建多端应用。并且为 Windows、Mac和Linux提供了出色的开发体验，开发者可以使用自己喜欢的操作系统进行开发。

　　2.文本编辑器：Sublime Text

　　前端开发人员花了大量的时间编码，这通常是在文本编辑器或IDE上完成的。如果使用的是文本编辑器，那么需要确保它可以通过为执行冗余和平凡的任务来提高工作效率。其中一些任务包括自动完成、文本突出显示、增强的搜索和替换操作，以及制表符和空格之间的转换。

　　3.共享组件：Bit

　　使用Bit(Github)，可以轻松地从任何代码库中“获取”组件并将它们共享到bit.dev中的集合(模块化库)中。

　　4. 实时调试: Chrome DevTools

　　当你在浏览器上测试你的终产品时，实时调试工具可以帮助你实时更改网页。你可以操作DOM、编辑CSS和运行自定义JavaScript来在不同的级别调试代码。

　　5. 用于源代码版本控制的GUI：GitHub Desktop

　　无论你的经验多么丰富，使用版本控制系统来管理源代码通是一个不错的选择。如果是在团队中工作，版本控制有助于跨同事管理代码。在过去的十年中，我们看到了分布式版本控制系统的兴起，其中的两个选项是Git和Mercurial。虽然它们很容易安装在本地机器上，但是我们在这篇文章中讨论两个GUI工具。

　　GitHub Desktop是GitHub用于管理Git存储库的桌面GUI工具。它只支持Windows和Mac操作系统。GitHub Desktop提供了常见的Git架构的图形化替代方案。如果使用Atom，它与GitHub桌面集成得相当好。GitHub Desktop很容易与GitHub存储库集成，不访问网站就可以管理它们。GUI工具在代码审查和浏览项目历史期间特别有用。

　　6. 数据可视化工具: D3.js

　　网民每天产生大量的数据。这些数据被收集、处理和分析，以产生见解。在分析数据的过程中，一个关键的步骤是将发现呈现给决策者。一个决策者可能是一个用户，他正在展示自己的购物习惯。让您快速可视化数据的图形化工具在过去几年得到了流行。

　　7. Code Playground: Codepen

　　我们可能偶尔会需要与同行共享带有完全交互式预览的前端代码片段以获得改进意见。在这种情况下，代码游乐场是一个基于云的IDE，它允许使用HTML、CSS和JavaScript编写和预览代码片段。可以与同事共享这些片段，或者将它们嵌入到帖子中。它们在编写文档、教程和指南时非常有用。

　　8.设计灵感：Adobe Color

　　在你在画板上创造那些令人惊叹的设计之前，你可能希望寻找灵感。Adobe Color(以前的Kuler)是一个颜色主题应用程序，能够创建、浏览和共享颜色主题，然后可以与其他Adobe应用程序同步。颜色的使用是设计的一个重要部分。如果你想发现很好的颜色搭配，你一定要试试这个工具。

　　9.辅助工具：JAWS

　　Web可访问性是Web内容对于残障用户的可阅读和可理解性。根据你的终用户的国家，可能需要遵守可访问性法律。除此之外，可能还需要遵守W3C设置的可访问性标准。对于网页的可访问性有一些简单的检查，除此之外，还需要依赖某些工具来帮助我们发现潜在的漏洞。在本节中，我们将讨论三大类web可访问性工具。

　　10.站点速度监控工具：PageSpeed Insights

　　网站速度是决定你的搜索排名的一个重要因素。除了SEO优化，网站速度在页面加载过程中对用户留存也起着至关重要的作用。PageSpeed Insights是谷歌自己的站点速度监控工具。它是免费使用的，只需要输入页面的URL就可以执行测试。可以选择测试如何在移动设备或桌面中工作，但无法修改测试位置。该工具提供了具体的行动项目，有助于提高网站速度。

　　11.跨浏览器测试工具

　　跨浏览器测试是跨各种设备和浏览器评估web应用程序的过程。你可能应该选择浏览器-设备组合来使用用户统计数据进行测试。执行此类测试的工具是BrowserStack，它可以提供对大量实际设备的访问，以便在其上测试web应用程序。

　　Web前端开发用什么工具?粤嵌科技已经给大家整理了11款工具了，每一款工具都是给你的开发带来便利的。如果说你想要学习web前端的话那么粤嵌科技欢迎大家来我们公司web前端培训班进行考察，也可以先点击我们文章下面的获取试听资格按钮来获取我们的web前端课程免费试听资格，在试听中可以更加深入的了解粤嵌科技。