我们先到Firebug的主页上下载最新的版本装上，下面开始调试：

1、查看、编辑HTML元素及其CSS

安装好Firebug之后，你可以通过点击浏览器右下方的小虫子打开Firebug，如图：

或者直接按F12，如果要以窗口形式打开的话，就按下CTRL+F12

打开Firebug之后，点击“查看”，然后选择页面上任何需要编辑的地方，Firebug会将其选中，并且在HTML结构中将其高亮，如图：

之后你可以对该元素的HTML结构、属性进行任意的编辑，修改后的效果都会实时的展现在页面当中。

同时在Firebug的右侧是该元素对应的CSS样式，如下图：

图中的样式，显示了该元素被重新定义的样式继承关系，比如“继承自body.CurHome”的“text-align”属性被“继承自div.shell”的“text-align”覆盖，原先的属性就会以中横线的形式表示出来。如果要查看所有的属性，请勾选图中标“1”的选项。
单击“2”可以禁用/打开某条CSS属性；单击任意一个属性或者属性值可以进行CSS的编辑，如“3”；双击“4”则可以新建一条CSS属性。现在我们点击下“5”来看看CSS布局面板：

上面这幅图展现的是一个HTML结构的标准盒模型，通过点击相应的数值可以修改该值，同时在浏览器窗口中显示出对应的效果来。

2、查看动态生成的HTML代码的方法

通过“查看源代码”的方法，无法看到由JS动态生成的HTML结构，这里我们可以通过Firebug来查看，如下图，选中“body”节点，按下“编辑”，即可输出页面上源文件的代码以及动态生成的代码。

还有另外一种简单的方法，选中你要查看的页面元素，然后在右键菜单中选择“查看选中部分源代码”

3、查看/测试页面的函数执行效率

查看页面上所有函数执行效率可以很容易的找到运行最慢的函数，从而帮助WD有针对性的进行页面的JS优化。如图，为需要调试的页面“启用控制台”：

点击“概况”开始收集，再次点击即可停止，然后进行查看。

在firebug控制台的最底下是一排命令行，在这里你可以输入任意JS语句，按下回车键即可执行：

使用console，还可以测试一段代码或者函数的执行时间，点击命令行最右侧的红色按钮切换到命令行多行模式：

4、使用Firebug查看XMLHttpRequest

使用Firebug查看XMLHttpRequest，对于调试AJAX是很有帮助的。如图：

为需要调试的站点开启“网络”监控功能，其实该功能可以查看页面上所有类型的post和get请求，并且还会显示出请求消耗的时间。对于XMLHttpRequest会有详细的参数与返回值。

5、查看页面上所有的CSS与JS

在页面调试中我们发现，对于外部引用的CSS与JS很难进行调试，使用基于Firebug的Yslow扩展即可解决该问题。首先在Yslow的主页上下载一个最新的版本装上：http://developer.yahoo.com/yslow/

在Firebug小虫子的右边就是Yslow，后面的数值是当前页面完全加载所消耗的时间，点击Yslow即可打开（或者通过Firebug的Yslow面板，运行“Performance”进行页面分析）。

如上图，选择“All JS”后，当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中，这样查看页面上所有的JS源代码就变得方便多了。

6、查看页面上所有的资源列表

其实前面第四点介绍到的“网络”功能就可以查看所有资源列表，而且可以通过查看状态来进行对应的优化（例如排查404元素）。这里可以通过Yslow的components功能看到到包括类型与详细路径的资源列表：

鼠标hover可以看到对应的缩略图，点击则可在新窗口中打开。更多Yslow功能请查看其主页。

7、使用Firecookie调试页面cookie

Firecookie是基于Firebug的cookie调试工具，先到作者的主页上了解下详细信息，再下载一个安装上。
http://www.softwareishard.com/blog/firecookie/
安装好之后，Firebug中会多出一个“cookie”面板，你可以为需要调试的页面添加、删除、修改cookie信息。

Firebug是一款能够为WD提高效率的调试利器，希望大家都能用上。关于Firebug的更多信息：

• 基于Firebug的firefox扩展
• Firebug视频教程
• Firebug Console

蹒跚学步

第一步 - 入门

想必您已经听说过 Ext、浏览了在线演示，并且尝试阅读API文档。不过，面对复杂的API文档，您却不知如何下手？！

第二步 - 起步

通览过API文档，并且找到了所要立刻尝试的功能，面对混杂的网页源代码，如何开始一个简单的测试页面？那么……

不论您的目标是什么，您都可以依照本文快速的开始使用Ext。不，不用搭建服务器，您所需要的仅仅是Firefox浏览器和Firebug调试插件。如果还没有安装，那么现在就是一个好机会。

牛刀小试

• 打开Ext API文档，您已经上路！
• 单击 F12 打开 Firebug 控制台。
• 如果您的 firebug 控制台处于单行模式（以 '>>>' 开头），那么请单击右下角的红色上箭头以开启多行编辑模式。
• 输入以下代码，并敲击 Ctrl-Enter 来运行:

Ext.get(document.body).update('<div id="test"></div>');

上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。刚才那些API文档已经被删除，但 Ext 代码依旧生效，并且随时为您效劳。

现在，我们假设您希望简单的添加一个面板元素（Panel），但对Ext.Panel的API冗繁的说明无能为力。那么试着将这些代码添加到 firebug 的控制台中：

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});

再次敲击 Ctrl-Enter 。嗨！您的面板元素已经诞生。

很好，不过如果修改一些选项呢？用下边的代码替换刚才的那些代码：

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content',
collapsible: true
});

敲击 Ctrl-Enter 。怎么样，一个可以伸缩的面板就配置好了。（注意面板右上角的小图标）

每次敲击 Ctrl-Enter ，第一行代码都会移除现有的内容，这样您就可以有一个干净的调试环境。这是一个简单的小技巧，十分方便您尝试各种配置选项。

您可以为update()函数添加所需要的 HTML 代码，无论多少。然后编写或多或少的 Javascript 来探索 Ext API。

还等什么？现在就去亲自实践 Ext Api 吧。

• Ext Programmer's API Documentation
• Ext User Forums

Retrieved from "http://www.extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_(Chinese)"

安装及使用方法:
1,直接用Firefox打开以下地址:
https://addons.mozilla.org/zh-CN/firefox/search?q=firebug
如果您还没有安装Firefox,请先安装.下载地址:
http://www.mozilla.org.cn

2,点击Firebug旁边的图片.

3,点击安装,然后重新启动Firefox.

4,点击Firefox左下角蟑螂的图标.

5,启用 脚本(用于 JavaScript 调试) 选项即可.
(建议一并启用控制台(用于记录控制台日志))

使用视频:
http://www.digitalmediaminute.com/screencast/firebug-js/

        将插件放在   X:\Genuitec\MyEclipse 8.x Latest\dropins  目录下面，重启myeclipse

二、配置Spket

注意：如果在安装spket过程中，你的eclipse或者Myeclipse是打开的，请重启eclipse或者Myeclipse。以便初始化插件，下面才会在Preferences中看到 Spket选项。

基本步骤如下：

1)Window → Preferences → Spket ；

2)Spket → JavaScript Profiles → New， 输入“ExtJS”点击OK；

3)选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”；

4)选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；

5)设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；

下面这个操作，根据自己需要设置（可以全选）。

6)重启eclipse或者Myeclipse；

7)创建新的JS文件并输入： Ext这样就可设置Ext Code代码自动完成的功能。

效果如下：

    重新启动Myeclipse即了完成插件的安装。尽情享受Ext。。。。

附上各种资源的下载地址

MyEclipse 8.0：

http://downloads.myeclipseide.com/downloads/products/eworkbench/galileo/myeclipse-8.0.0-win32.exe

MyEclipse 8.0 汉化包：

http://ajava.org/tool/myeclipse/16251.html

Aptana2.0 plug for Eclipse:

http://download.csdn.net/source/1855235

插件安装方法：

     将插件放在  x:\Genuitec\MyEclipse 8.x Latest\dropins  目录下面，然后在myeclipse的configuration目录里面删除org.eclipse.update这个目录，重启myeclipse 后myeclipse会自动加载这个插件 。

→选择你的程序入口类名→OK→finish。

   以root身份登录

   (1)打开一个终端

   (2)输入命令ls -l 查看安装文件的权限

   (3)输入命令chmod a+x j2sdk-1_4_2_01-linux-i586-rpm.bin,给所有的用户添加执行的权限。

   (4)安装jdk

      ./j2sdk-1_4_2_01-linux-i586-rpm.bin

      此步完成后，会生成j2sdk-1_4_2_01-linux-i586.rpm的文件

       查看权限

      ls -l

      给j2sdk-1_4_2_01-linux-i586.rpm赋执行权限

      chmod +x j2sdk-1_4_2_01-linux-i586.rpm

      安装j2sdk-1_4_2_01-linux-i586.rpm

      rpm -ivh j2sdk-1_4_2_01-linux-i586-rpm

      出现授权协议，按Enter键接受

   (5)使用默认的安装位置，在/usr/java/下，即/usr/java/j2sdk1.4.2_01

2、设置环境变量

   使用Vi编辑器进行环境变量的编辑：

   在终端中输入命令

   vi /etc/profile.d/java.sh

   这样可以在所有的用户中使用

   在新的java.sh中输入以下内容：

   #set java environment

   export J***A_HOME=/usr/java/j2sdk1.4.2_01

   export CLASSPATH=.:$J***A_HOME/lib:$J***A_HOME/jre/lib

   export PATH=$J***A_HOME/bin:$J***A_HOME/jre/bin:$PATH

   保存退出

   PATH 和 CLASSPATH 都指定路径列表，列表中的各项 (即各个路径) 之间使用分隔符分隔。在 Windows 下，分隔符是分号 (;)，

而在 Linux 下，分隔符是冒号 (:)。

3、给java.sh分配权限

   输入以下命令：

   chmod 755 /etc/profile.d/java.sh

4、重启计算机

   在终端中输入如下命令，测试jdk是否安装成功

  java -version

网上JAVA的环境变量的设置方法很多,个人觉得最有效的方法是:vi /etc/profile.d/java.sh这样可以在所有的用户中使用.在新的

java.sh中输入以下内容：(以下内容同时设置了java和tomcat的环境变量)

#set java 1.5.0_08 and tomcat5.5.12 environment

export JAVA_HOME=/usr/local/jdk1.5.0_08

export CLASSPATH=.:$JAVA_HOME/lib/tools.jar

export CATALANA_HOME=/usr/local/tomcat5.5.12

export PATH=$JAVA_HOME/bin:$CATALANA_HOME:$PATH

修改环境变量后记得重启生效:即在命令行输入 . /etc/profile

null

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/WhatWhoWhere/archive/2007/04/08/1556202.aspx