相信很多朋友都知道前端开发是近几年来技术领域热门的专业之一。起初前端开发人员只需知道一些HTML、CSS，可能还有jQuery，就可以创建交互式网站；但现在面对一个广泛而不断变化的生态系统，开发各种技能；需要掌握大量的工具、库和框架；前端开发人员还应该不断地投资自己，学习新知识。前端开发工具有哪些？今天就跟小编一起来看看吧~

1、Visual Studio

缩写为VS，来源于微软公司开发工具包系列产品，是Windows平台上最受欢迎的应用程序集成开发环境(IDE)。集成开发环境指的是为程序开发提供环境的应用程序，通常包括代码编辑器，编译器，调试器以及图形化用户界面工具。简单地说，VisualStudio是一款应用广泛的开发工具，它可以用于开发功能强大的网站。VisualStudio使用习惯后，开发效率很高。VisualStudio是动态和静态都好开发的。

2、PageSpeed Insights

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

3、Sublime Text

Sublime Text以其优美的用户界面和极其强大的功能被誉为“神级”代码开发工具。Sublime Text支持多种编程语言的语法高亮显示，具有优秀的代码自动完成功能。它也有片段的功能，可以保存常用的片段，需要的时候随时调用。Sublime Text支持VIM模式，大部分VIM模式的命令都可以使用。

Sublime Text还具有良好的可扩展性，完全开放的自定义配置和神奇实用的编辑状态恢复功能，支持强大的多行选择和多行编辑。

它的编辑器的特点是支持界面上的各种布局和代码缩略图。使用右侧的文件缩略图滑块，能够轻松观察文件中当前窗口的位置。

4、Chrome DevTools

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

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

5、Prettier Playground

Prettier 是一个代码格式化工具，支持格式化 JavaScript 代码（包括 ES2017、JSX、Angular、Vue、Flow、TypeScript 等）。Prettier 会移除代码原本的样式，替换为遵循最佳实践的标准化、一致的样式。IDE 大多支持 Prettier 工具，不过 Prettier 也有在线版本，让你可以在浏览器里格式化代码。

6、Dreamweaver

简称DW，是Adobe公司一个非常出色的网页开发工具，它得到了广大用户(尤其是新手用户)的喜爱。目前的最新版本是DreamweaverCC。

Dreamweaver是新手最理想的开发工具，也是大量前端入门的首选。但有一点要注意Dreamweaver作为开发工具，一定不能用Dreamweaver那样的传统方法来开发网页，而应该使用操作界面。Dreamweaver的确是一个相当不错的开发工具，但我反对每个人都用Dreamweaver界面来创建网页。对刚接触前端开发的新手来说，可以使用Dreamweaver作为开发工具，但也一定要用代码来编写网页，不要用鼠标点击。

7、Bit.dev

软件开发的基本原则之一就是代码复用。代码复用减少了开发量，让你不用从头开发组件。这正是 Bit.dev 做的事，分享可重用的组件和片段，降低开发量，加速开发进程。除了公开分享，它还支持在团队分享，让团队协作更方便。Bit.dev 可以用来创建设计体系，允许团队内的开发者和设计师一起协作，从头搭建一套设计体系。Bit.dev 目前支持 React、Vue、Angular、Node 及其他 JavaScript 框架。