前端技术学习路线图-初阶-研发工具

研发工具

编辑器

Sublime Text

Sublime Text 是一款流行的代码编辑器软件，也是HTML和散文先进的文本编辑器，可运行在Linux，Windows和Mac OS X。也是许多程序员喜欢使用的一款文本编辑器软件。

sublime text 3 中文官网 - sublime text 1和sublime text 2中文版下载 (sublimetextcn.com)

Visual Studio Code

在 Windows、macOS 和 Linux 上运行的独立源代码编辑器。 JavaScript 和 Web 开发人员的最佳选择，具有几乎可支持任何编程语言的扩展。

Visual Studio Code - Code Editing. Redefined

WebStorm

WebStorm是JavaScript和相关技术的集成开发环境。与其他JetBrains ide一样，它使您的开发体验更加愉快，使日常工作自动化，并帮助您轻松处理复杂任务。

WebStorm: The Smartest JavaScript IDE, by JetBrains

调试预览

浏览器调试工具

FireBug

Firebug下载地址： https://addons.mozilla.org/en-US/firefox/addon/1843/

使用Firefox浏览器访问以上下载地址，打开页面后，点击下载按钮后，会有个弹窗页面，提示安装的目录，安装后重启你的Firefox浏览器。

重启后就可以在Firefox浏览器中看到Firebug的图标。点击Firebug图标(位于Firefox浏览器右上角)即可激活Firebug插件。

Chrome DevTools

[front-end-study/Chrome DevTools Overview.md at master · CompileYouth/front-end-study · GitHub](https://github.com/CompileYouth/front-end-study/blob/master/tool/devtools/Chrome DevTools Overview.md)

Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。官网还推荐一款叫做 Chrome 金丝雀版本（Chrome Canary）的 Chrome 浏览器，从这里你可以获得最新版本的 DevTools。为什么 Google 称之为金丝雀呢，因为金丝雀早期在矿井中被用来预警，而该版本的 Chrome 一定程度上也能起到该作用。不用担心 Chrome Canary 会覆盖原本的 Chrome，从 Logo 就可以看出这是两个软件。

本地服务

• file://
• http://、SimpleHTTPServer

在线服务

CodePen

官网地址：https://codepen.io

CodePen（代码笔）一款前端所见即所得的工具，我们可以在线编辑制作前端页面，所见即所得。同时网站提供所有常见的 js、css 库，并且支持流行技术（如 SASS），免去了我们自建平台的麻烦。

• 即时预览。我们甚至可以本地修改并即时预览别人的作品。支持多种主流预处理器。

• 快速添加外部资源文件。只需在输入框里输入库名， CodePen 就会从 cdnjs 上寻找匹配的 css 或 js 库。

• 免费创建模板。支持创建三个模板，不是每个作品都需要从白板开始。

• 优秀的外嵌体验。在 WordPress 或 Reddit 等支持 oEmbed 的平台上，只要简单地把链接贴入编辑框，发布后会自动转为嵌入作品。

JSFiddle

官网地址：http://jsfiddle.net/

jsFiddle 是一个Web开发人员的练习场，可在线编辑和测试 HTML、CSS、JavaScript代码片段。在 jsFiddle 编辑的代码，可以保存，也可分享给其他人，还可嵌入到网站中。

在 jsFiddle 左侧栏，可以选择各种流行的 JS 框架。

网络调试

• hosts、Switchhosts
• Debugging Proxy、Charles、wireshark

图片编辑器

Photoshop

Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑和创造工作。PS 有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

Adobe支持Windows、Android与macOS， Linux操作系统用户可以通过使用Wine来运行Photoshop。

Sketch

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，Sketch同样添加了一些基本的位图工具，比如模糊和色彩校正。

Sketch 软件的特点是容易理解，上手简单，对于有设计经验的设计师来说，入门门槛很低。对于绝大多数的数字产品设计，Sketch 都能替代 Adobe Photoshop，Adobe Illustrator 和 Fireworks。

但是Sketch只支持Macos，其他系统无法体验。

版本管理

Git

前端技术学习路线图-初阶-研发工具 -Git

SVN

前端技术学习路线图-初阶-研发工具 -SVN