在这篇文章中，咱们向您展现了一个将工具和服务分类为bucket的框架，它可能会在前端开发过程中对您有所帮忙。在每个类别中，咱们都会探讨一个受欢迎的抉择，同时也会给您一个可供选择的抉择，以防您不批准咱们最后的抉择。让咱们毫不迟疑地进入面向前端开发者的工具和服务的世界。

应用正确的工具集对于进步工作效率和更快地实现工作通常是至关重要的。然而，随着可供选择的工具和服务越来越多，可能很难抉择适宜您的工作格调的工具和服务。

1.APICloud Studio3

基于Vscode深度定制，能够疾速轻松地构建多端利用。并且为 Windows、Mac和Linux提供了杰出的开发体验，开发者能够应用本人喜爱的操作系统进行开发。

  • 多端编译：针对当初多终端编译需要，无论是面向Android、iOS、Web、App还是小程序打造利用, Studio3都能够帮忙开发者疾速编译对应终端的代码。
  • AVM语法和扩大API反对：借助Vscode的语法突出显示和主动实现性能, Studio3为AVM代码段、格局、变量类型、函数定义和导入的组件以及APICloud扩大API等，提供了舒服的高亮标记、欠缺的智能帮忙提醒和主动实现性能。
  • 实时预览和真机调试：可间接在编辑器中调试代码和预览成果，或者应用WiFi、USB启动AppLoader，在实在的手机中进行调试和性能验证，并应用断点、调用堆栈和交互式控制台进行调试。
  • 简略高效的代码治理：反对Git进行代码治理，同时內置SVN简化简单的Git操作，提供简洁明了的代码治理过程。能够间接在编辑器中检査代码差别，增加文件并进行提交，或者从云端检出所托管的代码到编辑器
  • 云端一体：放弃和云端买通，在编辑器中即实现创立/导入我的项目、云编译、自定义Loader，以及模块治理等操作。
  • 可扩大和可定制:齐全保留和兼容Vscode插件机制。如果须要更多功能，可通过装置扩大实现增加新的语言、主题、调试器、连贯到其余服务等，得益于Vscode优良的插件治理性能，应用扩大程序在独自的过程中运行，它们不会升高编辑器的性能。

[Studio3帮忙文档]

[Studio3下载地址]

技术社区论坛答疑

2.文本编辑器：Sublime Text

前端开发人员花了大量的工夫编码，这通常是在文本编辑器或IDE上实现的。如果应用的是文本编辑器，那么须要确保它能够通过为执行冗余和平庸的工作来进步工作效率。其中一些工作包含主动实现、文本突出显示、加强的搜寻和替换操作，以及制表符和空格之间的转换。

文本编辑器的常见抉择是Sublime text，这是一种跨平台的基于GUI的文本编辑器。Sublime Text容许在文件和我的项目之间无缝地转换，能够将注意力更多的集中在代码上。尽管它提供了相当多的性能，然而因为它的可扩展性，Sublime Text的受欢迎水平直线回升。https://www.sublimetext.com

一次性应用Sublime Text的许可证价格为80美元，不过也有一个功能齐全的不定时试用版。

Sublime Text的一个很好的替代品是Atom，它是由GitHub创立的一款收费和开源的文本编辑器。它提供了能够通过Sublime Text取得的各种各样的性能，还增加了与Git和GitHub桌面的集成。此外，Atom还提供了一种电传类型个性，容许协作者在同一文档上协同工作。

尽管Sublime Text和Atom是在本地零碎中工作的很好的抉择，然而您可能感觉有必要应用一个非gui的基于终端的文本编辑器。当近程登录到服务器并间接更新服务器上的文件时，可能须要应用这样的工具。风行的基于终端的文本编辑器是VIM和Emacs。

3.共享组件：Bit

应用Bit（Github），能够轻松地从任何代码库中“获取”组件并将它们共享到bit.dev中的汇合（模块化库）中。

Bit别离对每个组件进行版本控制，当您筹备共享它时，它将在一个独立的环境中构建和测试，以确保正在共享真正可重用的、没有耦合到我的项目的组件。

能够应用Bit的搜寻工具和playground浏览汇合，npm装置一个共享组件，就像任何其余包一样，或者对它进行Bit导入，以便在本地开发环境中批改它(甚至将批改后的版本推回共享汇合)。

这是逐渐构建模块化组件库的好办法。每当构建一个值得共享的可重用组件时，只需将其推入共享位汇合。

应用它来改良与团队的合作，最大化代码重用，构建更可伸缩和可保护的代码，并保持一致的UI。

Bit反对React，通过TypeScript, Vue, Angular等多种形式进行反馈。

4. 实时调试: Chrome DevTools

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

内置在谷歌Chrome和其余基于Chrome浏览器中的Chrome DevTools能够帮忙你在运行中执行调试工作。谷歌Chrome占据了将近三分之二的市场份额，而基于Chrome的底层浏览器也占有相当大的市场份额。所有这些浏览器都装备了Chrome DevTools的一个版本，这使得它成为你抉择进行实时调试的最容易应用的工具之一。

自从谷歌Chrome公布以来，Chrome的开发工具就曾经存在了，在这一类别中特地要提到Firebug，它是在2006年公布的。Firebug当初曾经停产了，然而Firefox开发人员工具是基于Firebug的代码开发的。

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

无论你的教训如许丰盛，应用版本控制系统来治理源代码通是一个不错的抉择。如果是在团队中工作，版本控制有助于跨共事治理代码。在过来的十年中，咱们看到了分布式版本控制系统的衰亡，其中最风行的两个选项是Git和Mercurial。尽管它们很容易装置在本地机器上，然而咱们在这篇文章中探讨两个GUI工具。

GitHub Desktop是GitHub用于治理Git存储库的桌面GUI工具。它只反对Windows和Mac操作系统。GitHub Desktop提供了常见的Git架构的图形化代替计划。如果应用Atom，它与GitHub桌面集成得相当好。GitHub Desktop很容易与GitHub存储库集成，不拜访网站就能够治理它们。GUI工具在代码审查和浏览我的项目历史期间特地有用。

如果应用Mercurial而不是Git，可能想尝试应用BitBucket的SourceTree。SourceTree只反对Windows和Mac操作系统。如果你应用的是基于Linux的操作系统，那么最好的抉择是尝试GitKraken，只管它的收费版本性能无限.

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

网民每天产生大量的数据。这些数据被收集、解决和剖析，以产生见解。在剖析数据的过程中，一个要害的步骤是将发现出现给决策者。一个决策者可能是一个用户，他正在展现本人的购物习惯。让您疾速可视化数据的图形化工具在过来几年失去了风行。

D3.js是一个风行的JavaScript数据可视化库。它容许从多个起源读取数据，并且依据理论需要来进行操作，疾速创立可视化内容。它容许矢量图形在须要时具备很大的灵活性。D3.js中的高级函数也容许开发者增加动画和图表的交互性。同时D3.js领有10年的历史，曾经倒退成为一个相当大的社区。尽管晚期版本的D3.js对于初学者来说很难了解，但较新的版本对用户更加敌对。

D3.js提供了大量可供选择的函数。如果想要一个更简略的界面来创立图表，您应该尝试dimple。Dimple是在D3.js上开发的一个包装器，它可能更快地创立图表。

7. Code Playground: Codepen

咱们可能偶然会须要与同行共享带有齐全交互式预览的前端代码片段以取得改良意见。在这种状况下，代码游乐场是一个基于云的IDE，它容许应用HTML、CSS和JavaScript编写和预览代码片段。能够与共事共享这些片段，或者将它们嵌入到帖子中。它们在编写文档、教程和指南时十分有用。

CodePen容许开发人员创立其工作演示，以在平台和设施之间共享。能够在CodePen演示和我的项目中应用内部托管的资源。如果须要解决，CodePen能够“分叉”来自其余开发人员的演示。CodePen是收费应用的，付费版本起价为$ 8 / 月

作为CodePen的另一种抉择，JSFiddle是比拟古老的Code Playground之一，它是许多后续工具的灵感起源。

8.设计灵感：Adobe Color

在你在画板上发明那些令人惊叹的设计之前，你可能心愿寻找灵感。Adobe Color(以前的Kuler)是一个色彩主题应用程序，可能创立、浏览和共享色彩主题，而后能够与其余Adobe应用程序同步。色彩的应用是设计的一个重要局部。如果你想发现很好的色彩搭配，你肯定要试试这个工具。

Dribbble是一个设计师社区， Dribbble容许你有选择地分享你的我的项目(以镜头模式)来分享你的工作并取得反馈。

9.辅助工具：JAWS

Web可拜访性是_Web_内容对于残障用户的可浏览和可了解性。依据你的最终用户的国家，可能须要恪守可拜访性法律。除此之外，可能还须要恪守W3C设置的可拜访性规范。对于网页的可拜访性有一些简略的查看，除此之外，还须要依赖某些工具来帮忙咱们发现潜在的破绽。在本节中，咱们将探讨三大类web可拜访性工具。

相当一部分视力不全或没有视力的用户依附屏幕阅读器来浏览web内容。屏幕阅读器，顾名思义，是为用户浏览网页内容以进行交互。JAWS是一款风行的Windows屏幕阅读器。当你测试你的网站时，确保你通过屏幕阅读器来查看它的兼容性。

WAVE是一种评估互联网上任何网站可拜访性状态的工具。它将调查结果演绎为三类:谬误(红色)、正告(黄色)和其余。

某些有癫痫偏向的用户可能对屏幕上闪动的内容很敏感。光敏癫痫剖析工具(PEAT)是一个在Windows上的工具，能够让你查看你的网站是否有任何这样的破绽。

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

网站速度是决定你的搜寻排名的一个重要因素。除了SEO优化，网站速度在页面加载过程中对用户留存也起着至关重要的作用。PageSpeed Insights是谷歌本人的站点速度监控工具。它是收费应用的，只须要输出页面的URL就能够执行测试。能够抉择测试如何在挪动设施或桌面中工作，但无奈批改测试地位。该工具提供了具体的口头我的项目，有助于进步网站速度。

PageSpeed Insights是一个评估网站速度的好工具，用 WebPageTest，一个收费和开源的工具来测试你的网站速度也是一个不错的抉择。它容许您批改设施、浏览器、测试地位和连贯节流。此外，还能够在WebPageTest套件上编写具体的测试脚本。

11.通信工具：Slack

在过来，电子邮件通常是开发者沟通的惟一媒介。代码审查和通过电子邮件共享文件等工作可能会变得难以跟踪。Slack是一个基于云计算的即时消息传递平台，它集成了大量相干服务，将通信带到繁多的媒体上。例如，你能够集成Slack和GitHub o，让你更新最新的存储库。还能够将它与代码跟踪器集成，以便在报告新bug时向特定的团队成员收回警报。甚至能够创立和配置本人的聊天机器人来响应自定义命令。

在整合了Atlassian公司的Hipchat之后，Slack坚固了其作为市场领导者的位置。如果你想要一个Slack的替代品，你能够试试微软的Yammer，它在与微软套件中的应用程序集成方面做得很好。

12. 跨浏览器测试工具

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

BrowserStack利用Selenium服务器在保留在近程地位的理论设施上自动化测试。在部署应用程序时，能够在预先确定的设施列表上触发一系列测试。当测试完结时，能够拜访通过仪表板执行的测试的截图和视频。

BrowserStack的定价是基于应用状况的，不过你能够收费试用。对于小企业开发人员来说，这个价格可能难以累赘，在这种状况下，应该尝试下Selenium，它是一种通过浏览器主动进行跨浏览器测试的工具Selenium的毛病是只能应用本人的设施进行测试。

对于前端开发人员的最佳工具的最初思考

在这篇文章中，咱们摸索了各种能够帮忙前端开发者进步工作效率的工具。你在开发周期中还应用了哪些其余工具?请在上面的评论中通知咱们。