Firebug使用指南.ppt

Visualize CSS metrics 箱状模式阴影显示 测量每一个边距 尺度和向导 移动 Monitor network activity 查看每个文件的时间线 检查HTTP头 监视XMLHttpRequest JavaScript Debugging 查看变量 查找Scripts 断点调试 单步执行 错误中断 调试JavaScript Debug and profile JavaScript 设置断点 在任意行暂停 直接跳转到指定行 DOM Exploration 根据需要选择查看所需的内容 导航到JavaScript代码 JavaScript Logging 使用如 Console.log(“hello world”) 输入到Firebug 的 控制台 Resource Firebug官方网站： Firebug入门： /blog/2007/06/introduction-to-firebug/#fb_ajax Firebug高级议题： /video/play?vid=cccd4aa02a3993ab06e56af731346f78.1755924 Firebug 可以非常容易的在页面中找到HTML elements。一旦当你找到你寻找的元素，Firebug会提供给你相当详细的信息，供你进行编辑。 * 当你页面中大量的CSS 如果组织错误的话，你很难知道是错在哪里。这时，让Firebug来帮助你测量所有的偏差，页边空白、大小等等。 * 是不是你的许多Web页面要经过长时间的加载？你是不是疯了，写了那么多的JavaScript？你是不是忘记压缩图片？Firebug会把你的文件一个一个下载进行监控。 * Firebug 包含了一个强大的JavaScript 调试工具，它可以让你在任何时间暂停去查看变量。 * Firebug 可以帮助你快速的找到DOM对象，然后进行编辑。 * 虽然JavaScript具有强大的调试功能，但是有时调试执行跳过的速度太快，Firebug提供了强大的日志记录功能，方便你查看页面调试记录。 * Company Logo Company Logo Company Logo Company Logo Firebug使用指南 Conclusion Using Firebug Opening and Closing Firebug Installing Firebug Introduction to Firebug Introduction Web Development Evolved Created By: Joe Hewitt Firebug是免费的并开放源代码的。 Firebug 与Firefox结合在一起，你可以在浏览网页的时候，利用Firebug编辑、调试、查看CSS、HTML、JavaScript .  Installing Firebug Firebug 是在Firefox中使用的。所以你必须首先要有Firefox浏览器。 打开Firefox，“工具” – “Add-ons” “Get Add-ons” 输入 “Firebug” , Enter Add to Firefox 安装后需重启 Firefox Opening and Closing Firebug 启动Firefox, “Tools” – “Firebug ”，你也可以使用 F12 功能键，快捷地打开和关闭Firebug 对于我们要浏览的网页，我们想使用Firebug 进行调试、查看的时候，可以有两种方式： 你可以使用右上角的 按钮来改变显示的方式。 1) 在页面下方显示： 2)打开新的窗口显示 Console HTML CSS Script DOM and Net Firebug Window Overview Inspect and edit HTML 动态查看代码 高亮显示变化 即时的HTML编辑 使用鼠标定位到元素 查找 查看、编辑、重新加载 复制代码 Tweak CSS to perfection 查看级联 预览颜色和图像 手调CSS 学习CSS的好帮手 启用/禁用CSS样式属性 微调 Company Logo Company Logo Company Logo Company Logo Firebug 可以非常容易的在页面中找到HTML elements。一旦当你找到你寻找的元素，Firebug会提供给你相当详细的信息，供你进行编辑。 * 当你页面中大量的CSS 如果组织错误的话，你很难知道是错在哪里。这时，让Firebug来帮助你测量所有的偏差，页边空白、大小等等。 * 是不是你的许多Web页面要经过长时间的加载？你是不是疯了，写了那么多的Java