最近折腾了一些开发调试工具，在前端开发中可以大大提升效率和前端性能并使工作流更加顺畅。
1. 基于任务的命令行构建工具Grunt
类似于Jake，支持以下预定义任务：
concat – 合并文件
init – 从预定义模板生成项目框架结构
lint – 用JSHint校验文件
min – 用UglifyJS压缩文件
qunit – 用无头PhantomJS实例运行QUnit单元测试
server – 开启一个静态Web服务器
test – 用nodeunit运行单元测试
watch – 当观察的文件改变时运行预定义的任务
安装(确保node和npm已经安装)：npm install -g grunt-cli
假定我们只对现有的项目做合并、压缩和校验的工作，那么可以先创建一个package.json和Gruntfile.js两个文件
package.json基于Packages规范如：
{
“name”: “my-project-name”,
“version”: “0.1.0″,
“devDependencies”: {
“grunt”: “~0.4.1″,
“grunt-contrib-jshint”: “~0.1.1″,
“grunt-contrib-uglify”: “~0.2.0″,
“grunt-contrib-concat”: “~0.1.3″,
“grunt-contrib-nodeunit”: “~0.1.2″
}
}
安装Grunt和Grunt插件：npm i grunt grunt-contrib-nodeunit grunt-contrib-concat grunt-contrib-jshint grunt-contrib-uglify –save-dev
Gruntfile.js是一个在项目根目录下的JavaScript文件，这个文件由下面组成：
“封装”函数、项目和任务配置、加载Grunt插件和任务、自定义任务，
如下：
module.exports = function(grunt) {
//project configuration
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
concat: {
main: {
src: ['config.js', 'jquery-1.8.2.min.js', 'core.js'],
dest: ‘build/main.js’
},
css: {
src: ['css/Main.css', 'css/App.css'],
dest: ‘build/css/main.css’
}
},
jshint: {
main: {
src: ‘build/main.js’
}
},
uglify: {
build: {
src: ‘build/main.js’,
dest: ‘build/output/main.js’
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-concat’);
grunt.loadNpmTasks(‘grunt-contrib-jshint’);
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.registerTask(‘concat’, ['concat']);
grunt.registerTask(‘jshint’, ['jshint']);
grunt.registerTask(‘uglify’, ['uglify']);
};
具体每部分的作用请看官网介绍。
这样就注册了三个任务，只要在控制台运行grunt concat，运行结果大致如下：
Runing “concat:main” (concat) task
File “build/main.js” created.
Running “concat:css” (concat) task
File “build/css/main.css” created.
Done, without errors.
同样可以运行grunt jshint和grunt uglify来校验和压缩文件。
2. WebStorm
WebStorm是一个强大的前端开发IDE，这里有比较详细的介绍。
3. YUIDoc
文档是保证项目可维护必不可少的环节，YUIDoc是一个基于NodeJs的文档生成工具。YUIDoc会解析JavaScript的注释块，所以需要按照YUIDoc提供的语法来写您的注释，如：
/**
* 类的描述
* @class MyClass
* @constructor
*/
/**
* 方法描述
* 可以是多行
* @method methodName
* @param {String} foo Argument 1
* @param {Object} config A config object
* @param {String} config.name The name on the config object
* @param {Function} config.callback A callback function on the config object
* @param {Boolean} [extra=false] Do extra, optional work
* @return {Boolean} Returns true on success
*/
之后在你的项目根目录运行yuidoc .即可，如果你想实时看你修改的情况，可以运行yuidoc –server 5000以服务器模式运行，然后访问http://127.0.0.1:5000/当你刷新浏览器时就会看到反应。
4. Chrome开发者工具
Chrome的开发者工具变得越来越强大，最新版不仅支持”Scroll into View”(在Elements里选择后点击页面会跳转到对应位置)，还可以在右侧栏点击”Toggle Element State”观察元素:hover :active时的样式。
在Mobile开发方面，点击右下角的设置可以设置”User Agent” “Device Metrics” “Geolocation” “Touch Events”等方便调试，同时要善于利用Profiles来检测内存泄露和DOM泄露。
如果你想跟随潮流，那不妨使用Chrome Canary进行开发和调试。
Chrome还提供了一些配置，如chrome://flags，你可启用”合成渲染层边框”来看webkit的渲染层。
