Mozilla 如何调试网页----Mozilla|Web 开发工具|javascript调试

Mozilla 如何调试网页

Mozilla 是个非常好的网页制作和 Web 开发工具，不但可以用作网页编辑器，而且还可以用作调试工具。本文将介绍 Mozilla 的几个很酷的特性，可以用它迅速查出和排除网页和Web应用程序的错误。

原文写作时用的是Windows XP下的 Mozilla 1.4a 和 Internet Explorer 6.0 SP1，全部为英文版。[译注：本文翻译中用的是 Windows 98 下的 Mozilla 1.6 和 IE 6.0 SP1，全部为中文版。]

本文的其他语言版：英语 | 法语 <-- -->欢迎提供反馈。请与我联系。

JavaScript 控制台

网页中出现的错误大都是由 JavaScript 引起的，而且大多是非常简单的错误，我认为这正是有些网站无法在 Mozilla 下正常工作的原因。其实这些错误是很容易避免的。

即使设置正确，当错误出现时，Internet Explorer 只是会弹出一个几乎毫无用途的对话框，告诉你“该网页有错误”，初学者很难把错误复制到剪贴板上。想调试 IE 中的错误，必须下载微软的脚本调试器，它是Internet Explorer 下用的脚本调试环境。

图1: IE 中的 Javascript 错误

而 Mozilla 则提供了 JavaScript 控制台，它可以记录下所有脚本错误。在进行网站测试时打开 JavaScript控制台，任何 JavaScript 错误就可以马上看到。确实是必不可少的网站开发工具。

JavaScript 控制台能报告出错的文件名和行号，以及错误出现时的上下文，使您很容易找出错位置和错误原因。

图 2: Mozilla 中的 Javascript 控制台显示的错误

您可以右键单击错误并把它复制到剪贴板上。JavaScript控制台还需要改进，你无法将所有条目保存到一个文件，而且换行不正确。

您可以从工具 -> Web开发 -> JavaScript 控制台来启动它。

严格模式 JavaScript 警告

严格模式下的 JavaScript 警告消息由位于浏览器核心JavaScript引擎产生。每种浏览器可以对JavaScript脚本进行严格检查，包括 Mozilla、Internet Explorer 和 Opera，但只有 Mozilla 能显示警告。

这些 JavaScript警告信息是脚本引擎对客户端脚本代码的错误警告。这些警告和其他 JavaScript 错误不同，不会终止页面的处理，但是速度会稍稍减慢，因为它毕竟是脚本引擎产生的异常。

图 3: 严格模式 JavaScript 警告

开发者无法在别的浏览器中捕获此类异常，但在 Mozilla 中可以做到。你拥有完全的掌控，写出100%合格的 JavaScript 代码再也不是件难事了。

JavaScript 最常见的毛病是重复声明同一个变量：

var response = true;var response = false;

严格模式下的 JavaScript 检查会产生下面的警告：

"redeclaration of var response"

正确的写法应当是这样：

var response = true;response = false;

JavaScript 控制台可以在午夜版的编辑 -> 首选项 -> 调试 -> 显示严格的 JavaScript 警告中激活。如果你用的是正式发行版，可以在地址栏中输入about:config 按回车，找到并打开 javascript.options.strict 选项。

更多信息...

掌握 JavaScript 严格模式警告

Cookie 管理

今天的大多数网站都使用了Cookie。Cookie 的调试却很困难，不过难不倒 Mozilla。

在 Internet Explorer 中你无法看到当前的 Cookie，至少无法直接在浏览器中看到。所以如果你用的是 IE, 唯一的选择就是删除全部的 Cookie，如果您只想清除某个站点的所有 Cookie，只有到 %USERPROFILE%\Cookies 文件夹（Windows XP下）中去找到并手工删除，因为无法知道 Cookie 文件的格式，我不敢肯定是否能够编辑或删除某个站点的某个 Cookie 项。

图 4: Internet Explorer 中的 Cookie 管理器

Mozilla 则完全不同。您对 Cookie 拥有完全的控制，包括 Cookie 的设置和取消。您可以使用 Cookie 管理器查看所有当前已设置的 Cookie，还可以有选择地删除 Cookie。

图 5: Mozilla 中的 Cookie 管理器

这两种浏览器都有一个对话框，让您选择接受或拒绝 Cookie。对话框的外观几乎一样，但 Mozilla 的要好一些。它能记住 Cookie 的状态信息，如果您选择了查看详细信息，则下次打开时对话框仍然会看到详细信息，而 Internet Explorer 则要在点一次“详细信息”按钮。

图 6: Mozilla 的 Cookie 对话框

图 7: Internet Explorer 的 Cookie 对话框

查看源代码时的语法加亮

Web 开发人员最常用的功能之一就是查看源代码。Mozilla 的源代码查看器有非常好的语法加亮功能，而在 Internet Explorer 中则要借助于其他工具。

Internet Explorer 默认情况下用记事本查看源代码。整个 Windows 系统中最简单的程序就是记事本了，非常非常简陋。

图 8: 用记事本查看 gemal.dk 的源代码

Mozilla 用的是内置的带语法加亮功能的源代码查看器，很容易看懂 HTML 文件的总体结构。

图 9: 带语法加亮显示的 gemal.dk 源代码

可以通过查看 -> 页面源代码查看网页的源文件。

查看所选部分源代码

如果你用过 JavaScript 的 document.write，大概对无法看到动态写入的内容不陌生吧。在 Internet Explorer 中很难看到用脚本生成的 HTML 代码，你只能看到脚本本身。通常用一连串的 JavaScript alert 才能看到生成的源代码。

Mozilla 有一个非常好用的功能，可以为你节省不少 alert 命令。这个功能叫做“查看所选部分源代码”。首先标记出（选择）想要查看的内容，从右键弹出菜单中选择“查看所选部分源代码”。 Netscape 4 也有相似的功能。此外还有对源代码查看器的改进，可以让你在源文件和生成的HTML代码间切换。

下面就是个例子，其中引号的位置错了，如果没有查看选中部分源代码的功能，几乎无法找出其中的错误：

for (var i = 0; i < 10; i++) { document.writeln('<span id="id-"' + i + '">test: ' + i + '</span>'); for (var j = 0; j < 5; j++) { document.write(j + '<br>'); }}

图 10: 查看所选部分源代码

页面信息

Internet Explorer 和 Mozilla 都可以显示当前页面的属性。

Internet Explorer 是通过文件 -> 属性实现的，所显示的信息非常有限。

图 11: Internet Explorer 的页面信息

而在 Mozilla 中，你可以查看当前页面的全部信息。

图 12: Mozilla 中的页面信息

查看页面信息可以用查看 -> 页面信息.

JavaScript 调试器

Venkman 是 Mozilla 的调试员。Verkman 提供了一个强大的 JavaScript 调试环境，既有GUI 的也有命令行的。两者的功能都包括断点管理、调用堆栈检视以及变量/对象检视，用起来很舒服。而交互式的命令行方式允许您运行特定的 JavaScript 代码，键盘快捷键与图形环境的一样，

图 13: Mozilla 的 JavaScript 调试器