神器：前端开发人员必备的5款开发工具

Posted 2021-04-25 ThinkPHP

在过去的几年时间里，出现了许多全新的网页应用程序，不过，由于应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加。

现在也有不少前端开发工具，比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时，javascript的应用也越来越常广泛，而且它还能和Node.JS在后端协同工作，快速搭建易于扩展的网络应用。实际上，为了应对前端开发复杂度所带来的挑战，开发人员创建了许多工具来简化开发流程。从测试框架，到分析工具，前端开发工具已经非常成熟了，正是得益于这些有用的工具才让用户体验到最佳的互联网服务。

开发人员都喜欢使用高质量的软件开发工具，本文就推荐五个优秀的前端开发工具和框架，希望能供开发人员参考。

Chrome dev Tool

这是目前最好的前端开发工具。自从其诞生以来，Chrome在其开发者工具中投入了大量精力，而且直到现在，谷歌仍在不断优化这些工具。一般而言，谷歌会在每六周发布对Chrome开发者工具的优化，并推出一些全新功能。

Chrome开发工具是各种工具组成的套件，开发人员可以实时编辑DOM(html)/CSS，逐步调试JavaScript，并帮助开发者更加深入地进行性能分析。Chrome开发工具甚至还可以新增terminal（DevTool Terminal是一款Chrome开发工具的扩展，可以帮助开发者在浏览器中访问终端。如果你经常在命令行工作，这款扩展将十分适合你），帮助开发人员解决相关渲染性能问题。

DOM/CSS编辑器是一个非常强大的工具，可以为你的开发团队提供实时反馈，在开发UI/UX新功能的时候可以支持快速迭代。

在官网和谷歌开发者的YouTube频道上面有许多含金量很高的信息。其中一个名为“命令行API”的章节就为开发人员提供了大量非常有用的命令。比如，你可以调用一个特殊的“复制”功能，就可以从控制台复制任何东西（比如对象，函数返回）到剪切板上面。另外，在HTML5Rocks上面还有很多优秀的教程。如果你的好奇心很强，并且想了解浏览器究竟是如何工作的，那么能在这些教程里学到很多东西，帮助你全面掌控应用程序开发周期。

如果谷歌不断优化Chrome开发工具的话，这套工具最终会成为网页的集成开发环境（IDE），直接和浏览器进行捆绑，为开发人员提供更加强大的开发空间。

Grunt

Grunt在任务自动化中很有用，它是一个基于任务的JavaScript命令行构建工具，支持捆绑任务插件。此外，Grunt是可扩展的，开发人员可以按照自己的需要编写不同的任务，而且Grunt支持将多任务整合在一起，提供更强大的功能。

如今，Grunt已经不再局限于简单的前端自动化工作任务流了，在php开发时，就可以使用Grunt进行测试工作，如下所示：

terminal =require('color-terminal')log = (error, stdout, stderr, cb) ->iferror
terminal.color('red').write stdoutelseterminal.color('green').write stdout

cb()module.exports = (grunt) ->grunt.loadNpmTasks'grunt-contrib-watch'grunt.loadNpmTasks'grunt-shell'grunt.initConfig
testFilepath: nullwatch:php:options:event:'changed'spawn: falsefiles: ['foo/bar/**/*.php''foo/bar/**/*Test.php']tasks:'shell:phpunit'shell:phpunit:options:callback: log
command:'echo <%= testFilepath %> && phpunit -c app <%= testFilepath %>'grunt.event.on'watch', (action, filepath, ext) ->regex =newRegExp("foo/bar/([a-z0-9]+)/([a-z0-9/]+)","i")iffilepath.match regex
iffilepath.indexOf('Test') is -1testFilepath = filepath.replace regex,"foo/bar/$1/Tests/$2Test"elsetestFilepath = filepath

grunt.config'testFilepath', testFilepath

Grunt还可以用来创建工作区，此外开发人员在创建一个新项目的时候，往往需要做一些繁琐且重复的必要工作，而Grunt提供了不少插件，可以使这些琐碎的工作变得简单。

LiveReload

AsyncProcess =require('./async-process').AsyncProcessdescribe('AsyncProcess',function() {varasyncProcess;beforeEach(function() {asyncProcess =newAsyncProcess();});it('should process 42',function() {vardone = false;varprocessed = null;deferred = asyncProcess.process();deferred.then(function(result) {done = true;processed = result;});waitsFor(function() {returndone;},"the async process to complete", 10000);runs(function() {expect(processed).toEqual(42);});});});

Mocha/Chai

AsyncProcess =require('./async-process').AsyncProcess;Chai =require('chai');Chai.should();describe('AsyncProcess',function() {varasyncProcess;beforeEach(function() {asyncProcess =newAsyncProcess();});it('should process 42',function(done) {deferred = asyncProcess.process();deferred.then(function(processed) {processed.should.be.equal(42);done();});});});

Jasmine所选的为默认语法，只有通过插件才能有Mocha一样的功能，而后者简洁的多。

和Jasmine不同，Mocha仅提供行为测试结构，这种测试框架通常对应的是行为驱动开发，也就是BDD。但是这点并不会对Mocha产生负面影响，它可以与Chai和Sinon这样的辅助测试工具结合使用。

下面，就是调用Sinon测试工具集内的spy类进行测试的一个例子：

// Function under testfunctiononce(fn) {varreturnValue, called = false;returnfunction() {if(!called) {called = true;returnValue = fn.apply(this, arguments);}returnreturnValue;};}it("calls the original function",function() {varspy = sinon.spy();varproxy = once(spy);proxy();assert(spy.called);});

Chai的特点在于，开发人员可以使用和自然语言相近的声明语法。不妨可以参考下面的例子，调用Chai中的should声明语法。

foo.should.be.a('string');foo.should.equal('bar');foo.should.have.length(3);tea.should.have.property('flavors').with.length(3);

很清晰，对吗？现在就赶紧在你自己的代码上测试一下吧！

Karma

虽然笔者把Karma放在了最后一个，但它仍然是一款非常重要的前端测试工具。Karma的前身是Testacular，一个Javascript测试工具。Karma开发者和开发AngularJS的是同一批人。如果你使用Mocha、Chai以及Sinon，那么连续不断的运行上述这些测试框架，会提供实时的反馈吗？

Karma允许开发人员从工作站（在持续运行模式下）到生产调用指示，都能进行测试。它还支持多种浏览器，包括Chrome、Firefox、IE、PhantomJS，让你对自己的代码充满自信。

在进行开发工作时，第一快乐的就是在自己的电脑上写代码，并实时得到结果反馈；第二快乐的，就是自己的程序能够应用在各种浏览器上面，想必上述这两点能够得到绝大多数开发人员的共鸣吧。现在，你是否已经做好了准备，化身成为一个“前端忍者”，去挑战一切困难了呢？当然，这里没有提到一些文本代码编辑器，比如SublimeText和Vim，但是它们都是很好的开发工具。另外，本文使用的例子都来自GitHubGist。

如果您恰巧也是一名前端开发工程师，那么是否也有自己喜欢的工具呢？欢迎在评论里和大家分享。

收藏吧！评论交流点“阅读原文”进入网页版