共计 5151 个字符，预计需要花费 13 分钟才能阅读完成。
在这篇文章中，咱们向您展现了一个将工具和服务分类为 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 的毛病是只能应用本人的设施进行测试。
对于前端开发人员的最佳工具的最初思考
在这篇文章中，咱们摸索了各种能够帮忙前端开发者进步工作效率的工具。你在开发周期中还应用了哪些其余工具? 请在上面的评论中通知咱们。