100+ 超全的 web 开发工具和资源
thhk0265
8年前
<p>作为 Web 开发者，这是好的时代，也是坏的时代。 Web 开发技术也在不断变化。虽然很令人兴奋，但是这也意味着 Web 开发人员需要要积极主动的学习新技术和新的编程语言，并愿意和渴望接受新的挑战，以适应变化。新的挑战可能会包括一些开发上的要求，如利用适应现有的框架来满足业务需求。测试一个网站，能从中知道出了哪些技术上的问题，并且我们针对这些问题进行优化和消除。便于后端的开发进程加快和测试。所以我们列出了完整的 web 开发所需要的工具和资源，助力开发者提高开发效率！学不止步，让我们努力成为一个优秀的开发者！</p> <h2>Web开发工具和资源整合</h2> <p>在这里说声抱歉，对于开发者开发使用的工具，我们无法一一囊括，这里是选取较为热门的工具和资源作为范例。我们希望能从中找到适合自己的工具助力自己的开发！</p> <p>注：工具和资源排序不分先后。</p> <h2>JavaScript 库</h2> <p><img src="https://simg.open-open.com/show/2d53b607ef40b8240e3c327458699a3d.jpg"></p> <p>我敢说 JavaScript 语言是目前 web 开发最流行的编程语言。 JavaScript 库又称 JavaScript 框架，封装了很多预定义的对象和使用函数。是网站更容易兼容各式各样的浏览器。那么您就可以使用以下 JavaScript 库来帮助你的开发更好进行。</p> <ul> <li><a href="/misc/goto?guid=4958183308549259819" rel="nofollow,noindex">jQuery</a> ：快y速，小巧，功能丰富的JavaScript库。</li> <li><a href="/misc/goto?guid=4958521772625141054" rel="nofollow,noindex">BackBoneJS</a> ：为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。</li> <li><a href="/misc/goto?guid=4958525732648470179" rel="nofollow,noindex">D3.js</a> ： <em>D3</em> 是基于数据的文档操作javascript库, <em>D3</em> 能够把数据和HTML、SVG、CSS结合起来,创造出可交互的数据图表。</li> <li><a href="/misc/goto?guid=4958968605084997344" rel="nofollow,noindex">React:</a> ：非死book的Javascript库为构建用户界面而开发。</li> <li><a href="/misc/goto?guid=4958183777706430020" rel="nofollow,noindex">jQ</a> <a href="/misc/goto?guid=4958183777706430020" rel="nofollow,noindex">uery</a> <a href="/misc/goto?guid=4958183777706430020" rel="nofollow,noindex">UI</a> ： <em>jQuery UI</em> 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。</li> <li><a href="/misc/goto?guid=4958183601317272178" rel="nofollow,noindex">jQuery Mobile</a> ：基于HTML5用于创建移动 web 应用程序的框架。</li> <li><a href="/misc/goto?guid=4958528211773305809" rel="nofollow,noindex">Underscore.js</a> ：JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。</li> <li><a href="/misc/goto?guid=4958198907110249002" rel="nofollow,noindex">Moment.js</a> ：一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。</li> <li><a href="/misc/goto?guid=4958871496205746239" rel="nofollow,noindex">Lodash</a> ：一个 JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能。</li> </ul> <h2><a href="/misc/goto?guid=4959674007146327758" rel="nofollow,noindex">前端框架</a></h2> <p><img src="https://simg.open-open.com/show/9266a301fc2becd8f82e0a5a151c43ad.jpg"></p> <p>通俗的前端由 HTML ， CSS ， JavasScript 等构成。当然为了适应 Web 开发日益增长的需求，应运而生许多独立的前端框架，例如 Bootstrap 。一个优秀的框架可以为前端开发人员在开发过程中增益，减小开发压力。</p> <ul> <li><a href="/misc/goto?guid=4958332662969681733" rel="nofollow,noindex">Bootstrap</a> ： <em>Bootstrap</em> 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。</li> <li><a href="/misc/goto?guid=4958338175196780124" rel="nofollow,noindex">Foundation</a> ： 迄今为止最好的响应式前端框架，更快、更轻、更多功能、更灵活、更强大！</li> <li><a href="/misc/goto?guid=4958542168966082381" rel="nofollow,noindex">Semantic UI</a> ： <em>Semantic</em> <em>UI</em> 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。</li> <li><a href="/misc/goto?guid=4958537862801517104" rel="nofollow,noindex">uikit</a> ： <em>UIKit</em> 使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式界面。</li> </ul> <h2>Web应用框架</h2> <p><img src="https://simg.open-open.com/show/9dd7e5e782c67aa4390b437beb31b890.jpg"></p> <p>Web 应用框架作为一个软件框架，意在帮助和缓解开发者在进行 Web 应用的开发与维护时遇见的开发问题。例如： AngularJS ，您可以在您的项目完全免费使用它，详细文档请您参见 <a href="/misc/goto?guid=4959674007354728147" rel="nofollow,noindex">angularcdn.com</a> .</p> <ul> <li><a href="/misc/goto?guid=4958183258527670296" rel="nofollow,noindex">Ruby</a> ：Ruby on Rails 是使用 Ruby 语言编写的网页程序开发框架，目的是为开发者提供常用组件，简化网页程序的开发。</li> <li><a href="/misc/goto?guid=4958536149447001924" rel="nofollow,noindex">React</a> ：React 起源于 非死book 的内部项目，React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。是现在非长热门的框架。</li> <li><a href="/misc/goto?guid=4959646930251080102" rel="nofollow,noindex">Vue</a> ：Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。</li> <li><a href="/misc/goto?guid=4958834801588021319" rel="nofollow,noindex">AngularJS</a> ：AngularJS 通过新的属性和表达式扩展了 HTML，可以构建一个单一页面应用程序。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。</li> <li><a href="/misc/goto?guid=4958340976610047764" rel="nofollow,noindex">Ember.js</a> ：一个用于创建 web 应用的 JavaScript MVC 框架，采用基于字符串的Handlebars模板，支持双向绑定、观察者模式、计算属性（依赖其他属性动态变化）、自动更新模板、路由控制、状态机等。</li> <li><a href="/misc/goto?guid=4958522262563415188" rel="nofollow,noindex">Express</a> ：基于 Node.js 平台的 web 应用开发框架 基于Node.js 平台,快速、开放、极简的 web 开发框架。</li> <li><a href="/misc/goto?guid=4958834640823188760" rel="nofollow,noindex">Meteor</a> ：Meteor 是一个构建在 Node.js 之上的平台，用来开发实时网页程序。Meteor 位于程序数据库和用户界面之间，保持二者之间的数据同步更新。</li> <li><a href="/misc/goto?guid=4958185537882919486" rel="nofollow,noindex">Django</a> ： <em>Django</em> 是一个开放源代码的Web应用框架,由Python写成。采用了MVC的软件设计模式,即模型M,视图V和控制器C。</li> <li><a href="/misc/goto?guid=4959674007688874151" rel="nofollow,noindex">ASP.net</a> ：ASP.NET是免费，高兼容的WEB应用框架，能够提供标准化WEB应用构建时所需的解决方案。</li> <li><a href="/misc/goto?guid=4958976112488620154" rel="nofollow,noindex">Laravel</a> ：一个免费，开源的PHP Web应用程序框架，可以基于MVC模式来创建Web应用程序。</li> <li><a href="/misc/goto?guid=4958184333153798548" rel="nofollow,noindex">Zend Framework 2</a> ：一款的Web应用框架，基于PHP来创建Web应用和服务端应用。</li> <li><a href="/misc/goto?guid=4959674007840378841" rel="nofollow,noindex">Phalcon</a> ： <em>Phalcon</em> 是开源、全功能栈、使用 C 扩展编写、针对高性能优化的 PHP 5 框架。</li> <li><a href="/misc/goto?guid=4958190849698300293" rel="nofollow,noindex">Symfony</a> ： <em>Symfony</em> 是一个基于MVC模式的面向对象的PHP5框架。 <em>Symfony</em> 允许在一个web应用中分离事务控制，服务逻辑和表示层。</li> <li><a href="/misc/goto?guid=4958189726579441828" rel="nofollow,noindex">CakePHP</a> ： <em>CakePHP</em> 是一个运用了诸如ActiveRecord、Association Data Mapping、Front Controller和MVC等著名设计模式的快速开发框架。主要目标是提供一个可以让各种层次的PHP开发人员快速地开发出健壮的Web应用，而 又不失灵活性。</li> <li><a href="/misc/goto?guid=4958860972087517262" rel="nofollow,noindex">Flask</a> ： <em>Flask</em> 是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2</li> <li><a href="/misc/goto?guid=4959674008015576593" rel="nofollow,noindex">CodeIgniter</a> ：CodeIgniter 是一个简单快速的PHP MVC框架。它为团队提供了足够的自由支持，允许开发人员更迅速地工作。</li> </ul> <h2>任务批处理工具 / 包管理器</h2> <p><img src="https://simg.open-open.com/show/4377ac38b1fc2e65d158e29656813ca3.jpg"></p> <p>任务批量处理工具 可将你的工作流程全自动化.例如你可以创建一个任务，使用JavaScript语言编写的工具来进行自动化的处理。 然后打包，这样会大大提高开发效率。 <u>包管理器</u> 它能跟踪所有已安装的软件、自动化进行安装和删除应用程序、以及确保所有软件都保持更新以获得最新的增强功能和错误修复。</p> <ul> <li><a href="/misc/goto?guid=4958524645657745150" rel="nofollow,noindex">Grunt</a> ： <em>Grunt</em> 是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。</li> <li><a href="/misc/goto?guid=4958825205695716034" rel="nofollow,noindex">Gulp</a> ： <em>Gulp</em> .js 是基于 Node.js 构建的一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。</li> <li><a href="/misc/goto?guid=4958867133348946608" rel="nofollow,noindex">npm</a> ：NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。</li> <li><a href="/misc/goto?guid=4958827487829750237" rel="nofollow,noindex">Bower</a> ：Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。</li> </ul> <h2>编程语言 / 开发平台</h2> <p><img src="https://simg.open-open.com/show/fce720b30aed7955d5e84c12c8658de9.jpg"></p> <p>所有Web开发都需要编程语言的支持. <em>编程语言</em> （programming language），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。.当然进行Web开发不仅仅只有一门语言来进开发。</p> <ul> <li><a href="/misc/goto?guid=4958823346268580941" rel="nofollow,noindex">PHP</a> ：PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域</li> <li><a href="/misc/goto?guid=4958970907890517578" rel="nofollow,noindex">NodeJS</a> ： <em>Node</em> . <em>js</em> 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 <em>Node</em> . <em>js</em> 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。</li> <li><a href="/misc/goto?guid=4958962596268171040" rel="nofollow,noindex">Javascript</a> ：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言</li> <li><a href="/misc/goto?guid=4959674008318296681" rel="nofollow,noindex">HTML5</a> ：标记语言，是HTML和XHTML的最新版本。</li> <li><a href="/misc/goto?guid=4958832508293054196" rel="nofollow,noindex">Python</a> ：Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。</li> <li><a href="/misc/goto?guid=4958836419234305834" rel="nofollow,noindex">Ruby</a> ： <em>Ruby</em> ，一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言</li> <li><a href="/misc/goto?guid=4958188765916438898" rel="nofollow,noindex">Scala</a> ： <em>Scala</em> 是一门多范式的编程语言，一种类似java的编程语言，设计初衷是实现可伸缩的语言、并集成面向对象编程和函数式编程的各种特性。</li> <li><a href="/misc/goto?guid=4959674008500084999" rel="nofollow,noindex">CSS3</a> ： <em>CSS</em> 即层叠 <em>样式表</em> （Cascading StyleSheet）。 在网页制作时采用层叠 <em>样式表</em> 技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS的最新版本。</li> <li><a href="/misc/goto?guid=4959553731889822408" rel="nofollow,noindex">SQL</a> ：结构化查询语言(Structured Query Language)简称 <em>SQL，</em> 是一种特殊目的的编程语言，是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统；同时也是数据库脚本文件的扩展名。</li> <li><a href="/misc/goto?guid=4958865861071770650" rel="nofollow,noindex">Golang</a> ：Go是Google开发的一种编译型，可平行化，并具有垃圾回收功能的编程语言。</li> <li><a href="/misc/goto?guid=4958976156960907417" rel="nofollow,noindex">Rust</a> ：Rust是Mozilla开发的注重安全、性能和并发性的编程语言。</li> <li><a href="/misc/goto?guid=4958828908430788744" rel="nofollow,noindex">Elixir</a> ：Elixir 是一种函数式编程语言,建立在Erlang虚拟机之上。它是一种动态语言,灵活的语法与宏支持,利用Erlang的能力来构建并发、分布式、容错应用程序与热代码升级。</li> </ul> <h2>数据库</h2> <p><img src="https://simg.open-open.com/show/93f162b9588c00c2d501916f49763456.jpg"></p> <p><em>数据库</em> （Database）是按照数据结构来组织、存储和管理数据的仓库。</p> <ul> <li><a href="/misc/goto?guid=4958971672494246221" rel="nofollow,noindex">MySQL</a> ：MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。</li> <li><a href="/misc/goto?guid=4958839600316175529" rel="nofollow,noindex">MariaDB</a> ： <em>MariaDB</em> 数据库管理系统是MySQL的一个分支，主要由开源社区在维护，采用GPL授权许可 <em>MariaDB</em> 的目的是完全兼容MySQL，包括API和命令行，使之能轻松成为MySQL的代替品。</li> <li><a href="/misc/goto?guid=4958830654050811860" rel="nofollow,noindex">MongoDB</a> ： <em>MongoDB</em> 教程 <em>MongoDB</em> 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。</li> <li><a href="/misc/goto?guid=4958185538616997143" rel="nofollow,noindex">Redis</a> ： <em>Redis</em> 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。</li> <li><a href="/misc/goto?guid=4958183761065211007" rel="nofollow,noindex">PostgreSQL</a> ：ostgreSQL支持大部分 SQL标准并且提供了许多其他现代特性：复杂查询、外键、触发器、视图、事务完整性、MVCC。</li> </ul> <h2>CSS 预处理器</h2> <p><img src="https://simg.open-open.com/show/57b1d2f2150a14994b657ae1d06196e3.jpg"></p> <p>CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。</p> <p>通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。例如：Sass，Less，Stylus。</p> <ul> <li><a href="/misc/goto?guid=4958184196366000958" rel="nofollow,noindex">Sass</a> ： Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。</li> <li><a href="/misc/goto?guid=4958318706716927602" rel="nofollow,noindex">Less</a> ： <em>Lesscss</em> 是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。</li> <li><a href="/misc/goto?guid=4959640663020680470" rel="nofollow,noindex">Stylus</a> ：Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。</li> </ul> <p>如果你是刚刚开始使用CSS的预处理器，你可能要先使用第三方编译器进行开发，如下所示。</p> <h2>文本编辑器 /代码编辑器</h2> <h2><img src="https://simg.open-open.com/show/da4c12e14ab46d68f5e93c884dd4b90b.jpg"></h2> <p>无论你是做笔记，敲代码，或者Markdown文档编写，一个好的文本编辑器都是必须拥有的！</p> <ul> <li><a href="/misc/goto?guid=4958832861167207492" rel="nofollow,noindex">Atom</a> ： <em>Atom</em> 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器在代码编辑器、文本编辑器领域,有着不少的「神器」级的产品。</li> <li><a href="/misc/goto?guid=4958337885604703603" rel="nofollow,noindex">Sublime Text</a> ：Sublime Text 是一个代码编辑器（Sublime Text 2和3是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。</li> <li><a href="/misc/goto?guid=4958874506326712870" rel="nofollow,noindex">Notepad++</a> ： <em>Notepad++</em> 是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能。</li> <li><a href="/misc/goto?guid=4959674009046001700" rel="nofollow,noindex">Visual Studio Code</a> ：微软推出，一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。</li> <li><a href="/misc/goto?guid=4959643515976248651" rel="nofollow,noindex">TextMate</a> ：TextMate是Mac下的著名的文本编辑器软件，与BBedit一起并称苹果机上的emacs和vim。</li> <li><a href="/misc/goto?guid=4958827779021917936" rel="nofollow,noindex">Coda 2</a> : OS X下快速，简洁，功能强大的编辑器【需要付费】.</li> <li><a href="/misc/goto?guid=4958865832660050715" rel="nofollow,noindex">WebStorm</a> ：jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。</li> <li><a href="/misc/goto?guid=4958189306643968874" rel="nofollow,noindex">Vim</a> ：Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。</li> <li><a href="/misc/goto?guid=4958521909585986060" rel="nofollow,noindex">Brackets</a> ：Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。</li> <li><a href="/misc/goto?guid=4958966489579896659" rel="nofollow,noindex">Emacs</a> ：著名的集成开发环境和文本编辑器。 <em>Emacs</em> 被公认为是最受专业程序员喜爱的代码编辑器之一。</li> </ul> <h2>Markdown 编辑器</h2> <p><img src="https://simg.open-open.com/show/339b024903fd4667c1965e6c67dde46f.jpg"></p> <p><em>Markdown</em> 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。 <em>Markdown</em> 十分轻量,学习成本也不高。</p> <ul> <li><a href="/misc/goto?guid=4959647165951920649" rel="nofollow,noindex">MWeb</a> ：专业的 Markdown 写作、记笔记、静态博客生成软件 【付费】</li> <li><a href="/misc/goto?guid=4959674009343913117" rel="nofollow,noindex">Markeditor</a> ：MarkEditor 是最新的一款 Markdown 编辑器，除了基本功能外，还包含了诸如表格编辑、图表、高亮、公式等等丰富的功能！【付费】</li> <li><a href="/misc/goto?guid=4958853421440954118" rel="nofollow,noindex">StackEdit</a> ：一个开放源码免费使用的 MarkDown 编辑器, 基于 PageDown,使用了 Stack Overflow 和其他 Stack Exchange 网站的 MarkDown 库</li> <li><a href="/misc/goto?guid=4958830146176019911" rel="nofollow,noindex">Dillinger</a> ：Dillinger 是一款在线的 Markdown 编辑器,支持更换主题,字数统计,云服务保存,导出 HTML、PDF 等功能。</li> <li><a href="/misc/goto?guid=4958987092398899157" rel="nofollow,noindex">Mou</a> : Mac OS X下的免费Markdown编辑器【作者貌似已经跑路了】</li> <li><a href="/misc/goto?guid=4959674009528582717" rel="nofollow,noindex">Texts</a> ：Windows和Mac OS X下纯文本编辑器。</li> </ul> <p>表示有些付费的Markdown编辑器宝宝买不起。</p> <h2>icon图标</h2> <p><img src="https://simg.open-open.com/show/cda3ac89fb565d0db4f0e7e09a95421f.jpg"></p> <p>几乎每一个Web开发者，尤其是前端开发人员都会需要icon图标来增色项目。</p> <ul> <li><a href="/misc/goto?guid=4958853181012494445" rel="nofollow,noindex">Font Awesome</a> ：Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。</li> <li><a href="/misc/goto?guid=4958529423297903348" rel="nofollow,noindex">IconMonster</a> ：免费，高质量, 庞大且资源不断增长的简洁的icon图标库。</li> <li><a href="/misc/goto?guid=4959626692741317396" rel="nofollow,noindex">IconFinder</a> ： <em>Iconfinder</em> 提供美丽的图标,服务数以百万计的设计师,开发商和其他有创意的专业人员。</li> <li><a href="/misc/goto?guid=4958830721864621033" rel="nofollow,noindex">Fontello</a> ：一个目测有200+个图标（数量还在增加）的 Web-font 图标市场，对于广大设计师、前端开发者来说是很棒的资源。</li> </ul> <h2>Git 代理 / 服务</h2> <p><img src="https://simg.open-open.com/show/7ea2d097a3c78ce74771abdf029d68a3.jpg"></p> <p>Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。</p> <ul> <li><a href="/misc/goto?guid=4958971603591109535" rel="nofollow,noindex">SourceTree</a> ：SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端。支持创建、克隆、提交、push、pull 和合并等操作。</li> <li><a href="/misc/goto?guid=4959674009782467664" rel="nofollow,noindex">GitKraken</a> (Beta)：一款自由、直观、快捷、美观的跨平台Git客户端。</li> <li><a href="/misc/goto?guid=4959674009876924511" rel="nofollow,noindex">Tower 2</a> ：一款美丽，高效，强大的Git管理，让Git版本控制变得容易。</li> <li><a href="/misc/goto?guid=4958965631600325617" rel="nofollow,noindex">GitHub Client</a> ：有助于无缝连接GitHub和GitHub的企业的项目。</li> <li><a href="/misc/goto?guid=4959649802082750791" rel="nofollow,noindex">Gogs</a> ：Gogs (Go Git Service) 是一款极易搭建的自助 Git 服务。 开发目的 <em>Gogs</em> 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。</li> <li><a href="/misc/goto?guid=4959674010023995582" rel="nofollow,noindex">GitLab</a> : GitLab是利用 Ruby on Rails 一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。</li> <li><a href="/misc/goto?guid=4959674010114567405" rel="nofollow,noindex">Coding</a> ：Coding 的代码托管功能除了基本的 Git 仓库以外，还有保护分支，分屏对比， Code Review 等高级功能。并且整合了 Pages 服务，质量管理，演示平台等开发工具，提升研发效率。</li> </ul> <h2>本地开发环境搭建</h2> <p><img src="https://simg.open-open.com/show/2a8f2a7aa3127428d73dc4633e29be4d.jpg"></p> <p>根据您运行的是什么操作系统和计算机配置，有时候进行测试的时候就有可能需要搭建一个快速的本地开发环境。自己搭建很是蛮烦，不用担心，有很多将Apache，Nginx，MySQL和phpMyAdmin进行打包一体化的软件。这些软件很是方便我们来进行本地测试。</p> <ul> <li><a href="/misc/goto?guid=4959674010209418098" rel="nofollow,noindex">XAMPP</a> ：XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包。</li> <li><a href="/misc/goto?guid=4959674010289997603" rel="nofollow,noindex">MAMP PRO</a> ： <em>MAMP</em> <em>Pro</em> for mac是Mac OS平台搭建本地服务器环境的组合软件套装,包含 Macintosh、Apache、MySQL和PHP 四大开发环境。</li> <li><a href="/misc/goto?guid=4958188429612118832" rel="nofollow,noindex">WampServer</a> ：Wamp就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。</li> <li><a href="/misc/goto?guid=4958854275334664693" rel="nofollow,noindex">Vagrant</a> ： <em>Vagrant</em> 是一个基于Ruby的工具，用于创建和部署虚拟化开发环境。它 使用Oracle的开源VirtualBox虚拟化系统，使用 Chef创建自动化虚拟环境。</li> <li><a href="/misc/goto?guid=4959674010445380160" rel="nofollow,noindex">Laragon</a> ： Laragon工具就是Laravel的一键安装工具吧，还集成了一整套wamp工具，除去Laravel安装外，它也是一款不错的wamp工具，干净简单，便捷迅速。 Diff Checkers</li> <li><a href="/misc/goto?guid=4959674010529172047" rel="nofollow,noindex">Wnmp</a> ：WNMP是Windows下便捷，安全的Nginx+MariaDB+PHP开发环境环境集成套件包。</li> </ul> <h2>文本对比检查</h2> <p><img src="https://simg.open-open.com/show/3b88c1483dd4a54413a3a7e97595b05c.jpg"></p> <p>Diff checkers 可以帮助您比较文件之间的差异，然后合并更改。帮助我们更直观的看见文本之间的差异。</p> <ul> <li><a href="/misc/goto?guid=4959674010609009786" rel="nofollow,noindex">Diffchecker</a> ：Diffchecker 是一款非常好用的在线文本对比工具,能够高亮显示有差异的行和字符。 <em>Diffchecker</em> 提供了文件上传对比功能,还可以选择对比的存储时间。</li> <li><a href="/misc/goto?guid=4958188019526848126" rel="nofollow,noindex">Beyond Compare</a> ：Beyond Compare是一套由Scooter Software推出的软件，主要用途是对比两个文件夹或者文件，并将差异以颜色标示。</li> </ul> <p>当然有很多免费的文本编辑器，包括我们上面提到的也有插件和扩展，可以协助开发者方便的进行文件比较。</p> <h2>代码共享 / 代码测试</h2> <p><img src="https://simg.open-open.com/show/3007346a355741e6cf427788a0701ea5.jpg"></p> <p>前端开发者在公司内或者团体间需要进行协作，共享代码，那么一下工具很值得开发者一试。</p> <ul> <li><a href="/misc/goto?guid=4958344670058898650" rel="nofollow,noindex">JS Bin</a> ： <em>JS</em> <em>Bin</em> 能够让你编辑和测试JavaScript和HTML代码。你还可以将编辑后的代码保存到本地,或将URL地址发给其他人,让其协助调试代码。</li> <li><a href="/misc/goto?guid=4958971778975983608" rel="nofollow,noindex">JSfiddle</a> ：jsFiddle是一个在线的shell编辑器,通过流行的JS框架创建自定义的环境,以简化JS代码。可以用于测试示例代码。</li> <li><a href="/misc/goto?guid=4959674010796433809" rel="nofollow,noindex">codeshare</a> ：与其他开发者实时共享代码。</li> <li><a href="/misc/goto?guid=4958325616611758306" rel="nofollow,noindex">Dabblet</a> ：Dabblet是一个开源互动测试工具,用于测试CSS和HTML。 <em>Dabblet</em> 支持实时更新、匿名备份、嵌入网站、与他人共享或者存储到GitHub。</li> </ul> <h2>协作工具</h2> <p><img src="https://simg.open-open.com/show/99da44795c3d22c66161193e45560b1a.jpg"></p> <p>每一个很棒的开发团队需要一种方式来保持联系，协作，来帮助提高生产力。</p> <ul> <li><a href="/misc/goto?guid=4958862482165973688" rel="nofollow,noindex">Slack</a> ：Slack 是聊天群组 + 大规模工具集成 + 文件整合 + 统一搜索。</li> <li><a href="/misc/goto?guid=4958330243377773977" rel="nofollow,noindex">Trello</a> ：Trello的目标是提供简洁清晰的团队协作工具。不过弥缝在这里将介绍如果将 <em>Trello</em> 用来建立自己的时间管理系统。</li> <li><a href="/misc/goto?guid=4959674010960672129" rel="nofollow,noindex">Glip</a> ：Glip:在线团队办公协作平台是一个类似于Slack网站的网络办公集合体,内置了邮箱、网盘、即时通讯应用、协作服务等,把所有和网络办公有关的服务和工具都整合在了一起。</li> <li><a href="/misc/goto?guid=4958839819214650251" rel="nofollow,noindex">Asana</a> ：Asana是一款团队任务管理软件 方便人们去制定和跟踪团队的项目任务的完成情况</li> <li><a href="/misc/goto?guid=4958545919940249719" rel="nofollow,noindex">Jira</a> ：JIRA是Atlassian公司出品的项目与事务跟踪工具，被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。</li> </ul> <h2>灵感创意</h2> <p><img src="https://simg.open-open.com/show/fca7375e0bd9a3f762dbb3a0244a4d4b.jpg"></p> <p>当我们进行开发时，偶尔迸发的灵感会使我们的项目或者产品增色不少。当然不仅仅依靠自我的灵感，我们也需要从别人的作品中得到灵感来保证我们的Web设计界面或者产品不落后这个时代。</p> <ul> <li><a href="/misc/goto?guid=4958539547061522984" rel="nofollow,noindex">CodePen</a> ：全球 web前端开发 人员的圣地！可以展示个人的创意和建立一个测试实例来解决bug。 来寻找你的项目设计方式和灵感吧。</li> <li><a href="/misc/goto?guid=4958854483414499132" rel="nofollow,noindex">Dribble</a> ：Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线服务，供网友在线查看已经完成的作品或者正在创作的作品的交流网站。</li> </ul> <h2>网站测速工具</h2> <p><img src="https://simg.open-open.com/show/b33b05e63bc1f1736c9ef0128a3556d2.jpg"></p> <p>网站的速度是用户体验关键因素。网站速度快与慢决定是否能更高的搜索引擎排名，更高的转换率，更低的跳出率，以及更好的整体用户体验和。值得高兴的是很多免费软件可以用于测试网站速度，帮助我们找出加载缓慢的问题，方便我们去解决。</p> <ul> <li><a href="/misc/goto?guid=4958854485248259878" rel="nofollow,noindex">Google PageSpeed Insights</a> ：PageSpeed Insights是一款可以分析网页速度瓶颈,让网页设计人员开发出速度更快的网站的 <em>谷歌</em> 浏览器插件。</li> <li><a href="/misc/goto?guid=4959674011205806910" rel="nofollow,noindex">Google Chrome DevTools</a> ：Chrome DevTools 是公认的优秀的前端调试工具，功能强大，使用起来有一定的学习门槛，</li> <li><a href="/misc/goto?guid=4958188735476032958" rel="nofollow,noindex">WebPageTest</a> ： <em>WebPagetest</em> 是一款Web应用程序,它将一个URL以及一系列配置参数作为输入,并对那个URL运行性能测试。</li> <li><a href="/misc/goto?guid=4958323106719213591" rel="nofollow,noindex">Pingdom</a> ：pingdom全面的网站监测服务网站,可测速和ping跟踪路由,可以免费监测1个站点,最短1分钟监测一次。</li> <li><a href="/misc/goto?guid=4959643504251561169" rel="nofollow,noindex">GTmetrix</a> ：主要优点在于提供了丰富的详细的测量结果，并建议如何来优化网页中每个元素的，最重要的是会根据网站的具体情况，直接告诉你导致网站加载速度变慢的根源在哪里</li> </ul> <h2>Web开发社区</h2> <p><img src="https://simg.open-open.com/show/d21d9d52cf8a7979cfd9aff4bf4e2579.jpg"></p> <p>当开发者在开发的过程中有遇到问题时，除了询问他人以外，还可以使用搜索引擎搜索。社区的重要性就显而易见了，大部分开发者会在开发社区分享他们经验，如何避过不必要踩的坑。</p> <h3>国内：</h3> <ul> <li><a href="/misc/goto?guid=4959667097035486361" rel="nofollow,noindex">谷歌开发者社区(GDG)</a> ：开放 · 分享 · 创新</li> <li><a href="/misc/goto?guid=4959674011417862289" rel="nofollow,noindex">segmentfault</a> ：是中国领先的 <em>开发</em> 者技术 <em>社区</em> 。 为编程爱好者提供一个纯粹、高质的技术交流的平台, 与 <em>开发</em> 者一起学习、交流与成长。【老实话我觉得这名字不好记】</li> <li><a href="/misc/goto?guid=4959674011500746678" rel="nofollow,noindex">全栈社区</a> ：中国最大的全栈 <em>开发者社区</em> ,致力于打造一个问题解答,技术文章分享,全栈人员创业的服务平台,让开发更容易,让创业更简单.</li> </ul> <h3>国外：</h3> <ul> <li><a href="/misc/goto?guid=4958188962313964239" rel="nofollow,noindex">Stack Overflow</a> ：Stack Overflow是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容，在创建主页的时候使用简单的HTML。</li> <li><a href="/misc/goto?guid=4959674011620304107" rel="nofollow,noindex">Front-end Front</a> ：在Front-end Front，前端开发者可以提出问题，分享有趣的链接，并展示他们的项目作品。</li> <li><a href="/misc/goto?guid=4959674011699437232" rel="nofollow,noindex">Hashnode</a> ：Hashnode是开发者讨论技术问题，分享解决方案，与世界各地的开发者共享资源的聚集地。</li> <li><a href="/misc/goto?guid=4959674011791445887" rel="nofollow,noindex">Refind</a> ：有着开发者, 黑客, 设计师收集和分享最好的资源的社区。</li> <li><a href="/misc/goto?guid=4959674011886221069" rel="nofollow,noindex">Google+ Web Developers Group</a> ：Web 开发者,Web设计师和Web开发.</li> <li><a href="/misc/goto?guid=4959674011972900679" rel="nofollow,noindex">Google+ Web Developers Group</a> ：Java, PHP, Ruby, JavaScript and Python 资源。</li> <li><a href="/misc/goto?guid=4959674012061947215" rel="nofollow,noindex">非死book WordPress Front-end Developers Group</a> ：WordPress 前端开发者的分享社区，可以提问题，分享开发者的项目作品，还有讨论WP未来发展趋势。</li> <li><a href="/misc/goto?guid=4959674012145991929" rel="nofollow,noindex">LinkedIn Web Design and Development Professionals Group</a> ：与专业网页设计师，网页开发者共享Web开发资源</li> <li><a href="/misc/goto?guid=4959674012237634602" rel="nofollow,noindex">LinkedIn Web Site Development Group</a> : 网站设计和开发。</li> <li><a href="/misc/goto?guid=4959674012331387972" rel="nofollow,noindex">LinkedIn PHP Developer Group</a> : PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.</li> <li><a href="/misc/goto?guid=4959674012411405912" rel="nofollow,noindex">LinkedIn WordPress Developers Group</a> : WordPress 开发. 使用WP来创建CMS和CMF.</li> <li><a href="/misc/goto?guid=4959674012510097583" rel="nofollow,noindex">Webdeveloper.com</a> ：帮助Web开发者和设计师学习使用HTML，java和javascript开发网站。</li> <li><a href="/misc/goto?guid=4959674012587646704" rel="nofollow,noindex">Sitepoint Forums</a> : Web开发者论坛。</li> <li><a href="/misc/goto?guid=4959674012687084175" rel="nofollow,noindex">/r/perfmatters</a> : 讨论关于 web 性能</li> <li><a href="/misc/goto?guid=4959674012768956197" rel="nofollow,noindex">/r/webdev</a> : 关于Web开发和开发者的新闻</li> </ul> <h2>Web开发新闻聚合</h2> <p><img src="https://simg.open-open.com/show/6ac2df30182752b275d305321d8a09fd.jpg"></p> <p>阅读开发和设计的技术干货，及时的知道技术圈内更新了什么，保持信息流新鲜，有助于我们更好的开发！</p> <h3>国内：</h3> <ul> <li><a href="/misc/goto?guid=4958967457803516384" rel="nofollow,noindex">掘金</a> ：掘金是中国质量最高的技术分享社区，邀请稀土用户作为Co-Editor 来分享优质的技术干货，从前端到后端开发，从设计到产品，让每一个 <em>掘金</em> 用户都能挖掘到有价值的干货。</li> <li><a href="/misc/goto?guid=4959642387137189755" rel="nofollow,noindex">开发者头条</a> ：一个以程序员为中心，基于学习和分享的开发者社区。你可以阅读头条新闻、分享技术文章、发布开源项目，订阅技术极客们创建的学习主题和关注编程牛人。</li> <li><a href="/misc/goto?guid=4959644966969275634" rel="nofollow,noindex">推酷</a> ：以技术为驱动，以聚合挖掘为核心，打造个性推荐和订阅，给你一站式的阅读。 更汇聚优质公开课和线下活动，让信息知识获取更便捷。</li> </ul> <h3>国外：</h3> <ul> <li><a href="/misc/goto?guid=4959674012948231969" rel="nofollow,noindex">wdrl.info</a> ：精心挑选的Web开发相关资源，每星期进行整合报道。</li> <li><a href="/misc/goto?guid=4959674013042968264" rel="nofollow,noindex">webopsweekly.com</a> ： 每周进行报道关于网络运营，应用部署，网站性能和工具分享类的文章。</li> <li><a href="/misc/goto?guid=4959553473190561756" rel="nofollow,noindex">web tools weekly</a> ：专注于前端开发和网页设计工具分享。每一个问题都有一个简短的提示或教程，另外每周都会分享的各种应用程序、脚本、插件和其他有用的资源。</li> <li><a href="/misc/goto?guid=4959674013165041315" rel="nofollow,noindex">freshbrewed.co</a> ：每周为前端开发者和设计师提供开发和设计类的阅读摘要。</li> <li><a href="/misc/goto?guid=4959674013244148417" rel="nofollow,noindex">smashingmagazine.com</a> ： Smashing Magazine是一款专门为个人前端开发者和设计师提供的在线报纸，每周二都会定时的更新有用的资源。</li> <li><a href="/misc/goto?guid=4959674013326007429" rel="nofollow,noindex">front-end dev weekly</a> : 每周为前端开发者提供新闻, 包含工具资源，还有灵感。</li> <li><a href="/misc/goto?guid=4959674013425760232" rel="nofollow,noindex">friday front-end</a> ：邮件订阅，每日为前端开发者发关于开发资源的邮件。</li> <li><a href="/misc/goto?guid=4958979021085260418" rel="nofollow,noindex">/dev tips</a> : 收集开发者的问题和建议, 用gif呈现，会每周发邮件通知。</li> </ul> <p>当然, 你也可以关注稀土区，来找到你需要的文章，顺便解决你的问题。</p> <h2>备注</h2> <p>如你所见，有数以百计的网络开发工具和资源，可以帮助简化你的开发工作流程，帮助开发更高效。我们无法一一列出所有工具或资源，如果有重要的工具或资源有遗漏，那就要麻烦小伙伴们在下面的评论里进行补充，谢谢！</p> <p>原文翻译： <a href="/misc/goto?guid=4959674013535663373" rel="nofollow,noindex">https://www.keycdn.com/blog/web-development-tools/</a></p> <p> </p> <p>来自： <a href="/misc/goto?guid=4959674013626539920" rel="nofollow">https://xituqu.com/170.html</a></p> <p> </p>