<!--[if !supportLists]--> 12、              <!--[endif]--> 在 IE 中使用 Firebug
Firebug 是 Firefox 的一个扩展，但是我习惯在 IE 中调试我的页面怎么办？如果在页面脚本中加入 console.log() 将调试信息写到 Friebug ，在 IE 中肯定是提示错误的，怎么办？不用担心， Frirebug 提供了 Frirbug Lite 脚本，可以插入页面中模仿 Firebug 控制台。
我们可以从一下地址下载 firebug lite ：
http://www.getfirebug.com/releases/firebuglite1.0-b1.zip
<?xml:namespace prefix = o />

 

然后在页面中加入：

 

<script language="javascript" type="text/javascript" src="/ 路径 /firebug.js"></script>
  
    如果你不想在 IE 中模仿 Friebug 控制台，只是不希望 console.log() 脚本出现错误信息，那么在页面中加入一下语句：

 

<script language="javascript" type="text/javascript" src="/ 路径 /firebugx.js"></script>

  
如果你不想安装 Firebug Lite ，只是想避免脚本错误，那么可以在脚本中加入以下语句：

 

if (!window.console || !console.firebug)
{
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

 

    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {}
}
  
我们将 firebug.js 加入到测试页面中，然后打开 IE ，加载页面。页面加载完成后，我们按下 F12 键就可以打开控制台了。每次页面刷新后，你都要按 F12 键打开控制台，是不是很烦？如果不想那么，就在 html 标签中加入“ debug=’true’ ”，例如：

 

<html debug= "true" >

  
   在 Friebug Lite 中也有命令行，但是功能没那么强。

 

<!--[if !supportLists]--> 13、  <!--[endif]--> 快捷键和鼠标操作
全局操作

打开 Firebug 窗口

F12

关闭 Firebug 窗口

F12

在新窗口打开 Firebug

Ctrl+F12

往前切换标签

Ctrl+`

将光标移到命令行

Ctrl+Shift+L

将光标移到搜索框

Ctrl+Shift+K

进入 Inspect 模式

Ctrl+Shift+C

进行 JavaScript 性能测试

Ctrl+Shift+P

重新执行最后一条命令行命令

Ctrl+Shift+E

HTML 标签

编辑属性

单击属性名或值

编辑文本节点

单击文本

编辑 Element

双击 Element 标记

移到路径里的下一个节点

Ctrl+.

移到路径里的上一个节点

Ctrl+,

HTML 编辑

完成编辑

Return

取消编辑

Esc

移到下一个区域

Tab

移到上一个区域

Shift+Tab

HTML Inspect 模式

取消 Inspect

Esc

Inspect 父节点

Ctrl+Up

Inspect 子节点

Ctrl+Down

Script 标签

继续运行

F5

　

Ctrl+/

单步执行（ Step Over ）

F10

　

Ctrl+'

单步执行（ Step Into ）

F11

　

Ctrl+;

退出函数（ Step Out ）

Shift+F11

　

Ctrl+Shift+;

设置断点

单击行号

禁止断点

在行号上 Shift+Click

编辑断点条件

在行号上 Right-Click

运行到当前行

在行号上 Middle-Click

　

在行号上 Ctrl+Click

移到堆栈中的下一个函数

Ctrl+.

移到堆栈中的上一个函数

Ctrl+,

将焦点切换到 Scripts 菜单

Ctrl+Space

将焦点切换到 Watch 编辑

Ctrl+Shift+N

DOM 标签

编辑属性

双击在空白

移到路径中下一个对象

Ctrl+.

移到路径中上一个对象

Ctrl+,

DOM 和 Watch 编辑

结束编辑

Return

取消编辑

Esc

自动完成下一个属性

Tab

自动完成上一个属性

Shift+Tab

CSS 标签

编辑属性

单击属性

插入新属性

双击空白处

移动焦点到 Style Sheets 菜单

Ctrl+Space

CSS 编辑

完成编辑

Return

取消编辑

Esc

移到下一个区域

Tab

移到上一个区域

Shift+Tab

按步长 1 增加数值

Up

按步长 1 减少数值

Down

按步长 10 增加数值

Page Up

按步长 10 减少数值

Page Down

自动完成下一个关键字

Up

自动完成上一个关键字

Down

Layout 标签

编辑值

单击值

Layout 编辑

完成编辑

Return

取消编辑

Esc

移到下一个区域

Tab

移到上一个区域

Shift+Tab

按步长 1 增加数值

Up

按步长 1 减少数值

Down

按步长 10 增加数值

Page Up

按步长 10 减少数值

Page Down

自动完成下一个关键字

Up

自动完成上一个关键字

Down

命令行 ( 小 )

自动完成上一个属性

Tab

自动完成下一个属性

Shift+Tab

执行

Return

Inspect 结果

Shift+Return

打开结果鼠标右键菜单

Ctrl+Return

命令行 ( 大 )

执行

Ctrl+Return

 

 

<!--[if !supportLists]--> 13、              <!--[endif]--> 总结
真是意想不到， Firebug 居然有那么多好功能居然是我不知道。通过写本篇文章，才认真的了解和学习了一次 Firebug ，越学越感觉到它的威力。不过我学的也只是皮毛，还有更多的功能和技巧需要在平时的使用中慢慢积累，因此这篇文章只是一个简单的介绍，还有很多东西是没有涉及到的，而且因为我本身水平与能力有限，所以文中会有很多错误与遗漏，希望大家能多多谅解与指正！多谢！
 
例子最终源代码：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html  debug ='true' >
< head >
   < title > 简单的例子 </ title >
     < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8" >
     < style > ...
        #div1{...}{background:red;width:100px;height:100px;}
        #div2{...}{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;}
        #div3{...}{background:yellow;width:50px;height:50px;margin-left:25px;}
     </ style >
< script  language ="javascript"  type ="text/javascript"  src ="firebug/firebug.js" ></ script >
</ head >
< body  scroll ="no" >
   < div  id ="div1" > 方块一 </ div >
   < div  id ="div2"  onclick ='test()' > 方块二 </ div >
   < script > ...
      document.getElementById('div1').innerHTML+='<div id="div3">方块三</div>';
/**//*      console.log('Hello');
      console.log(2,4,window,test,document);
      console.group('开始分组：');
      console.debug('This is console.debug!');
      console.info('This is console.info!');
      console.warn('This is console.warn!');
      console.error('This is console.error!');
      console.groupEnd();*/
//      console.dir(document.getElementById('div1'));
//      console.dirxml(document.getElementById('div1'));
      
      function test()...{
          console.time('test');
          for(var i=0;i<1000;i++)...{
              document.getElementById('div2').innerHTML=i;
              //console.log('当前的参数是：%d',i);
          }
          console.timeEnd('test');
          console.trace();
      }
      
   </ script >   
 </ body >
</ html >