Javascript的调试利器：Firebug使用详解4（转）
<!--[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
然后在页面中加入：
|
<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
>