12个前端开发必备开发的工具( 二 ) _前端开发

使用它来改进与团队的协作，最大化代码重用，构建更可伸缩和可维护的代码，并保持一致的UI 。
Bit支持React，通过TypeScript, Vue, Angular等多种方式进行反应。
4. 实时调试: Chrome DevTools当你在浏览器上测试你的最终产品时，实时调试工具可以帮助你实时更改网页。你可以操作DOM、编辑css和运行自定义JAVAScript来在不同的级别调试代码。
内置在谷歌Chrome和其他基于Chrome浏览器中的Chrome DevTools可以帮助你在运行中执行调试任务。谷歌Chrome占据了将近三分之二的市场份额，而基于Chrome的底层浏览器也占有相当大的市场份额。所有这些浏览器都配备了Chrome DevTools的一个版本，这使得它成为你选择进行实时调试的最容易使用的工具之一。

文章插图
【12个前端开发必备开发的工具】
自从谷歌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应用程序同步。颜色的使用是设计的一个重要部分。如果你想发现很好的颜色搭配，你一定要试试这个工具。