第一节：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代码，甚至还有的用来控制机器人。因此用什么样的工具好，要根据自己的工作场景和需求，选择适合的工具。

转载于:https://blog.51cto.com/19680411/1952276