firebug入门与控制台详解.pptVIP

创意无限 学无止境　　　　　　 制作：周 琼 Firebug入门与控制台详解 Firebug入门与控制台详解 1 fireBug入门 对于网页开发人员来说，Firebug是Firefox浏览器中最好的插件之一 2 fireBug控制台详解 ? firebug入门指南 安装firebug 1 打开和关闭Firebug 2 Firebug窗口概况 3 随时编辑页面 4 用firebug处理css 5 盒装模型 6 评估下载速度 7 DOM 8 Javascript调试 9 AJAX 10 安装Firebug 安装Firebug 安装Firebug，到Firebug下载页面。点击该页面下载按钮,下载之后安装即可. 你也可以在FireFox 工具-附加组件中搜索然后添加。安装后重启FireFox，就可以使用了。 1 打开和关闭Firebug 在Firebug网站上，可以找到它的快捷键设置。我最常使用以下三种方法： 2 打开和关闭 Firebug 在单独窗口中打开Firebug： 使用 打开Firebug:按F12.再次按F12关闭FireBug. 在页面中任意地方点击右键，查看元素. 窗口概览 3 窗口概览 CSS 控制台 HTML 脚本 DOM 网络 随时编辑页面 4 HTML 在HTML标签中，点击窗口上方的“编辑”按钮，然后再选择页面中的 文本节点，你可以对其进行修改，修改结果会马上反应在页面中。 Firebug同时是源码浏览器和编辑器。所有HTML、CSS和Javascript文件中 的对象，都可以用单击或双击进行编辑。当你输入完毕， 浏览器中的页面立 刻会发生相应变化，你可以得到瞬时反馈。DOM浏览器允许你对文档结构进行 彻底的编辑，不局限于文本节点。在HTML标签中，点击窗口上 部“编辑” 按钮,下方的窗口就会立刻变成 一个黑白的文本编辑窗口，你可以对HTML源代码进行 任意编辑。在CSS标签 中，Firebug会自动补全你的 输入。在DOM标签中，当你按Tab键时，Firebug会自 动补全属性名。 用firebug处理CSS 5 CSS 在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。 你可以双击对这些设置进行编辑。 对于那些Firefox不支持的CSS规则，Firebug会自动隐藏。比如，Firebug会隐藏针对某些浏览器的CSS特定设置，以及一些它不支持的CSS3规则。所以，它会隐藏_height:25px; p:first-of-type {color: #ff0000;}等等样式规则。但是，这也意味着，如果你恰巧发生了打字错误，导致某些规则无法 显示，那么你只有使用其他编辑器显示全部CSS内 容，找到你的错误。 用firebug处理CSS 5 CSS Firebug允许你编辑CSS的属性和属性值。你只要对它们点击，就能编辑。 修改后的效果会立刻在浏览器窗口中显示出来。这个特性最好的运用，是在 确定准确定位的padding和margin时，firebug允许你用方向键逐单位的增加。 Firebug允许你增加新的属性和属性值。增加方法是双击现有的selector， 然后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属 性值。 Firebug允许你关闭CSS中的某些语句，页面会立刻反映相应变化，你可以 立刻查看效果。“关闭”一条语句的方法是，在该语句的左边点击，会出现 一个红色的 禁止标志。该语句就会变灰。再次点击，该语句就会恢复。 盒模型 6 盒模型 当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。在CSS窗口上方，有一个布局按钮，点击 后会展示与该元素相关的方块模型，包括padding、margin和border的值。 评估下载速度 7 评估下载速度 网络标签中图形化了页面中所有http请求所用的时间。使用这个功能，必须启用该功能，默认设置就是关闭，但是你可以在下拉菜单中启用这个选项。你可以用这项功能评估Javascript文件下载，占用整个页面显示的时间。 在每个HTTP请求的左面点击，会显示该次请求的头信息。 在1.0.5版以后，你可以单独查看HTML文件、CSS文件、 像文件等各自下载的时间。 DOM 8 DOM DOM标签提供页面上所有物体的所有属性的信息。Firebug最酷的功能之一是，它可以动态修改页面， 反映在浏览器窗口，但是如果使用浏览器自带的查 看源码功能，你会发现源码并没有改变。