3.1 工具介绍
JS是一种脚本语言，它是直接按源代码解释执行的，并不需要编译，所以编写JS脚本使用简单的文本编辑工具就可以了。例如，Windows自带的记事本、Notepad++、Sublime Text、EditPlus、UltraEdit等，当然也可以使用Dreamweaver或者Eclipse、IDEA、Visual Studio等集成开发工具，只要自己用着顺手就好。
除了编辑代码的工具之外，对学习JS来说，非常重要的还有调试工具。JS是一种脚本语言，它自己并不能运行，需要借助浏览器才可以运行。最新版本的浏览器都可以调试JS脚本，有的是自带此项功能，有的需要安装相应的插件，下面分别进行介绍。
1. Firefox
对于Firefox来说，调试JS要首推大名鼎鼎的FireBug扩展。在使用FireBug扩展之前必须先安装。在安装好Firefox之后，需要在“添加组件”的“扩展”选项卡中搜索“Firebug”，找到后进行安装即可，如图3-1所示。
图3-1 在Firefox中安装FireBug扩展示意图
安装完成后会在工具栏多出一个“虫子”按钮，那就是FireBug。在需要调试的页面单击此按钮或者按F12快捷键，就可以调出FireBug的调试窗口，其界面如图3-2所示。
图3-2 FireBug的调试界面
2. Chrome
在安装完Chrome后，直接按F12或者Ctrl+Shift+I快捷键就可以调出调试界面，如图3-3所示。
图3-3 Chrome的调试界面
3. Internet Explorer
Internet Explorer 8之后的浏览器中也增加了自带的调试工具。例如在Interenet Explorer 11中按F12快捷键可以调出调试界面，如图3-4所示。
图3-4 Internet Explorer 11的调试界面
4. Safari
Safari也提供了默认的调试工具，不过需要先将开发菜单显示出来才可以使用。显示的方法是，在“偏好设置”的“高级”选项卡中勾选“在菜单栏中显示‘开发’菜单”复选框，如图3-5所示。
图3-5 开启Safari“开发”菜单
开启“开发”菜单之后，就可以在“开发”菜单中调出调试窗口。如果浏览器没有显示此菜单，也可以在设置的下拉菜单中选择“开发”→“开始调试JavaScript”选项，如图3-6所示。
图3-6 调出Safari调试窗口
Safari的调试窗口如图3-7所示。
图3-7 Safari的调试界面
5. Opera
Opera浏览器也提供了自带的调试工具，默认可以按Ctrl+Shift+I快捷键调出。Opera的调试界面默认是在右边，可以通过调试界面的切换按钮（关闭按钮左边）切换到下面显示，调试界面如图3-8所示。
图3-8 Opera的调试界面
前面介绍了目前主流的5种浏览器的调试工具，因为不同浏览器的实现会有所区别，所以在实际开发中可能需要在多个浏览器中进行调试。本书主要以Firefox的FireBug扩展进行讲解，不同浏览器的调试方法大同小异。
另外，在调试的过程中经常需要输出一些内容，常见的输出方法有三种。
▯ 调用alert(msg)方法弹出提示框。
▯ 调用console.log(msg)方法输出到控制台。
▯ 将内容写入页面标签（例如写入指定的div标签）中。