<!--[if !supportLists]-->12、              <!--[endif]-->IE中使用Firebug
FirebugFirefox的一个扩展,但是我习惯在IE中调试我的页面怎么办?如果在页面脚本中加入console.log()将调试信息写到Friebug,在IE中肯定是提示错误的,怎么办?不用担心,Frirebug提供了Frirbug Lite脚本,可以插入页面中模仿Firebug控制台。
我们可以从一下地址下载firebug lite
 
然后在页面中加入:
 
<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>