1、,制作：周 琼,Firebug入门与控制台详解,Firebug入门与控制台详解,,对于网页开发人员来说，Firebug是Firefox浏览器中最好的插件之一,, firebug入门指南,,安装Firebug,安装Firebug,1,,打开和关闭Firebug,在Firebug网站上，可以找到它的快捷键设置。我最常使用以下三种方法：,打开和关闭 Firebug,在单独窗口中打开Firebug：使用,打开Firebug:按F12.再次按F12关闭FireBug.,在页面中任意地方点击右键，查看元素.,,窗口概览,窗口概览,CSS,控制台,HTML,脚本,DOM,网络,,随时编辑页面,HTML,在H
2、TML标签中，点击窗口上方的“编辑”按钮，然后再选择页面中的 文本节点，你可以对其进行修改，修改结果会马上反应在页面中。,Firebug同时是源码浏览器和编辑器。所有HTML、CSS和Javascript文件中 的对象，都可以用单击或双击进行编辑。当你输入完毕， 浏览器中的页面立 刻会发生相应变化，你可以得到瞬时反馈。DOM浏览器允许你对文档结构进行 彻底的编辑，不局限于文本节点。在HTML标签中，点击窗口上 部“编辑” 按钮,下方的窗口就会立刻变成 一个黑白的文本编辑窗口，你可以对HTML源代码进行 任意编辑。在CSS标签 中，Firebug会自动补全你的 输入。在DOM标签中，当你按Tab
3、键时，Firebug会自 动补全属性名。,,用firebug处理CSS,CSS,在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。 你可以双击对这些设置进行编辑。,对于那些Firefox不支持的CSS规则，Firebug会自动隐藏。比如，Firebug会隐藏针对某些浏览器的CSS特定设置，以及一些它不支持的CSS3规则。所以，它会隐藏_height:25px; p:first-of-type color: #ff0000;等等样式规则。但是，这也意味着，如果你恰巧发生了打字错误，导致某些规则无法 显示，那么你只有使用其他编辑器显示全部CSS内 容，找到你的错误。,,
4、用firebug处理CSS,CSS,Firebug允许你编辑CSS的属性和属性值。你只要对它们点击，就能编辑。 修改后的效果会立刻在浏览器窗口中显示出来。这个特性最好的运用，是在 确定准确定位的padding和margin时，firebug允许你用方向键逐单位的增加。,Firebug允许你增加新的属性和属性值。增加方法是双击现有的selector， 然后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属 性值。,Firebug允许你关闭CSS中的某些语句，页面会立刻反映相应变化，你可以 立刻查看效果。“关闭”一条语句的方法是，在该语句的左边点击，会出现 一个红色的 禁止标志。该语句
5、就会变灰。再次点击，该语句就会恢复。,,盒模型,盒模型,当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。在CSS窗口上方，有一个布局按钮，点击 后会展示与该元素相关的方块模型，包括padding、margin和border的值。,,评估下载速度,评估下载速度,网络标签中图形化了页面中所有http请求所用的时间。使用这个功能，必须启用该功能，默认设置就是关闭，但是你可以在下拉菜单中启用这个选项。你可以用这项功能评估Javascript文件下载，占用整个页面显示的时间。,在每个HTTP请求的左面点击，会显示该次请求的头信息。在1.0.5版以后，你可以单独
6、查看HTML文件、CSS文件、 像文件等各自下载的时间。,,DOM,DOM,DOM标签提供页面上所有物体的所有属性的信息。Firebug最酷的功能之一是，它可以动态修改页面， 反映在浏览器窗口，但是如果使用浏览器自带的查 看源码功能，你会发现源码并没有改变。,,Javascript调试,Javascript调试,JavaScript profiler可以报告你的Javascript函数执行所花的时间，因此你可以查看不同函数对速度的影响。使用这个功能的方法是，打开控制台，然后点击上面的保持按钮.Firebug列出调用的所有函数，及其所花的时间。你可以针对要测试的某个函数，在其前部加上 conso
7、le.profile(title)，在其后部 加上console.profileEnd()。,,Javascript调试,Javascript调试,console标签的底部是命令行输入，它以“”开头。如果命令行输入有结果输出，那么它会展示在上部的窗口。Firebug内置console对象有几种有用的方法可供调用，包括console.log(),console.debug()、console.info()、 console.warning()、console.error()等。如果这些方法产生了输出结果，Firebug会提供一个链接，让你查看相应的代码。,调试的另一个方法是设置断点。Script
8、标签允许你在任意行暂停执行。单击行号，就会设置一个断点。右击行号，就可以设置一个断点出现的条件，只有当条件为真时，程序才会暂停执行。右面的监控窗口，可以查看当前变量的值。,,AJAX,AJAX,Script前面已经提到，Firebug可以捕捉页面的动态内容和其他DOM变化。,Net标签中的XHR功能，对查看AJAX操作 特别有用。如果你点击每个服务器端回 前的加号，你就会看到服务器端回应的 头信息和内容。,,AJAX,AJAX,当通过XMLHttpRequest对象向服务器端发出一个请求时，Firebug会记录请求的POST或GET内容，以及回应的头信息和内容。使 用网络标签中的XHR功能，就
9、可以看到这些内容。它会列出所有服务器的回应，以及所花费的时间。点击前面的+号，如果是GET请求，会显示三个标签；如 果是POST请求，会显示4个标签：,Params: 显示请求URL中所包含的name/value对。Headers: 显示请求和回应的头信息。Response: 显示实际从服务器收到的信息。Post：显示从通过POST请求，送到服务器的信息。（此项GET请求不包括。）这四个标签对编写和调试程序很有用。检查POST和Params标签，确定你的请求被正确地发出了。检查Response标签查看返回的格式，确定相应的Javascript处理函数应该如何编写。,,11,Firebug,你会
10、使用Firebug了吗？,,2 Firebug控制台详解,控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息 。,, 一 、 显 示信息的方法,Firebug内置一个console对象，提供5种方法，用来显示信息。 最简单的方法是console.log()，可以用来取代 alert()或document.write()。比如，在网页脚 本中使用console.log(“Hello World”)，加载 时控制台就会自动显示如下内容。,另外，根据信息的不同性质，console对象还有4种显示信息的方法，分别是一般信息console.i
11、nfo()、调试信息console.debug()、警告提示console.warn()、错误提示console.error()。,可以看到，不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接， 点击后跳转到网页源码的相应行。,,占位符,访谈结果与析,Firebug控制台支持象PHP的printf函数这样的占位符输出。目前只支持字符串(%s),整数(%d),浮点数（%f)和对象(%o)四种,,分组显示,访谈结果与析,如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。console.group(“第一组信息“);console
12、.log(“第一组第一条“);console.log(“第一组第二条“);console.groupEnd();console.group(“第二组信息“);console.log(“第二组第一条“);console.log(“第二组第二条“);console.groupEnd();,,Console.dir(),访谈结果与析,console.dir()可以显示一个对象所有的属性和方法。比如，现在为一个的dog对象，添加一个bark()方法。dog.bark = function()alert(“汪汪汪“); 然后，显示该对象的内容，console.dir(dog); :,,其他方法,访谈结果与析,由于时间关系，其他方法就都写在这里了。1，console.dirxml();显示节点的html/xml代码。2，console.assert();判断一个表达式或者变量是否为否，在控制台输出一条信息，并且抛出一个异常。3，console.trace();追踪函数的调用轨迹。4，console.time()和console.timeEnd()显示代码运行时间。5，console.profile()性能分析。分析程序各个部分运行时间。找出瓶颈所在。,,,
