Download
1 / 41
410 likes | 611 Vues
大灰狼系列：堡森侃火虫儿. bosnma@live.cn 2010-3-8. 获取 Firebug. Firebug 官方网站： http://getfirebug.com/. 什么是火虫（ Firebug ）. 火虫者， FE 最常用调试工具是也。 Firebug 是 Firefox 的插件，有了它，你可以在任何网页中编辑、调试或监视 CSS 、 HTML 、 JavaScript 代码。. 首先让我们启用 Firebug.
E N D
大灰狼系列：堡森侃火虫儿 bosnma@live.cn 2010-3-8
获取Firebug • Firebug官方网站： http://getfirebug.com/
什么是火虫（Firebug） 火虫者，FE最常用调试工具是也。Firebug是Firefox的插件，有了它，你可以在任何网页中编辑、调试或监视CSS、HTML、JavaScript代码。
首先让我们启用Firebug Firebug很听话，只在你需要它的时候才会出现。当你需要它时，点击Firefox右下角灰色的火虫，即可打开界面，默认一些功能是禁用的。
直观的查看HTML、CSS、DOM 只要你打开Firebug就可以立即直观的查看网页的脚本、样式和对象模型。HTML、CSS和DOM三个Tab是默认激活的，通过这三个tab可以方便的查看相应的内容。其它`的功能默认都是关闭的，需要手动开启。
如何启动面板？ 除了刚才说过的三个始终开启的tab，其它的tab都可以通过下图所示的方法开启或禁用。被禁用的tab会呈灰色显示，否则和HTML等其它tab一样呈深色显示。
用快捷键来提高我们的效率 F12 显示/隐藏Firebug（很常用） Ctrl + F12 在Firefox外面独立显示/隐藏Firebug Ctrl + Shift + L 转到命令行 Ctrl + Shift + K 转到搜索框 Ctrl + Shift + C 切换Inspect模式 调试 F5 继续 F10 Step Over F11 Step In Shift + F11 Step Out 还有很多很多，以上只列出常用快捷键， 更多快捷键百度一下，你就知道。
纳尼？！Firebug关不掉了！ 当Firebug的标识是橘黄色时（而不是灰色），Firebug有一个或多个活动的实例，如果你发现无论如何Firebug也关不掉，可以将鼠标停在Firebug上，它会告诉你详细的信息。可能其它的窗口正在使用Firebug，尤其是最小化了的窗口（注意不是关闭）不容易察觉。
眼镜儿摘了吧 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 你能看到我吗？你能看到我吗？ 如果你眯着眼睛才能看清Firebug，别和显示器过不去，我们其实可以把文字放大一些，如左图，点一下虫子，Firebug可以放大或缩小所有的文字到你心里能接受的程度。。。让文字在合适的大小会像多吃玉米等粗粮一样使你变得健康，看到左上角儿做示范的猴子了吗？
简述Firebug提供的HTML相关功能 有了Firebug，查找页面上的HTML元素（尤其是比较深层的）非常之简单！更重要的是，一旦你找到你要的元素，Firebug会提供详尽的相关信息，更更重要的是，你可以即时的修改这些信息！
即时查看源码、高亮捕捉元素变化 Firefox和IE本身有个查看源代码，可惜的是它只显示加载时的源代码，任何动态修改都不会在那里体现，而Firebug的HTML tab提供给你当前的HTML状况。 我们的Web都是Javascript驱动的动态页面，HTML元素每时每刻都可能被动态的创建、修改、删除，可是咱咋知道这玩意儿哪里变了捏？木有关系！Firebug会在元素变化时立即高亮标注，一切变化尽收眼底！
动态编辑、动态导出 Firebug给你一种非常有趣的方式来进行HTML实验，并且可以即时的看到效果。你可以创建、删除或编辑HTML标签、文字，你只要点一下要修改的元素，然后按一下tab或回车，修改立刻生效。如果你觉得还是不够爽，点界面上的Edit按钮就可以编辑整个HTML页面（当然那也会即时生效） 右键点击任何元素，你有多种方式导出所选元素，比如copy整个HTML、copy某个元素的innerHTML、copy一个唯一标识该元素的XPath表达式。
用鼠标找到你 有的时候你的页面看起来不太对，你想知道为什么酱紫，这个时候没有比点击“Inspect”按钮更快的方式来得到答案了！在Firebug的工具栏上点击“Inspect”按钮后，将鼠标移动到不同的元素将会即时的显示鼠标下面的元素的相关信息，点击左键可以固定某一个元素的信息。
如果鼠标找不到怎么办？ 如果要找的元素在页面上不可见怎么办？放心！难不倒Firebug，只要在右上角的搜索框中搜索一下便知。
简述JavaScript调试 Firebug提供强大的JavaScript调试器，可以让你在任何时间、任何位置来查看任何变量的状态。如果你觉得自己的代码不是很健壮，Firebug还提供一个Profiler来帮助你测试性能、找到性能瓶颈。
找到脚本，然后设置断点 很多Web页面都是由许许多多的文件组成的，找到你想调试的那个东东是很头疼的事情。Firebug的脚本文件选择器会帮你排序和组织所有的文件，让你可以很容易的找到任何你想要的东西。 要想看每个变量的状态，首先要让JavaScript停下来，那么就要设置断点，方法很简单，在想设置断点的行号上用鼠标左键点一下就Ok，在已设置断点的地方点一下就可以取消所设断点。
在捕获断点，JavaScript暂停之后 一旦调试器暂停了程序（触发了断点），你可以一步一步的执行，右上角有相关的按钮，也可以通过快捷键F10、F11来进行操作。 有的时候我们可能需要在某些条件成立时才出发断点，Firebug可以让你设置带条件的断点，这时需要输入一个表达式，当且仅当表达式为true时断点才会被触发。要设置断点很简单，鼠标右击断点，然后输入表达式即可。
异常断点、调用栈追踪 其实不仅是你去选择调试器，有的时候调试器选择你。Firebug提供了一种新的方式，它可以让你的程序在发生异常时自动的出发断点，这可以很容易的看到出毛病的地方表达式中哪个混蛋变量导致了这个问题。 在程序被暂停的时候，Firebug会显示一个调用栈，相关嵌套的、运行的、等待返回的function都会一目了然。在工具栏上的调用栈中每一个函数名都是可以点击的，点击它们将跳到被暂停的时间函数调用的位置。现在你可以试着进去看看里面的变量都是否正常啦！
变量、表达式的追踪 调试时如果想看某个变量或表达式的值，直接在watch窗口中输入，马上就能看到结果。如果在接下来的单步调试时表达式或变量发生改变，窗口中的相应值都会做相应变化，想怎么看就怎么看！ 当然还有其它的方法，鼠标移到某个变量，就可以马上看到它的值和状态。当你边读代码边思考问题出处时，这无非是很棒的一个方法。
转到某一行 有的时候脚本文件太长啦，怎样定位到特定的行呢？不要急，只需要在搜索框中输入#加上行号，比如想跳到108行，只需要输入#108按回车即可。
使用Profiler来优化代码 点Control面板，然后点Profile，原来优化代码就这么简单，所有方法调用情况一目了然。看看到底哪个函数影响了程序的性能？
强大的JavaScript命令行 Firebug提供了一个灰常灰常强大的JavaScript命令行工具，它可以帮你做很多事情。相对于先前内容，本部分属于进阶课程。
把手弄脏（Get your hands dirty） 使用命令行工具，我们可以运行任意JavaScript命令，就好像这些命令被写在页面中一样，执行命令的返回值也会在控制台中显示。 使用tab键将激活自动完成功能，一直按tab它会循环的遍历那些对应的变量、方法的名称，这会大大提高你的效率，尤其当你并没有记熟变量名时。
玩转界面 如果默认的一行命令行让你觉得有点憋屈，淡定！Firebug的命令行是可以扩展成更大的文本编辑器的。 如果你在其它编辑器中写了几行JavaScript，然后想真正的运行一下，只要把它们粘进命令行，Firebug在发现被粘贴的内容为多行时自动将单行命令行模式转换为多行文本编辑器模式。
左键点击，右键点击，中键点击 左键：和传统的命令行不一样，每一次命令输出往往不是静态的文本，而是一些超链接。如果输出到控制台中的内容是对象，这些对象都是超链接并且点击后可以查看相关的详细内容。 上下文菜单是一个有趣的东东，不同的对象在点击右键时根据对象的不同会显示不同的菜单，提供不同的功能。所以当你看到控制台中对象的超链接时，不妨右键点击一下试试看会发生什么好东东。 如果你还不知道鼠标中键在命令行中能做些什么，那你可以得好好听听了。当你中键点击一个文件或URL的链接时，Firebug控制台将会在一个新的tab中打开这个链接。当然，按住Ctrl键并直接点击效率相同。
抓住，然后控制 当你用Inspect工具抓到一个HTML元素后，你一般会用命令行来对它进行一些操作，Firebug让这件事变的更简单，“$1”这个变量会引用最近一次你抓到的变量，“$2”引用“$1”的上一次抓取的元素。 正常情况下，我们在命令行中输入一些命令或代码后按回车运行，如果你只想仔细的观察某个变量或对象，按住Shift + 回车就可以在DOM、HTML或CSS tab中查看相关对象的详细信息。
Firebug日志 迷恋JavaScript调试器并不是坏事，可是有的时候找Bug的最快方式是往控制台输出尽可能多的信息。Firebug提供了一系列灰常灰常灰常强大的日志函数来帮你记录日志。
介绍一个新朋友，console.log 向Firebug控制台输出信息的最简单的方式是使用像这样的语句： console.log(“hello world”); 你可以传入许多参数，这些参数会自动拼接成一行。我们可以将任何对象的引用作为参数传入console.log，它会以超链接的形式打到控制台上。 console.log可以像printf方法那样格式化字符串，比如，你可以这样使用console.log: console.log("%s is %d years old.", "Bob", 42);
日志着色 & 性能观测 作为console.log的补充，Firebug提供了其它方法来让你更形象生动的输出日志信息，这些方法有：console.debug, console.info, console.warn, and console.error. Firebug提供了两种简单的方式来观测JavaScript性能。低精度的方法是调用console.time(“timing foo”)，然后运行要观测的代码，最后调用console.timeEnd(“timing foo”)来结束。Firebug会将两个方法之间的代码运行的时间记录在控制台中。另一种高精度的方法是用JavaScript Profiler，只要调用console.profile()，之后运行代码，最后带哦用console.profileEnd()，Firebug会给出更详细的运行报告，包括期间内所有方法的运行时间。
栈追踪 & 分组 只要调用console.trace(); Firebug就会把调用时详细的栈追踪信息写入控制台，不仅告诉你调用了哪些函数，还会记录每一个参数的值，还可以点击那些参数的超链接来进入详情。 有的时候日志信息的可读性会很差，所以Firebug提哦给你个了一个将日志分组的解决方案，只需要调用console.group(“a title”)即可将下面的追踪分组，然后调用console.groupEnd();来结束。注意分组是可以嵌套的，因此你可以在一个分组内再一次分组，这样一直分下去。
查看对象 & 断言 使用console.dir(object)可以将一个对象的所有属性或者所有的HTML元素以表格的方式罗列出来，这在查看比较长的对象时尤为方便，我们还可以调用console.dirxml(element)来以XML的格式查看对象的内容。 断言是一个很棒的方式来确认你的代码是否健壮。Firebug提供了一系列断言方法，如console.assert(expression);
PART 6：NET PANEL的使用 马圣博 mashengbo@baidu.com 2010-3-8
差不多就这些了 首先灰常灰常感谢您的捧场！我讲清楚了吗？如果没有搞清没有关系，随时可以通过以下方式抓到我： HI: bosnma mail: bosnma@live.cn
参考文献 • Firebug官方网站： http://getfirebug.com/ • 友情演出：大灰狼堡森、洋葱头、Yoci猴儿、闷骚兔儿、绿帽儿人，以及其他群众演员。
