1、HTML 实时编辑:
选择你要更改Element ,然后单击功能区第一行的“Edit ”按钮或者直接将鼠标移动到要修改的Element 上,单击鼠标右键,选择“Edit HTML.. ”,这时候,源代码区域将切换到编辑状态,你可以随意的修改你选择的源代码了。改完再按一下”Edit” 就可以返回查看状态了。
2、CSS 实时编辑
2.1 选中页面上某元素的时候,在HTML 的窗口的右边那个就是该元素的CSS ,连属于哪个文件的也有标出来。可以对这些CSS 进行实时的编辑!而在Layout 那里也可以调整该Element 的margin 、border 、padding 和相对位置
2.2 Firebug 允许你关闭CSS 中的某些语句,页面会立刻反映相应变化,你可以立刻查看效果。“ 关闭” 一条语句的方法是,在该语句的左边点击,会出现一个红色的turnoffselector.gif 禁止标志。该语句就会变灰。再次点击,该语句就会恢复。
3、JavaScript 调试
设置断点之后,重新刷新下页面,在脚本的那个框的右上角就有几个可以调试的按钮,单步执行,单步跳过之类的。。在右边的小窗口可以查看变量的值
4、DOM 对象查看
如果对象太多可以使用右上角的搜索框
5、网络详细请求和回应
可以看到某个请求的参数等等详细的信息
6 、强大的firebug 命令行API
6.1 可以测试下JS 代码执行的时间
在代码开头加入:console.time(“test”);
代码末尾加入:console.timeEnd(“test”);
代码运行后就可以在控制台那里看到输出:test=xxxms
6.2 如 果想知道某个函数是从哪里被调用的,可以在函数的末尾加入:
Console.trace();
6.3 列 出某个对象的所有属性
console.dir(object)
7、另外,在IE 下也有精简版的firebug
8、详细可以参考: http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx
分享到:
相关推荐
随着现代浏览器(包括Safari)的更新,很多Firebug Lite的功能已经被原生开发者工具所集成,但对旧版本浏览器的支持或特定需求时,Firebug Lite仍是一个值得依赖的选择。 在使用过程中,开发者需要注意的是,由于...
Firebug Lite是一款强大的JavaScript调试工具,它为不支持原生Firebug扩展的浏览器,如Internet Explorer,提供了类似于Firefox上的Firebug的功能。Firebug是Web开发者不可或缺的工具,它允许用户实时查看、编辑和...
然而,需要注意的是,随着Firefox浏览器内置的开发者工具日益成熟,Firebug项目在2016年宣布停止更新,其功能已被集成到Firefox的内置工具中。尽管如此,了解Firebug的历史对于理解Web开发工具的演进历程仍然非常有...
Disable Firebug 关闭/开启 Firebug 对所有网页的编辑、调试和检测功能,Disable Firebug for xxxxx 关闭/开启 Firebug 对 xxxxx 网站的编辑、调试和检测功能,Allowed Sites 设置允许编辑、调试和检测的网站等。...
Firebug,作为Firefox火狐浏览器的原生插件,曾是开发者们最得力的助手之一,特别是在Firebug 2.0.19这个版本中,它为开发者提供了强大的调试、分析和优化网页前端功能。本文将深入探讨Firebug 2.0.19在Firefox 45.5...
总结来说,Firebug从1.7.3到1.12.7的每个版本都体现了Web开发工具的演进历程,提供了丰富的功能来帮助开发者调试和优化网页。尽管现在它已被内置的Firefox DevTools所替代,但了解并掌握Firebug的历史和使用方法,...
总结来说,Firebug作为一款强大的Firefox插件,它提供了全方位的Web开发和调试功能,包括HTML、CSS和JavaScript的调试,以及网络请求的监控,极大地提升了开发者的工作效率。其开源性质更是促进了Web开发工具的进步...
Firebug原本是Firefox浏览器的一个扩展,但这里提到的是在IE环境下的一种类似功能,可能是通过其他插件或工具实现的,因为原版的Firebug并不直接支持IE。 在Web开发中,Firebug是非常重要的工具,它提供了HTML、CSS...
总结来说,Firebug作为一款里程碑式的Web开发工具,它的设计理念和功能对后续的开发工具产生了深远影响。即便在今天,理解并掌握Firebug的使用技巧,对于理解Web开发的底层原理和提升开发能力仍然有着积极的意义。
在Firefox 54版本之后,原生的开发者工具已经包含了FireBug的大部分功能,而FireBug作为一个独立插件不再更新。 **4. 其他相关工具** 虽然FireBug不再更新,但其设计理念和功能已被现代浏览器的开发者工具所继承。...
下面我们将详细介绍Firebug的功能以及如何进行安装。 **一、Firebug的主要功能** 1. **HTML查看与编辑**:Firebug可以让你直接查看网页的HTML结构,并允许你在浏览器中实时编辑,查看更改的效果。 2. **CSS调试**...
总结来说,"Firebug离线xpi安装包"是一个供开发者在离线环境中安装和使用Firebug的文件,它包含了调试HTML、CSS、JavaScript、网络请求等多种功能,对于提升前端开发效率和解决问题有着重要作用。即使在当前有更先进...
尽管如此,随着Firefox的更新迭代,开发者逐渐转向了内置的开发者工具,这些工具集成了FireBug的大部分功能,并且在功能和性能上进行了进一步提升。 对于初学者来说,理解并熟练使用FireBug将大大提升他们的...
虽然Firebug已经停止更新,但其很多功能已经被Firefox的内置开发者工具所继承和增强,如网络面板、元素审查等,这些工具依然对现代Web开发至关重要。 综上所述,HTTPWatch和Firebug是Web开发者不可或缺的工具,它们...
3. **JavaScript调试**:Firebug提供了JavaScript源代码查看和断点调试功能,可以跟踪变量值、调用堆栈和执行流程。 4. **网络面板**:监控HTTP和HTTPS请求,查看加载时间、大小等信息,帮助优化网页性能。 5. **...
3. JavaScript调试:JavaScript是Web开发的关键部分,Firebug提供了断点、步进执行、变量查看等调试功能。在Firebug 35中,它可能增强了对ES6新语法的支持,以及对于异步代码调试的改进,使得在Firefox 35上的...
Firebug 1.7是一款经典的Web开发和调试工具,它为Firefox浏览器提供了强大的功能,让开发者能够深入地洞察网页的结构、样式、脚本以及网络请求。在这个版本中,Firebug进一步提升了其性能和易用性,成为了当时Web...
1. **学会使用快捷键**:掌握常用的Firebug快捷键能提高工作效率。 2. **适时禁用插件**:当遇到性能问题或未知错误时,可以禁用其他插件以排除干扰。 3. **善用文档**:查阅官方文档和在线教程,了解Firebug的最新...
Firebug 1.45是JavaScript开发者的一个重要工具,它为网页开发人员提供了一套集成在Firefox浏览器中的强大调试功能。这款插件在当时是非常流行的,尤其对于JavaScript的调试、性能分析以及HTML和CSS的调整来说,都是...