标签：javascript 前端 编码工具 编码调试
一、前言
工欲善其事，必先利其器。事和器之间是对应的，做什么事用什么工具，这是有讲究的。
对于JavaScript来说（当然并不仅仅限于JavaScript，其他语言也是如此），我认为学习的工具和生产的工具，还是区别开来会更好一些。在生产中，一切以生产效率为目标，使用功能强大的IDE是不二的选择。而学习，自动化太高的工具，反而会阻碍你的学习。当然，如果你是一名熟练的工程师，可以不用考虑这些问题。
我的习惯是，当要学习新技术，或者新语言的时候，我喜欢手工代码，会用一个简洁、方便的文本编辑器，比如EditPlus编写代码，编译也是用命令行的方式手工进行，这让我洞察语言或者技术的本质原理，了解更多的细节。然后，我会找一个代表性的开源项目，用IDE分析它的源代码，从而掌握这门语言或者技术是如何在生产环境中解决实际问题的。
二、编码工具
只要是编辑文本的工具，都可以用以JavaScript编码。不过，考虑到性能、效率，以及方便性，大家用的比较多的还是EditPlus、UltraEdit、EmEditor、Notepad++、Sublime Text，以及WebStorm、Visual Studio等。后两个是专业的IDE，属于重量级开发工具。
EditPlus小巧方便、功能强大，用起来很是顺手。一般通过目录来组织和管理项目文件。
不过EditPlus默认使用IE浏览器，而且是”无缝浏览器“，打开的浏览器页面，也在EditPlus的一个子文档页面，无法使用浏览器的”开发者工具“，对于复杂JS代码的调试很不方便。可以通过首选项设置来修改浏览器的配置。
这样浏览网页的时候可以打开外部的浏览器，按F12进行调试。
EditPlus是收费软件，如果你不愿意花钱注册，可以使用Notepad++。Notepad++可以使用工程管理项目。
然后可以"从目录添加文件"，将你的项目文件添加到工程，方便管理。
当然，别忘了保存工作区。
可以通过快捷键打开设置好的浏览器浏览页面、调试程序。你可以修改运行浏览器的快捷键，以符合你的个人习惯。
Sublime Text是一个功能强大的代码编辑器，是收费软件，但可以无限期试用。Sublime Text可以通过插件扩展、增强功能，所以功能强大，而且很好玩，深受程序员喜爱。安装插件的方法主要有两个。
安装方法一：直接安装。
可以直接下载插件安装包，解压缩到Packages目录。Packages目录可以通过菜单->preferences->browse packages查看。
安装方法二：使用Package Control组件安装。
通过菜单->Perferences->package control，调出Install Package，然后在列表中选中要安装的插件。
比如说，我们希望在Sublime Text工作环境中可以直接打开浏览器，以查看网页的效果进行调试，可以安装一款很实用的右键菜单增强插件SideBarEnhancements。在Sublime Text左侧FOLDERS栏中的右键菜单功能就会增强很多。
该插件还能让我们自定义快捷键设置使用哪款浏览器，点击菜单栏的preferences->package setting->side bar->Key Building-User，进行设置。
这样，你就可以直接通过右键菜单，或者快捷键打开浏览器来查看网页了。
安装SublimeTmpl插件可以快速生成文件模板，比如快捷键“ctrl+alt+h”生成HTML文件模板。
安装better completion插件，支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示。
注意配置文件，首先将preferences->package setting->sublime better completion->Settings-Default中的配置内容复制到preferences->package setting->sublime better completion->Settings-User中，然后进行修改。
比如，现在启用JQuery自动完成，则修改“"jquery": false,”为“"jquery": true,”。
通过配置，可以在Sublime Text内运行javascript，不用打开外部浏览器进行浏览调试，查看代码运行效果。
第一步：安装Node.js
安装完后，要看下是否配置好了nodejs的环境变量。
然后，在命令行中输入node指令测试一下。
第二步：添加build system
点击菜单Tools -> Build System -> New Build System，输入配置信息并保存。
然后，可以在Sublime Text内直接运行JavaScript了。
三、代码调试
没有谁写代码能够一蹴而就。验证思路、追踪bug、解决错误，调试伴随着我们编码的全过程。好的调试方法和工具，可以极大地提高我们的编码效率。
我们一般在浏览器中运行我们的代码，可以通过提示信息，比如alert语句、console.log语句，来验证输出结果是否和我们预想的一致。也可以用F12调出浏览器的开发者工具，对代码进行断点调试。
比如，有一个函数sayHello，我们要调试它。
function sayHello(name){
var msg = "你好，"+name;
console.log(msg);
}
我们用EditPlus编写了两个文件。
test.js
test.html
根据前面讲的，我们可以设置EditPlus调用外部浏览器打开HTML页面，并通过快捷键F12调出浏览器的开发者工具，刷新页面，我们在控制台看到了程序的输出结果。
你可以点击“Source”查看源代码，并通过鼠标点击添加断点，刷新页面重新加载网页，就可以进行断点调试了。
当然，功能强大的IDE，将编码、调试集成在了一起，用起来就很方便。方便是有代价的，这些工具为你的生产提高了效率，你就要交出你的money了。WebStorm、Visual Studio等，就是这样的工具。这里讲一下功能最强大，用起来最方便的Visual Studio，其他的工具，你可以根据自己的喜好，选择学习和使用。
首先创建一个网站项目。简单明了起见，我们创建一个空项目，然后把刚才那两个文件复制到工程中。
我们这次直接把断点加在网页中。
运行程序，就会停在断点的地方。
逐步运行，查看程序运行结果。
四、总结
JavaScript，本是一种为Web浏览器设计的脚本语言，但近几年，已经广泛应用于各种软件应用中。不仅有运行在服务端的JavaScript代码，也有了用来驱动iOS和Android应用的JavaScript代码，甚至还有的用来控制机器人。因此用什么样的工具好，要根据自己的工作场景和需求，选择适合的工具。
本文出自 “老惠” 博客，转载请与作者联系！
标签：javascript 前端 编码工具 编码调试
原文地址：http://19680411.blog.51cto.com/11767410/1952276
