开发JavaScript程序可以使用任何一种文本编辑器，如Windows的记事本、写字板等。
编辑器
使用任何文本编辑器都可以开发JavaScript程序，当然使用集成的开发环境能够提高编码效率。常用Web开发工具包括Dreamweaver、Visual Studio Code、Sublime、WebStorm、Atom、Aptana Studio等。
其中Dreamweaver针对网页设计师提供的专业可视化设计工具，对JavaScript提供有限功能支持，如智能提示、语法纠错等功能，适合HTML+CSS+JavaScript混合网页编码设计。
Visual Studio Code 是Visual Studio的在线、开放版，该工具功能完善，提供强大的扩展支持，是Web开发最好用的工具之一。
以上工具读者都可以在网上搜索下载，这里就不再提供下载链接。
测试和调试
测试的目的是显示存在的错误，调试的目的是发现错误或导致程序失效的错误原因，并修改错误。
浏览器的错误控制平台
为了帮助用户快速找到错误发生的具体位置，所有现代浏览器都提供了一个错误控制平台。详细说明参考下一小节内容
Firebug
Firebug是Firefox浏览器的一款开发类插件，它提供了HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的好帮手。Firebug能够从不同角度剖析Web页面的内部细节，给Web开发者带来了极大的便利。在JavaScript脚本调试方面也非常优秀，能够单步调试、设置断点、变量查看窗口一个不少。同时还可以统计每段脚本运行的时间，查看语句执行时间过长，一步步排除问题，如图13所示。
图13 Firebug插件窗口
HttpWatch
HttpWatch是强大的网页数据分析工具，可以在IE和Firefox下使用，当使用JavaScript和Ajax开发异步通信程序时，该工具就显得非常重要，它提供了详细的Cookies管理、缓存管理、消息头请求/响应、字符查询、POST数据和目录管理功能。能够跟踪HTTP传输的全过程，收集并显示网页深层信息，它不用代理服务器或一些复杂的网络监控工具，就能够在显示网页同时显示网页请求和响应的详细信息，甚至可以显示浏览器缓存和IE之间的交换信息，如图14所示。这是一个值得推荐的HTTP底层信息查找工具。
图14 HttpWatch插件窗口
Web Developer Toolbar
Web Developer Toolbar是Firefox浏览器的一款优秀的Web开发工具条，作为附加插件而存在。IE浏览器也开发了一款类似的Web Developer Toolbar，但是功能没有Firefox浏览器的强大。该工具条适合查看HTML结构和CSS样式，不提供对JavaScript直接支持，但是作为一款非常优秀的Web开发工具，也是不可缺少的。因为JavaScript开发必须与具体的DOM文档结构相联系。DOM查看是JavaScript开发者最重要但也是最容易被忽略的问题，使用它能够弥补我们在了解页面结构和样式信息时具有重要的辅助作用，如图15所示。
图15 Web Developer Toolbar开发工具条
JavaScript Debuger
JavaScript Debuger也是Firefox浏览器的一个内置组件，作为Mozilla浏览器的一部分开发的。JavaScript Debuger能够与JavaScript引擎本身紧密集成，这样就可以对代码进行更加精确的控制。因此与Firebug相比，JavaScript Debuger属于更专业的调试工具。在【开发者】菜单项中选择【调试器】命令，即可启动，如图16所示。
图16 JavaScript Debuger调试工具窗口
使用控制台
IE、Firefox、Opera、Chrome和Safari浏览器都提供了JavaScript控制台，用来查看JavaScript错误，并允许通过代码向控制台输出消息。
对IE、Firefox、Chrome和Safari来说，都可以通过console对象向JavaScript控制台写入消息，该对象包含下列方法。
- error (message)：将错误消息记录到控制台。
- info(message) ：将信息性消息记录到控制台。
- log(message) ：将一般消息记录到控制台。
- warn(message) ：将警告消息记录到控制台。
在IE、Firebug、Chrome和Safari中，用来记录消息的方法不同，控制台中显示的错误消息也不一样。错误消息带有红色图标，警告消息带有黄色图标。
【示例1】以下函数展示了使用控制台输出消息的一个示例。
function sum(num1, num2){
console.log("参数值分别为：" + num1 + "、" + num2);
console.log("计算参数的和为：");
var result = num1 + num2;
console.log(result);
return result;
}
sum(24, 45);
在浏览器中执行上面代码，则可以在控制台中看到输出信息，如图17所示。
图17 在IE控制台中写入信息
【示例2】不存在一种跨浏览器向JavaScript控制台写入消息的机制，但下面的函数可以作为统一的接口。
function log(message){
if (typeof console == 'object'){
console.log(message);
}else if(typeof opera == 'object'){
opera.postError(message);
}else if(typeof java == 'object' && typeof java.lang == 'object'){
java.lang.System.out.println(message);
}
}
这个logo函数检测了哪个JavaScript控制台接口可用，然后使用相应的接口。可以在任何浏览器中安全地使用这个函数，不会导致任何错误，例如：
function sum(num1, num2){
log("参数值分别为：" + num1 + "、" + num2);
log("计算参数的和为：");
var result = num1 + num2;
log(result);
return result;
}
sum(24, 45);
向JavaScript控制台中写入消息可以辅助调试代码，但在发布应用程序时，还必须要移除所有消息。在部署应用程序时，可以通过手工或通过特定的代码处理步骤来自动完成清理工作。
【提示】
记录消息要比使用alert ()函数更可取，因为警告框会阻断程序的执行，而在测定异步处理对时间的影响时，使用警告框会影响结果。
【拓展】
下面介绍console对象的一些特殊用法：
- 占位符
console支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o），例如： console.log("%d年%d月%d日",2018,3,26);。
- 信息分组
console.group("第一组信息");
console.log("我的博客(http://www.mysite.com)");
console.log("CSDN(http://blog.csdn.net/u00000000)");
console.groupEnd();
console.group("第二组信息");
console.log("QQ群：66668888");
console.log("欢迎你加入");
console.groupEnd();
- 查看对象的信息
console.dir()可以显示一个对象所有的属性和方法。例如：
var info = {
blog:"http://www.mysite.com",
QQGroup:66668888,
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
- 显示某个节点的内容
console.dirxml()用来显示网页的某个节点（node）所包含的HTML代码。例如：
<div id="info">
<h3>我的博客：www.mysite.com</h3>
<p>程序爱好者:66668888,欢迎你的加入</p>
</div>
<script>
var info = document.getElementById('info');
console.dirxml(info);
</script>
- 判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。例如： var result = 1; console.assert( result ); var year = 2014; console.assert(year == 2018 );
1是非0值，为真；而第二个判断是假，在控制台显示错误信息。
- 追踪函数的调用轨迹
console.trace()用来追踪函数的调用轨迹。例如：
function add(a,b){
console.trace();
return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
- 计时功能
console.time()和console.timeEnd()，用来显示代码的运行时间。例如：
console.time("控制台计时器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");
- console.profile()的性能分析
性能分析就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。例如：
function All() {
alert(11);
for (var i = 0; i < 10; i++) {
funcA(1000);
}
funcB(10000);
}
function funcA(count) {
for (var i = 0; i < count; i++) { }
}
function funcB(count) {
for (var i = 0; i < count; i++) { }
}
console.profile('性能分析器');
All();
console.profileEnd();