用 Mozilla 调试网页 (转载得好辛苦)

最近为了搞懂HTTP会话和服务器的发送中都发生了些什么内容,找了很多工具,一直没找到最合适的,出了朋友推荐的COMVIW还比较强大外,呵!强大是一回事情,功能太多,都没全部完成搞懂怎么使用!今天看到了这个东西,觉得是简单又方便!贴在这里,以后自己在仔细研究一下,好辛苦啊!

onestab.net

用 Mozilla 调试网页

• 翻译：onestab [2004.02.27]
• 原文: gemal.dk [2004.02.09]

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

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

本文的其他语言版：英语 | 法语 <!-- <a href="http://www.onestab.net/a/mozdev.html" title="Simplified Chinese Edition">简体中文</a> -->欢迎提供反馈。请与我 联系。

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 调试器

JavaScript 调试器也支持剖析（profiling）,可以用于度量脚本执行的时间。

JavaScript 调试器可以从工具 -> Web 开发 -> JavaScript 调试器 启动。

更多信息...

• Introduction to the JavaScript Debugger at DevEdge
• Venkman at mozilla.org
• Venkman Development

HTTP Headers

Mozilla 最好的扩展之一就是 Live HTTP Headers。它能让您实时观察到浏览器和Web服务器之间交换的 HTTP Header。比如你想调试 Cookie 问题或者 MIME 头信息的问题，可以用它来查看全部 HTTP Header 的详尽信息。

图 14: Live HTTP Headers

安装了 Live HTTP Headers 扩展之后，可以从工具 -> Web 开发 -> Live HTTP Headers 或 查看 -> 页面信息 -> Headers启动。

更多信息...

• LiveHTTPHeaders at mozdev.org

DOM 查看器

DOM 查看器可以用来查看或编辑任何网页或 XUL 的DOM。可以用两个或三个面板探查文档或结点的 DOM 层次，还可以查看样式表、样式规则等等，而不仅仅是 DOM。

在屏幕截图中可以看到，页面中与 DOM 树中的结点相对应的文本的边框以高亮显示。

图 15: Mozilla 的 DOM 查看器

DOM 查看器可以从 工具 -> Web 开发 -> DOM 查看器中启动。

更多信息 ...

• DOM Inspector at mozilla.org
• Introduction to the DOM Inspector

缓存管理器

Mozilla 的缓存管理器使你能够完全访问内存或者磁盘的缓存。您可以观察到所有缓存内容的资料，能帮助开发者验证某个Web应用程序送出的头信息是否正确。

图 16: Mozilla 的缓存管理器条目

在地址栏中输入 about:cache，按回车，即可启动缓存管理器。

网页编辑器

Mozilla 套装内包含有全功能的 HTML 编辑器，本文不打算讨论这个网页编辑器，因为每个开发者都有自己惯用的编辑器。

结论

作为 Web 开发者，没有 Mozilla 简直是无法想象的。Mozilla 的 Web 开发和调试工具是非常出色的，非常适合用于网站的测试和调试。

如果您有任何意见或评论，欢迎与我联系。

相关资源

• mozdev.org
• Checky Plug-in
• 101件 Mozilla 浏览器能而 IE 不能做的事

onestab.net | w3c validate xhtml1.0