使用Firebug加速Dorado开发.doc

使用Firebug加速 Dorado开发 BSTEK 2007年9月  目录 概述 4 准备工作 4 下载Firefox 4 安装FireFox 4 下载安装Firebug 6 使用Firebug 9 初识Firebug 9 打开Firebug 9 Firebug界面介绍 10 控制台 11 显示错误功能 11 Debugger功能 11 错误搜索以及过滤 12 查看和修改Html 13 查看Html 13 修改Html 14 查看Html元素的Style 15 查看Html元素的Layout 16 查看Html元素的Dom 16 查看和修改Css 17 JavaScript调试器 18 对JavaScript进行调试 18 对JavaScript代码进行性能优化 20 Dom查看器 21 对Dom对象进行查看和修改 21 对查看内容进行过滤 21 网络状况监视 23 查看http请求统计 23 查看http请求内容 23 附录 25 Console Logging 函数 25 Logging 基础 25 Logging 等级 25 断言 25 测量（Measurement） 27 字符串格式化 27 命令行函数 27  概述 Firebug的中文含义是萤火虫，是FireFox下的一个插件，其定位是一款Web开发工具。通过Firebug，可以即时的编辑、调试和监视Css、Html和JavaScript。本文讲介绍Firebug的各个功能的使用，会结合表现层中间件Dorado来进行示例。关于Dorado可以参考如下链接： 准备工作 在开始讲述Firebug的使用之前，先进行Firefox和Firebug的下载和安装。 提示：Firefox亦即火狐浏览器，是近年来撼动IE浏览器市场占有率的一支强大力量。 下载Firefox Firefox的下载链接如下： /en-US/firefox/ 首先进入该链接以后，在“Download Firefox-Free”链接即可开始下载，如下图所示： 等待若干时间，就可下载成功。 安装Firefox 运行下载的Firefox Setup .exe，弹出安装对话框，点击下一步，在对话框中选择“我接受该协议条款”，点击下一步。若需要自行定义安装路径以及其他配置，需要在对话框中安装类型处选择“自定义”，如下图所示： 安装路径以及其他配置可以自行配置，安装路径的配置如下图所示： 安装完成后，运行Firefox，界面如下图所示： 下载安装Firebug 打开Firefox，打开如下链接： / 在打开页面中可以看到“Install Firebug 1.0 For Firefox”的链接，如下图所示： 点击该链接，则弹出如下对话框： 点击上图对话框的“立即安装”按钮，则Firefox自行下载Firebug，下载成功后如下图所示： 点击重启Firefox即可完成安装。 提示： 也可以选择下载下来然后再安装这个插件，不过在刚才那个网站是没办法下载的。我们可以到下面这个链接去下载这个插件的安装文件： /en-US/firefox/addon/1843 我们可以看到下载的文件是xpi文件格式(以.xpi结尾)。如何安装这个扩展文件呢？有三种安装方法:1,直接拖拽到Firefox浏览器的窗口里或扩展窗口里。2,点击 菜单--工具--附加软件,把.xpi文件拖进弹出窗口里,稍后就可以看到Firefox会询问你是否要安装这个插件,点击是,并重启Firefox浏览器。3,鼠标右键点xpi文件，选打开方式，在打开方式里选firefox，设置关联。以后只要双击xpi文件就自动安装了。  使用Firebug 初识Firebug 打开Firebug 在使用Firebug之前，我们需要先打开Firefox并打开一个页面。本文档旨在如何使用Firebug加速dorado开发，就拿dorado sample center中一个典型的查询页面举例说明。 打开FireFox，在地址栏输入如下链接，并回车： 87/dorado5/skills/data/query.jsp 可以看到如下图所示的页面： 在右下角我们可以看到一个绿色的对号图标，点击此按钮，就可以打开Firebug这个插件。(这是在页面没有错误的情况下，否则会显示有错误提示信息的。)另外，我们也可以使用快捷键F12打开。打开后的Firebug的界面如下图所示： Firebug界面介绍 在上图中可以大体了解到各个位置的不同功能，下面简单介绍一下： 菜单：打开Firebug的菜单，可以禁用启用Firebug，并且可以对Firebug进行一些选项设置。 功