精华内容
参与话题
问答
  • Web前端开发常用的开发工具

    千次阅读 2019-09-06 11:26:55
    为了使得Web开发人员能够更加专注于业务层面的开发,市场上涌现了各种各样的Web开发工具,灵活运用这些工具就能使得你的开发效率大幅提升,实现事半功倍。Web前端开发常用的开发工具都有哪些呢? 1.Web应用框架 这些...

    Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言。尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要。为了使得Web开发人员能够更加专注于业务层面的开发,市场上涌现了各种各样的Web开发工具,灵活运用这些工具就能使得你的开发效率大幅提升,实现事半功倍。Web前端开发常用的开发工具都有哪些呢?

    1.Web应用框架

    这些软件是专门设计来帮助网站开发,并使创建网站的Web开发的过程变得更容易。该软件完全支持Web服务,Web资源和Web API。这些框架会自动执行与Web开发中的常见活动相关联的一些进程,从而使Web开发人员的工作变得更加容易。可用的Web开发框架包括ASP.NET,JavaEE,WebObjects,web2py,OpenACS等。

    2.协作工具

    对于远程工作的团队,需要时刻保持联系和协作。为了提高开发效率,帮助开发者在同一个项目上工作的流程简化开发流程,以实现团队的设定目标,市场上出现了很多协作工具,如Slack,Trello,Asana,Jira等。

    3.本地开发环境

    一个快速的本地开发环境,可以推出取决于操作系统或您正在使用的计算机。有各种各样的免费软件,软件Apache,MySQL和其他打包在一起。这是在本地计算机上最快的一种测试方式,为了方便使用,有些程序还出了便携式版本。本地开发环境包括MAMP,LARAGAN,XAMPP和Vagrant等。

    4.前端框架

    前端框架基本上是一些文件和文件夹,如HTML,CSS和JavaScript等。前端框架通常包含有有准备好的组件,大多数组件都是可以进行修改和调整的,开发人员可以根据自己的开发需求来选择使用,目前最常见的前端框架是Bootstrap。

    5.图标

    图标对于Web开发人员,尤其是前端开发人员非常重要,它们是Web开发的重要组成部分。上图中的图标都可以应用于你的项目,且这其中大部分是免费的。常用的图标图库有Font Awesome,Icon Monster,Icons8,IconFinder等。

    6.网站速度测试工具

    网站速度是决定一个网站是否成功的重要因素。现在的用户越来越挑剔,大家往往更倾向于加载速度快的网站,对于加载速度慢的网站,大家几乎是零容忍。另外,SEO做得好的话,可能会带来更高的转化率和更好的用户体验。Web开发人员可以使用工具来测试他们的网站速度,以确保他们的网站能够拥有较短的加载时间。常见的网站速度测试工具有WebPage Test、Pingdom,等。

    展开全文
  • Web前端开发工具

    万次阅读 多人点赞 2019-05-30 19:46:44
    (1)介绍:入门首推这两款工具。高校可能也有很多老师使用这两款教授学生。区别在于HBuilderX更加轻量,是HBuilder的下一代版本(Hbuilder已经停止更新维护),其压缩包大小仅10几M,通过自定义插件...

    本文仅代表博主自己观点,希望对大家有所帮助。(只推荐以下三款,其余不推荐使用)

       1、HBuilder、HBuilderX(下载地址http://www.dcloud.io/

    (1)介绍:入门首推这两款工具。高校可能也有很多老师使用这两款教授学生。区别在于HBuilderX更加轻量,是HBuilder的下一代版本(Hbuilder已经停止更新维护),其压缩包大小仅10几M,通过自定义插件的安装来适应自己开发的需要,如git插件等。缺点是对各种框架的语法支持不是很好。

    (2)优势:软件由C++开发,性能自然强大。轻量,能够秒开文件,工具内置浏览器。

    (3)适合开发环境:H5 APP开发,单页面SPA开发等。但不推荐Node开发,对Node语法支持(express框架等)不是很友好。

       2、Editplus

    (1)介绍:EditPlus是一款由韩国 Sangil Kim 出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器,是一个超级小巧的IDE。没有代码提示功能,只有语法高亮。

    (2)优势:速度最快,适合快速查看代码

       3、Visual Studio Code(下载地址:https://code.visualstudio.com/

                  (1)介绍:微软推出的良心之作。是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分。

                  (2)优势:软件界面优美,由于是开源软件,社区有很多自带主题可选,甚至可以自定义背景图片,具体方法参照我的另一篇博客https://mp.csdn.net/postedit/90704344。自带git、终端很强大,配合插件,终端可以连接远程Linux客户端。

                 (3)适合开发环境:所有。学习TypeScript时,语言本身之所以很强大,其实离不开的是它的最强IDE。

    附小技巧:

      1、中文安装方法:点击图中红圈,在上面搜索“Chinese”,安装后重启即可,官方中文汉化。

    2、快速生成HTML文档:新建的HTML文档没有任何模板代码,这时需要输入英文的感叹号!,然后回车,即可快速生成H5文档模板。

    3、前端开发推荐插件(ctrl+shift+x搜索即可)

    JavaScript (ES6) code snippets :快速生成ES6代码;

    Live Server:在HTML文件右键open即可开启热更新服务器;

    vetur:vue开发必备

     

    展开全文
  • 100+ 超全的web开发工具和资源

    千次阅读 2016-08-18 08:49:44
    摘要:整合 WEB 开发包含的 JavaScript 库,前端框架,Web 应用框架,任务批处理工具 / 包管理器,编程语言 / 开发平台,数据库,icon 图标,本地开发环境搭建,协作工具Web 开发社区,未能一一整合,欢迎评论提交...

    摘要:整合 WEB 开发包含的 JavaScript 库,前端框架,Web 应用框架,任务批处理工具 / 包管理器,编程语言 / 开发平台,数据库,icon 图标,本地开发环境搭建,协作工具,Web 开发社区,未能一一整合,欢迎评论提交哦.

    作为Web开发者,这是好的时代,也是坏的时代。Web开发技术也在不断变化。虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化。新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求。测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除。便于后端的开发进程加快和测试。所以我们列出了完整的web开发所需要的工具和资源,助力开发者提高开发效率!学不止步,让我们努力成为一个优秀的开发者!

    Web开发工具和资源整合

    在这里说声抱歉,对于开发者开发使用的工具,我们无法一一囊括,这里是选取较为热门的工具和资源作为范例。我们希望能从中找到适合自己的工具助力自己的开发!

    注:工具和资源排序不分先后。

    JavaScript

    100+ 超全的web开发工具和资源-稀土区

    我敢说JavaScript语言是目前web开发最流行的编程语言。JavaScript库又称JavaScript框架,封装了很多预定义的对象和使用函数。是网站更容易兼容各式各样的浏览器。那么您就可以使用以下JavaScript库来帮助你的开发更好进行。

    • jQuery:快y速,小巧,功能丰富的JavaScript库
    • BackBoneJS:为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。
    • D3.jsD3是基于数据的文档操作javascript库,D3能够把数据和HTML、SVG、CSS结合起来,创造出可交互的数据图表。
    • React::Facebook的Javascript库为构建用户界面而开发。
    • jQuery UIjQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。
    • jQuery Mobile:基于HTML5用于创建移动 web 应用程序的框架。
    • Underscore.js:JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。
    • Moment.js:一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期。
    • Lodash:一个 JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能。

    前端框架

    100+ 超全的web开发工具和资源-稀土区

    通俗的前端由HTMLCSSJavasScript等构成。当然为了适应Web开发日益增长的需求,应运而生许多独立的前端框架,例如Bootstrap。一个优秀的框架可以为前端开发人员在开发过程中增益,减小开发压力。

    • Bootstrap: Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
    • Foundation: 迄今为止最好的响应式前端框架,更快、更轻、更多功能、更灵活、更强大!
    • Semantic UISemantic UI 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。
    • uikitUIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式界面。

    Web应用框架

    100+ 超全的web开发工具和资源-稀土区

    Web应用框架作为一个软件框架,意在帮助和缓解开发者在进行Web应用的开发与维护时遇见的开发问题。例如:AngularJS,您可以在您的项目完全免费使用它,详细文档请您参见 angularcdn.com.

    • Ruby:Ruby on Rails 是使用 Ruby 语言编写的网页程序开发框架,目的是为开发者提供常用组件,简化网页程序的开发。
    • React:React 起源于 Facebook 的内部项目,React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。是现在非长热门的框架。
    • Vue:Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。
    • AngularJS:AngularJS 通过新的属性和表达式扩展了 HTML,可以构建一个单一页面应用程序。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
    • Ember.js:一个用于创建 web 应用的 JavaScript MVC 框架,采用基于字符串的Handlebars模板,支持双向绑定、观察者模式、计算属性(依赖其他属性动态变化)、自动更新模板、路由控制、状态机等。
    • Express:基于 Node.js 平台的 web 应用开发框架 基于Node.js 平台,快速、开放、极简的 web 开发框架。
    • Meteor:Meteor 是一个构建在 Node.js 之上的平台,用来开发实时网页程序。Meteor 位于程序数据库和用户界面之间,保持二者之间的数据同步更新。
    • DjangoDjango是一个开放源代码的Web应用框架,由Python写成。采用了MVC的软件设计模式,即模型M,视图V和控制器C。
    • ASP.net:ASP.NET是免费,高兼容的WEB应用框架,能够提供标准化WEB应用构建时所需的解决方案。
    • Laravel:一个免费,开源的PHP Web应用程序框架,可以基于MVC模式来创建Web应用程序。
    • Zend Framework 2:一款的Web应用框架,基于PHP来创建Web应用和服务端应用。
    • PhalconPhalcon 是开源、全功能栈、使用 C 扩展编写、针对高性能优化的 PHP 5 框架。
    • SymfonySymfony是一个基于MVC模式的面向对象的PHP5框架。Symfony允许在一个web应用中分离事务控制,服务逻辑和表示层。
    • CakePHPCakePHP是一个运用了诸如ActiveRecord、Association Data Mapping、Front Controller和MVC等著名设计模式的快速开发框架。主要目标是提供一个可以让各种层次的PHP开发人员快速地开发出健壮的Web应用,而 又不失灵活性。
    • FlaskFlask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2
    • CodeIgniter:CodeIgniter 是一个简单快速的PHP MVC框架。它为团队提供了足够的自由支持,允许开发人员更迅速地工作。

    任务批处理工具/包管理器

    100+ 超全的web开发工具和资源-稀土区

    任务批量处理工具可将你的工作流程全自动化.例如你可以创建一个任务,使用JavaScript语言编写的工具来进行自动化的处理。 然后打包,这样会大大提高开发效率。 包管理器它能跟踪所有已安装的软件、自动化进行安装和删除应用程序、以及确保所有软件都保持更新以获得最新的增强功能和错误修复。

    • GruntGrunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。
    • GulpGulp.js 是基于 Node.js 构建的一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
    • npm:NPM(node package manager),通常称为node包管理器。顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。
    • Bower:Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

    编程语言 / 开发平台

    100+ 超全的web开发工具和资源-稀土区

    所有Web开发都需要编程语言的支持.编程语言(programming language),是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧,用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据,并精确地定义在不同情况下所应当采取的行动。.当然进行Web开发不仅仅只有一门语言来进开发。

    • PHP:PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域
    • NodeJSNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
    • Javascript:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言
    • HTML5:标记语言,是HTML和XHTML的最新版本。
    • Python:Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。
    • RubyRuby,一种为简单快捷的面向对象编程(面向对象程序设计)而创的脚本语言
    • ScalaScala是一门多范式的编程语言,一种类似java的编程语言,设计初衷是实现可伸缩的语言、并集成面向对象编程和函数式编程的各种特性。
    • CSS3CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS的最新版本。
    • SQL:结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询、更新和管理关系数据库系统;同时也是数据库脚本文件的扩展名。
    • Golang:Go是Google开发的一种编译型,可平行化,并具有垃圾回收功能的编程语言。
    • Rust:Rust是Mozilla开发的注重安全、性能和并发性的编程语言。
    • Elixir:Elixir 是一种函数式编程语言,建立在Erlang虚拟机之上。它是一种动态语言,灵活的语法与宏支持,利用Erlang的能力来构建并发、分布式、容错应用程序与热代码升级。

    数据库

    100+ 超全的web开发工具和资源-稀土区

    数据库(Database)是按照数据结构来组织、存储和管理数据的仓库。

    • MySQL:MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。
    • MariaDBMariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL的代替品。
    • MongoDBMongoDB 教程 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。
    • RedisRedis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。
    • PostgreSQL:ostgreSQL支持大部分 SQL标准并且提供了许多其他现代特性:复杂查询、外键、触发器、视图、事务完整性、MVCC。

    CSS 预处理器

    100+ 超全的web开发工具和资源-稀土区

    CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

    通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。例如:Sass,Less,Stylus。

    • Sass: Sass是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
    • LessLesscss是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
    • Stylus:Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以Stylus 是一种新型语言,可以创建健壮的、动态的、富有表现力的CSS。

    如果你是刚刚开始使用CSS的预处理器,你可能要先使用第三方编译器进行开发,如下所示。

    文本编辑器 / 代码编辑器

    100+ 超全的web开发工具和资源-稀土区

    无论你是做笔记,敲代码,或者Markdown文档编写,一个好的文本编辑器都是必须拥有的!

    • AtomAtom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器在代码编辑器、文本编辑器领域,有着不少的「神器」级的产品。
    • Sublime Text:Sublime Text 是一个代码编辑器(Sublime Text 2和3是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。
    • Notepad++Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能。
    • Visual Studio Code :微软推出,一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。
    • TextMate:TextMate是Mac下的著名的文本编辑器软件,与BBedit一起并称苹果机上的emacs和vim。
    • Coda 2:  OS X下快速,简洁,功能强大的编辑器【需要付费】.
    • WebStorm:jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
    • Vim:Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性。
    • Brackets:Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。
    • Emacs:著名的集成开发环境和文本编辑器。Emacs被公认为是最受专业程序员喜爱的代码编辑器之一。

    Markdown 编辑器

    100+ 超全的web开发工具和资源-稀土区

    Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。Markdown 十分轻量,学习成本也不高。

    • MWeb:专业的 Markdown 写作、记笔记、静态博客生成软件 【付费】
    • Markeditor:MarkEditor 是最新的一款 Markdown 编辑器,除了基本功能外,还包含了诸如表格编辑、图表、高亮、公式等等丰富的功能!【付费】
    • StackEdit:一个开放源码免费使用的 MarkDown 编辑器, 基于 PageDown,使用了 Stack Overflow 和其他 Stack Exchange 网站的 MarkDown 库
    • Dillinger:Dillinger 是一款在线的 Markdown 编辑器,支持更换主题,字数统计,云服务保存,导出 HTML、PDF 等功能。
    • Mou: Mac OS X下的免费Markdown编辑器【作者貌似已经跑路了】
    • Texts:Windows和Mac OS X下纯文本编辑器。

    表示有些付费的Markdown编辑器宝宝买不起。

    icon图标

    100+ 超全的web开发工具和资源-稀土区

    几乎每一个Web开发者,尤其是前端开发人员都会需要icon图标来增色项目。

    • Font Awesome:Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
    • IconMonster:免费,高质量, 庞大且资源不断增长的简洁的icon图标库。
    • IconFinderIconfinder提供美丽的图标,服务数以百万计的设计师,开发商和其他有创意的专业人员。
    • Fontello:一个目测有200+个图标(数量还在增加)的 Web-font 图标市场,对于广大设计师、前端开发者来说是很棒的资源。

    Git 代理 / 服务

    100+ 超全的web开发工具和资源-稀土区

    Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
    • SourceTree:SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端。支持创建、克隆、提交、push、pull 和合并等操作。
    • GitKraken (Beta):一款自由、直观、快捷、美观的跨平台Git客户端。
    • Tower 2:一款美丽,高效,强大的Git管理,让Git版本控制变得容易。
    • GitHub Client:有助于无缝连接GitHub和GitHub的企业的项目。
    • Gogs:Gogs (Go Git Service) 是一款极易搭建的自助 Git 服务。 开发目的 Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。
    • GitLab:  GitLab是利用 Ruby on Rails 一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。
    • Coding:Coding 的代码托管功能除了基本的 Git 仓库以外,还有保护分支,分屏对比, Code Review 等高级功能。并且整合了 Pages 服务,质量管理,演示平台等开发工具,提升研发效率。

    本地开发环境搭建

    100+ 超全的web开发工具和资源-稀土区

    根据您运行的是什么操作系统和计算机配置,有时候进行测试的时候就有可能需要搭建一个快速的本地开发环境。自己搭建很是蛮烦,不用担心,有很多将Apache,Nginx,MySQL和phpMyAdmin进行打包一体化的软件。这些软件很是方便我们来进行本地测试。

    • XAMPP:XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包。
    • MAMP PROMAMP Pro for mac是Mac OS平台搭建本地服务器环境的组合软件套装,包含 Macintosh、Apache、MySQL和PHP 四大开发环境。
    • WampServer:Wamp就是Windows Apache Mysql PHP集成安装环境,即在window下的apache、php和mysql的服务器软件。
    • VagrantVagrant是一个基于Ruby的工具,用于创建和部署虚拟化开发环境。它 使用Oracle的开源VirtualBox虚拟化系统,使用 Chef创建自动化虚拟环境。
    • LaragonLaragon工具就是Laravel的一键安装工具吧,还集成了一整套wamp工具,除去Laravel安装外,它也是一款不错的wamp工具,干净简单,便捷迅速。Diff Checkers
    • Wnmp:WNMP是Windows下便捷,安全的Nginx+MariaDB+PHP开发环境环境集成套件包。

    文本对比检查

    100+ 超全的web开发工具和资源-稀土区

    Diff checkers 可以帮助您比较文件之间的差异,然后合并更改。帮助我们更直观的看见文本之间的差异。

    • Diffchecker:Diffchecker 是一款非常好用的在线文本对比工具,能够高亮显示有差异的行和字符。Diffchecker 提供了文件上传对比功能,还可以选择对比的存储时间。
    • Beyond Compare:Beyond Compare是一套由Scooter Software推出的软件,主要用途是对比两个文件夹或者文件,并将差异以颜色标示。

    当然有很多免费的文本编辑器,包括我们上面提到的也有插件和扩展,可以协助开发者方便的进行文件比较。

    代码共享 / 代码测试

    100+ 超全的web开发工具和资源-稀土区

    前端开发者在公司内或者团体间需要进行协作,共享代码,那么一下工具很值得开发者一试。

    • JS BinJS Bin能够让你编辑和测试JavaScript和HTML代码。你还可以将编辑后的代码保存到本地,或将URL地址发给其他人,让其协助调试代码。
    • JSfiddle:jsFiddle是一个在线的shell编辑器,通过流行的JS框架创建自定义的环境,以简化JS代码。可以用于测试示例代码。
    • codeshare:与其他开发者实时共享代码。
    • Dabblet:Dabblet是一个开源互动测试工具,用于测试CSS和HTML。Dabblet支持实时更新、匿名备份、嵌入网站、与他人共享或者存储到GitHub。

    协作工具

    100+ 超全的web开发工具和资源-稀土区

    每一个很棒的开发团队需要一种方式来保持联系,协作,来帮助提高生产力。

    • Slack:Slack 是聊天群组 + 大规模工具集成 + 文件整合 + 统一搜索。
    • Trello:Trello的目标是提供简洁清晰的团队协作工具。不过弥缝在这里将介绍如果将Trello用来建立自己的时间管理系统。
    • Glip:Glip:在线团队办公协作平台是一个类似于Slack网站的网络办公集合体,内置了邮箱、网盘、即时通讯应用、协作服务等,把所有和网络办公有关的服务和工具都整合在了一起。
    • Asana:Asana是一款团队任务管理软件 方便人们去制定和跟踪团队的项目任务的完成情况
    • Jira:JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。

    灵感创意

    100+ 超全的web开发工具和资源-稀土区

    当我们进行开发时,偶尔迸发的灵感会使我们的项目或者产品增色不少。当然不仅仅依靠自我的灵感,我们也需要从别人的作品中得到灵感来保证我们的Web设计界面或者产品不落后这个时代。

    • CodePen:全球web前端开发人员的圣地!可以展示个人的创意和建立一个测试实例来解决bug。 来寻找你的项目设计方式和灵感吧。
    • Dribble:Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

    网站测速工具

    100+ 超全的web开发工具和资源-稀土区

    网站的速度是用户体验关键因素。网站速度快与慢决定是否能更高的搜索引擎排名,更高的转换率,更低的跳出率,以及更好的整体用户体验和。值得高兴的是很多免费软件可以用于测试网站速度,帮助我们找出加载缓慢的问题,方便我们去解决。

    • Google PageSpeed Insights:PageSpeed Insights是一款可以分析网页速度瓶颈,让网页设计人员开发出速度更快的网站的谷歌浏览器插件。
    • Google Chrome DevTools:Chrome DevTools 是公认的优秀的前端调试工具,功能强大,使用起来有一定的学习门槛,
    • WebPageTestWebPagetest是一款Web应用程序,它将一个URL以及一系列配置参数作为输入,并对那个URL运行性能测试。
    • Pingdom:pingdom全面的网站监测服务网站,可测速和ping跟踪路由,可以免费监测1个站点,最短1分钟监测一次。
    • GTmetrix:主要优点在于提供了丰富的详细的测量结果,并建议如何来优化网页中每个元素的,最重要的是会根据网站的具体情况,直接告诉你导致网站加载速度变慢的根源在哪里

    Web开发社区

    100+ 超全的web开发工具和资源-稀土区

    当开发者在开发的过程中有遇到问题时,除了询问他人以外,还可以使用搜索引擎搜索。社区的重要性就显而易见了,大部分开发者会在开发社区分享他们经验,如何避过不必要踩的坑。

    国内:

     

    • 谷歌开发者社区(GDG):开放 · 分享 · 创新
    • segmentfault:是中国领先的开发者技术社区。 为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。【老实话我觉得这名字不好记】
    • 全栈社区:中国最大的全栈开发者社区,致力于打造一个问题解答,技术文章分享,全栈人员创业的服务平台,让开发更容易,让创业更简单.

    国外:

    Web开发新闻聚合

    100+ 超全的web开发工具和资源-稀土区阅读开发和设计的技术干货,及时的知道技术圈内更新了什么,保持信息流新鲜,有助于我们更好的开发!

    国内:

    • 掘金:掘金是中国质量最高的技术分享社区,邀请稀土用户作为Co-Editor 来分享优质的技术干货,从前端到后端开发,从设计到产品,让每一个掘金用户都能挖掘到有价值的干货。
    • 开发者头条:一个以程序员为中心,基于学习和分享的开发者社区。你可以阅读头条新闻、分享技术文章、发布开源项目,订阅技术极客们创建的学习主题和关注编程牛人。
    • 推酷:以技术为驱动,以聚合挖掘为核心,打造个性推荐和订阅,给你一站式的阅读。 更汇聚优质公开课和线下活动,让信息知识获取更便捷。

    国外:

    • wdrl.info:精心挑选的Web开发相关资源,每星期进行整合报道。
    • webopsweekly.com: 每周进行报道关于网络运营,应用部署,网站性能和工具分享类的文章。
    • web tools weekly:专注于前端开发和网页设计工具分享。每一个问题都有一个简短的提示或教程,另外每周都会分享的各种应用程序、脚本、插件和其他有用的资源。
    • freshbrewed.co:每周为前端开发者和设计师提供开发和设计类的阅读摘要。
    • smashingmagazine.com: Smashing Magazine是一款专门为个人前端开发者和设计师提供的在线报纸,每周二都会定时的更新有用的资源。
    • front-end dev weekly: 每周为前端开发者提供新闻, 包含工具资源,还有灵感。
    • friday front-end:邮件订阅,每日为前端开发者发关于开发资源的邮件。
    • /dev tips: 收集开发者的问题和建议, 用gif呈现,会每周发邮件通知。

    当然, 你也可以关注稀土区,来找到你需要的文章,顺便解决你的问题。

    备注

    如你所见,有数以百计的网络开发工具和资源,可以帮助简化你的开发工作流程,帮助开发更高效。我们无法一一列出所有工具或资源,如果有重要的工具或资源有遗漏,那就要麻烦小伙伴们在下面的评论里进行补充,谢谢!

    原文翻译:https://www.keycdn.com/blog/web-development-tools/

    展开全文
  • 2018年20种最佳前端Web开发工具

    千次阅读 2018-10-26 15:19:00
    有许多前端开发工具可以加速Web...此Web开发工具是一个命令行实用程序,用于与帮助打包的所述存储库进行交互。 特征: 在Registry中发现并重用超过470,000个免费代码包 鼓励团队内的代码发现和重用 发布和控制...

    有许多前端开发工具可以加速Web开发。以下是包含主要功能和下载链接的顶级工具的精选列表。

    1)Npm:

    Npm是JavaScript的Node包管理器。它有助于发现可重用代码的包并以强大的新方式组装它们。此Web开发工具是一个命令行实用程序,用于与帮助打包的所述存储库进行交互。

    特征:

    • 在Registry中发现并重用超过470,000个免费代码包
    • 鼓励团队内的代码发现和重用
    • 发布和控制对命名空间的访问
    • 使用相同的工作流管理公共和私有代码

    下载链接: https //www.npmjs.com/

    2)TypeScript:

    TypeScript是一种开源前端脚本语言。它是JavaScript的严格语法超集,它添加了可选的静态类型。它专门用于开发大型应用程序并编译为JavaScript。

    特征:

    • TypeScript支持其他JS库
    • 可以在运行JavaScript的任何环境中使用此Typescript
    • 它支持定义文件,可以包含现有JavaScript库的类型信息,例如C / C ++头文件
    • 它可以跨浏览器,设备和操作系统移植
    • 它可以在运行JavaScript的任何环境中运行

    下载链接: https //www.typescriptlang.org/index.html#download-links

    3)CodeKit:

    Codekit是一个前端Web开发工具。此工具为更快地构建网站提供支持。它结合,缩小和语法检查JavaScript。它还优化了图像。

    特征:

    • 注入CSS更改而无需重新加载整个页面
    • 组合脚本以减少HTTP请求。
    • 缩小代码以减小文件大小
    • 可以自动使用大多数语言而无需麻烦

    下载链接: https //codekitapp.com/

    4)WebStorm:

    WebStorm为JavaScript带来了智能编码帮助。它为Angular,React.js,Vue.js和Meteo提供高级编码帮助。它还可以帮助开发人员在处理大型项目时更有效地编码

    特征:

    • WebStorm可帮助开发人员在处理大型项目时更有效地编码
    • 它提供了用于调试,测试和跟踪客户端和Node.js应用程序的内置工具
    • 它集成了流行的Web开发命令行工具
    • Spy-js内置工具允许跟踪JavaScript代码
    • 它提供了一个统一的UI,用于处理许多流行的版本控制系统
    • 它非常可定制,完美适应各种编码风格
    • 它为客户端代码和Node.js应用程序提供内置调试器

    下载链接: https //www.jetbrains.com/webstorm/download/#section=windows

    5)HTML5 Boilerplate:

    HTML5 Boilerplate有助于构建快速,强大且适应性强的Web应用程序或站点。它是开发人员可以下载的一组文件,为任何网站提供基础。

    特征:

    • 它允许开发人员使用HTML5元素
    • 它的设计理念是保持渐进增强
    • Normalize.css用于CSS规范化和常见错误修复
    • Apache Server配置以提高性能和安全性
    • 它提供了Google Universal Analytics代码段的优化版本
    • 防止在旧版浏览器中导致JavaScript错误的控制台语句
    • 广泛的内联和随附文档

    下载链接: https //html5boilerplate.com/

    6)AngularJS:

    AngularJS是前端开发人员的另一个必备工具。它是一个开源的Web应用程序框架。它有助于扩展Web应用程序的HTML语法。它通过开发可访问,可读和富有表现力的环境简化了前端开发过程。

    特征:

    • 它是一个开放源代码,完全免费,并被全球数千名开发人员使用
    • 它提供创建RICH Internet应用程序
    • 它提供了使用MVC使用JavaScript编写客户端应用程序的选项
    • 它会自动处理适合每个浏览器的JavaScript代码

    下载链接:https //angularjs.org/

    7)Sass:

    Sass是最可靠,最成熟,最强大的CSS扩展语言。此工具有助于轻松扩展站点的现有CSS的功能,如变量,继承和嵌套。

    特征:

    • 使用前端工具编写任何代码都非常简单易用
    • 支持语言扩展,如变量,嵌套和mixins
    • 许多用于处理颜色和其他值的有用函数
    • 高级功能,如库的控制指令
    • 它提供格式良好,可定制的输出

    下载链接: http //sass-lang.com/

    8)Backone:

    Backbone.js通过提供具有键值绑定和自定义事件的模型为Web应用程序提供结构。

    特征:

    • Backbone.js允许开发人员开发单页应用程序
    • Backbone.js有一个简单的库,用于分离业务和用户界面逻辑
    • 该工具使代码简单,系统和有条理。它是任何项目的支柱
    • 它管理数据模型,该模型还包括用户数据并在服务器端显示该数据
    • 它允许开发人员创建客户端Web应用程序或移动应用程序

    下载链接: http //backbonejs.org/

    9)Grunt:

    Grunt是NodeJS上一个受欢迎的任务运行者。它灵活且广泛采用。它是任务自动化的首选工具。它提供了许多用于常见任务的捆绑插件。

    特征:

    • 它使工作流程像编写设置文件一样简单
    • 它允许以最小的努力自动执行重复性任务
    • 它有一个简单的方法。它包括JS中的任务和JSON中的配置
    • Grunt包含用于扩展插件和脚本功能的内置任务
    • 它加快了开发过程并提高了项目的性能
    • Grunt的生态系统是巨大的; 所以可以用很少的努力自动化任何东西
    • 此Web开发工具可降低执行重复性任务时出错的几率

    下载链接: https //gruntjs.com/

    10)Jasmine

    Jasmine是一个用于测试JavaScript代码的行为驱动的js。它不依赖于任何其他JavaScript框架。这个开源工具不需要DOM。

    特征:

    • 低开销,无外部依赖性
    • 开箱即用,需要测试代码
    • 使用相同的框架运行浏览器测试和Node.js测试

    下载链接: https //jasmine.github.io/index.html

    11)CodePen:

    CodePen是面向前端设计人员和开发人员的Web开发环境。这一切都是为了更快,更顺畅的发展。它允许构建,部署网站和构建测试用例。

    特征:

    • 它提供了构建组件以便以后在别处使用
    • 它包括一些很棒的功能来更快地编写CSS。
    • 允许实时查看和实时同步
    • Prefill API功能允许添加链接和演示页面,而无需编写任何代码

    下载链接: https //codepen.io/

    12)Foundalion

    Foundation是任何设备,介质和可访问性的前端框架。这种响应式前端框架可以轻松设计响应式网站,应用程序和电子邮件。

    特征:

    • 它提供最干净的标记,而不会牺牲基金会的实用性和速度
    • 可以自定义构建以包含或删除某些元素。因为它定义了列的大小,颜色,字体大小。
    • 更快的开发和页面加载速度
    • Foundation已针对移动设备进行了优化
    • 适用于所有级别的开发人员
    • 它将响应式设计提升到了一个新的水平,同时急需的中型网格适用于平板电脑

    下载链接: http //foundation.zurb.com/sites/download.html/

    13)sublime

    Sublime Text是一个专有的跨平台源代码编辑器。此应用程序开发工具本身支持许多编程语言和标记语言。

    特征:

    • 命令调色板功能允许匹配任意命令的键盘调用
    • 同时编辑允许对多个区域进行相同的交互式更改
    • 提供基于Python的插件API
    • 允许开发人员提供项目特定首选项
    • 与TextMate的许多语言语法兼容

    下载链接: https //www.sublimetext.com/

    14)网格指南:

    网格指南是另一个重要的前端开发工具。它允许在设计中创建像素完美网格。它是一个简单的工具,可以解锁非常有价值的工作流程。

    特征:

    • 根据画布,画板和选定图层添加参考线
    • 快速向边缘和中点添加指南
    • 允许为其他画板和文档创建重复的指南
    • 帮助用户创建自定义网格

    下载链接: https //guideguide.me/

    15)Chrome开发者工具:

    在Chrome开发者工具是一套内置到Chrome的调试工具。这些工具允许开发人员进行各种测试,轻松节省大量时间。

    特征:

    • 它允许添加自定义CSS规则
    • 用户可以查看边距,边框和填充
    • 它有助于模拟移动设备
    • 可以使用dev工具作为编辑器
    • 当开放工具打开时,用户可以轻松禁用浏览器的缓存

    下载链接: https //developer.chrome.com/devtools

    16)Modaal:

    Modal是前端开发插件,提供高质量,灵活的和可访问的模态。

    特征:

    • 针对辅助技术和屏幕阅读器进行了优化
    • 完全响应,扩展浏览器宽度
    • 可自定义的CSS与SASS选项
    • 它提供全屏和视口模式
    • 用于图库打开和关闭模式的键盘控制
    • 灵活的关闭选项和方法

    下载链接: https //github.com/humaan/Modaal

    17)less

    Less是一种扩展了对CSS语言支持的预处理器。它允许开发人员使用技术使CSS更易于维护和扩展。

    特征:

    • 它可以免费下载和使用
    • 它提供更高级别的样式语法,允许Web设计人员/开发人员创建高级CSS
    • 在Web浏览器开始呈现网页之前,它可以轻松编译为标准CSS
    • 可以将编译的CSS文件上载到生产Web服务器

    下载链接: http //lesscss.org/

    18)meteor

    Meteor是一个完整的堆栈JavaScript框架。它由一系列库和包组成。它建立在其他框架和库的概念之上,使原型应用程序变得容易。

    特征:

    • 它使开发应用程序高效
    • 它带有几个内置功能,包含前端库和基于NODE js的服务器
    • 它可以显着缩短任何项目的开发时间
    • Meteor提供MongoDB数据库和Minimongo,它完全用JavaScript编写
    • 实时重新加载功能仅允许刷新所需的DOM元素

    下载链接: https //www.meteor.com/install

    19)jQuery:

    jQuery是一个广泛使用的JavaScript库。它使前端开发人员能够专注于不同方面的功能。它使事情变得像HTML文档遍历,操作和Ajax一样简单。

    特征:

    • QueryUI有助于制作高度交互的Web应用程序
    • 它是开源的,免费使用
    • 它提供了强大的主题机制
    • 它非常稳定且易于维护
    • 它提供广泛的浏览器支持
    • 有助于创建出色的文档

    下载链接: http //jquery.com/download/

    20)Github:

    GitHub是一个受您工作方式启发的Web开发平台。该工具允许开发人员查看代码,管理项目和构建软件。

    特征:

    • 轻松协调,保持一致,并完成GitHub的项目管理工具
    • 它为工作提供了正确的工具
    • 简单的文档和质量编码
    • 允许所有代码在一个地方
    • 开发人员可以直接从存储库托管其文档

    下载链接:https //github.com/

    今天就分享到这里,希望大家多关注,更多精彩内容带给大家。nianiatea.com

    展开全文
  • web开发工具

    2017-07-28 15:27:03
    web开发,基本都会接触到chromeDev,打开chrome浏览器,按F12即可见到。这里我将开发过程中,最常用到的功能列举出来,具体怎么使用可自行百度。 查看样式、修改样式 代码调试 手机、平板模拟 控制台运行js命令 ...
  • java web开发工具有哪些?

    千次阅读 2018-10-23 16:48:32
    工欲善其事,必先利其器,好的开发工具能让程序猿们的Java web开发学习坐上高铁快车。那么今天小编就先整理一下感觉用来feel 倍爽的开发神器吧! 一、IntelliJ IDEA idea相信很多小伙伴已经在用了吧?小编我也是从...
  • 推荐:web开发人员常用8个小工具

    千次阅读 2016-12-07 18:01:26
    随着技术发展,web网页开发要求越来越高,开发者都希望能更快速更高效更完美地展示,但工欲善其事必先利其器,今天我们大圣众包(www.dashengzb.cn)小编就为大家整理8个好用的web开发常用工具,希望可以收藏实践下...
  • java web开发用到的全套工具

    万次阅读 2018-11-23 10:54:25
    工欲善其事,必先利其器,好的开发工具能让猿们的代码开发坐上高铁快车。那么今天我就先整理一下我通过亲身体验感觉用起来feel 倍爽的开发神器吧! 一、IntelliJ IDEA IDEA idea相信很多小伙伴已经在用了吧?小...
  • 网站开发一般分为前端和后端两个部分。前端负责实现页面效果,后端主要负责功能开发。一般的开发流程是先由美工或者网页...那web开发都用什么工具呢?最常用的前端开发工具有哪些呢?本文推荐8款最好用的web前端开发...
  • 市面上有许多前端开发工具可以加速 Web 开发工作。本文是对一些顶级 Web 开发工具的一次精选汇总,分别介绍了每款工具的关键特性,并已附上下载链接。 Novi Builder Novi Builder 是一个拖放式构建器,它对于经验...
  • 许多前端开发工具可以加速Web开发。以下是包含主要功能和下载链接的顶级工具的精选列表。 1)Npm: Npm是JavaScript的Node包管理器。它有助于发现可重用代码的包并以强大的新方式组装它们。此Web开发工具是一个...
  • 几个常用的免费的Web前端开发工具 一、Grid Guide 特点:快速生成栅格 二、Foundation 特点:一款类似Bootstrap的框架,有为栅格、排版、按钮和其它动态元素的预定义CSS类。但是它的设计更加简单,更加容易去...
  • Web前端开发工具 1、文本编辑器应用:操作系统自带编辑器(如Windows系统的记事本、Unix及类Unix系统文本编辑器Vim)、EditPlus、Notepad++等; 记事本 windows自带的记事本,可直接运行,无需卸载与重装。notepad....
  • 市面上有许多前端开发工具可以加速 Web 开发工作。本文是对一些顶级 Web 开发工具的一次精选汇总,分别介绍了每款工具的关键特性,并已附上下载链接。 1. Novi Builder Novi Builder 是一个拖放式构建器,它对于...
  • web前端开发常用工具有哪些?

    千次阅读 2019-07-01 17:05:18
    下面苏州学码思小编为大家介绍一些常用的web前端开发工具。 1、Bootstrap Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了新的浏览器技术,给你的Web开发提供了时尚的版式,表单,...
  • web前端——开发工具的介绍和安装

    千次阅读 2018-02-25 19:11:03
    web前端开发工具有很多,常见的有dreamver、sublime、webstorm、hbuilder等等。做为一个专业的web前端,dreamver基本废掉了(美工常用),推荐用sublime和webstorm(我就用这两个)。hbuilder以前用过,但...
  • web前端开发工具

    千次阅读 2018-12-26 12:52:54
    正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果。在这里我结合了自己的使用,分享几个比较实用的工具。 (1) h5目前是网站开发必需的语言,要学好h5建议用 ...
  • 我推荐大家使用WebStorm来做Web前端开发,高端、大气上档次。  相比Dreamweaver弱智的智能提示来看,WebStorm对html特别是HTML5和JS的智能提示简直堪称大神,很值得去使用。不过WebStorm不像Dreamweaver一样支
  • 十大移动web开发工具

    千次阅读 2015-05-11 10:43:21
    以下列出的这些是目前十大移动web开发工具,移动开发者可以(根据具体情况)用这些工具来创建apps,实现丰富的功能。欢迎提出宝贵意见。 1)mobl-lang Mobl是一款免费且开源的语言,可以加快移动app的...
  • WEB前端开发工具--整理

    千次阅读 2010-01-14 23:13:00
    IE浏览器插件•IE Developer Toolbar (DOM, CSS) •Web Accessibility Toolbar (可读性及更多功能) •XRAY, MRI (CSS) •Companion.JS(JavaScript) •Microsoft Script Debugger (JavaScript) •HttpWatch Firefox...

空空如也

1 2 3 4 5 ... 20
收藏数 721,363
精华内容 288,545
关键字:

web开发工具