初识Firebug 全文 — firebug的使用（2）
作者：zt 发布时间：2007-10-23 12:54:00
Console HTML CSS Script Dom Net
控制台 Html查看器 Css查看器 脚本条时期 Dom查看器 网络状况监视
Console 控制台
控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。
象C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。
控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：
PLAIN TEXTCODE:
console.log("hello world")
如果你有一堆参数需要组合在一起输出，可以写成这样：
PLAIN TEXTCODE:
console.log(2,4,6,8,"foo",bar).
Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。
图2： 在控制台里调试javascript
查看和修改HTML
第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。
首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次，如图3所示，它清楚地列出了一个hml元素的parent、child以及root元素，配合Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。
有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。
利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。
图3:：HTML查看器
0
投稿猜你喜欢
前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。Blueprint的实现Blueprint是一个- http://swik.net/Ajax/Ajax+Mistakes在某网站瞎逛时，发现这个链接，进去逛了逛，觉得很有意思，大家也可以去看看
- javascript上下滑动广告效果 参数说明:客服果果(
- 一、功能简述正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我
- 我见到有的网站好像可以把数据库的记录读到表格里去，是这样的吗？如何做到的？可能是这样的，因为我们确实能把数据库里的记录用表格来储存，看看下面
- 1、授权机制的主要作用是什么?授权机制的基本作用是给某个主机上的用户对某个数据库以select，insert，update和detete的权
- 解决方法：1。 改表法。可能是你的帐号不允许从远程登陆，只能在localhost。这个时候只要在localhost的那台电脑，登入mysql
- 一、背景分析对想要在视觉化环境下制作复杂网页的专业网页制作者来说，Dreamweaver已经渐渐在网页编辑工具中展露头角，成为专业人士编写网
- 我们可用ADO STREAM来做一个无组件的上传程序。Stream对象包含了许多操作二进制和文本文件的方法，我们现在用Stream对象来操作
- dictionary对象和数组有点相似，但无需用redim来改变dictionary的大小，dictionary也没有多维，dictiona
- 一、软件准备：以下均为截止2005-4-20的最新正式版本PHP（5.1.2）：http://www.php.netMySQL（5.0.19
- 看下面的一组例子：alert(true.toString());alert(false.toString());alert(1.123.to
- 我们生活在信息繁杂的社会，尤其是在互联网时代，人们开始通过网络开始接触越来越多的信息，那么，如何获取/传递有效而准确的信息将非常重要。在网页
- 一 MySQL WorkbenchMySQL Workbench提供DBAs和developers一个集成工具环境：1)数据库设计和建模2)
- 使用MySQL，安全问题不能不注意。以下是MySQL提示的23个注意事项：1.如果客户端和服务器端的连接需要跨越并通过不可信任的网络，那么就
- ALTER DATABASE DATAFILEd:\ORANT\DATABASE\USER1ORCL.ORA RESIZE 10
- ASP由于是一种古老的语言，它的一些功能对UTF-8支持非常差。比如，你想生成一个UTF-8格式的文件，使用常用的 scrīpting.Fi
- 在大型商业应用中，数据的异地容灾备份十分重要，也必不可少。笔者根据自己的实践经验，设计了一套简洁地实现异地数据自动备份的方法，可供数据库管理
- jscript 5.7 发布修复了不少ie javascript内存泄露的问题。但是leak依然存在。当我们频繁使用 setInterval
- 通过XML使系统之间的数据交换变得更简单，因为它与编程语言无关，刚引入XML的概念时，是通过一个脚本或应用程序解析XML数据，将其转换为适合
