看透JavaScript:原理、方法与实践
上QQ阅读APP看书,第一时间看更新

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标签)中。