您好,欢迎 来到润思科技-信息IT服务 长沙软件定 做外包公司!
0731-82519789

润思专业售 前支持

一"点"我帮您!

0731-82519789

24小时:13549648356

技术文档

您现在的位 置:主页 > 新闻中心 > 技术文档 >

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


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


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


更多信息...


Introduction to the JavaScript Debugger at DevEdge


Venkman at mozilla.org


Venkman Development


HTTPHeaders


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 树中的结点相对应的文本的边框以高亮显示。


Mozilla 的 DOM 查看器图 15: Mozilla 的 DOM 查看器


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


更多信息 ...


DOM Inspector at mozilla.org


Introduction to the DOM Inspector


缓存管理器


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


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


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


网页编辑器


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


结论


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


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


友情链接:    22彩票官网   亚投彩票注册   乐喜彩票网址   乐投彩票计划   乐投彩票计划