`

[原]Firebug常用功能总结

阅读更多



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

    随着现代浏览器(包括Safari)的更新,很多Firebug Lite的功能已经被原生开发者工具所集成,但对旧版本浏览器的支持或特定需求时,Firebug Lite仍是一个值得依赖的选择。 在使用过程中,开发者需要注意的是,由于...

    firebug-lite.rar

    Firebug Lite是一款强大的JavaScript调试工具,它为不支持原生Firebug扩展的浏览器,如Internet Explorer,提供了类似于Firefox上的Firebug的功能。Firebug是Web开发者不可或缺的工具,它允许用户实时查看、编辑和...

    firebug1.12-firebug1.11-firebug1.10-firebug1.9-firebug1.8-firebug1.7

    然而,需要注意的是,随着Firefox浏览器内置的开发者工具日益成熟,Firebug项目在2016年宣布停止更新,其功能已被集成到Firefox的内置工具中。尽管如此,了解Firebug的历史对于理解Web开发工具的演进历程仍然非常有...

    FireBug插件使用教程

    Disable Firebug 关闭/开启 Firebug 对所有网页的编辑、调试和检测功能,Disable Firebug for xxxxx 关闭/开启 Firebug 对 xxxxx 网站的编辑、调试和检测功能,Allowed Sites 设置允许编辑、调试和检测的网站等。...

    firebug2.0.19.xpi

    Firebug,作为Firefox火狐浏览器的原生插件,曾是开发者们最得力的助手之一,特别是在Firebug 2.0.19这个版本中,它为开发者提供了强大的调试、分析和优化网页前端功能。本文将深入探讨Firebug 2.0.19在Firefox 45.5...

    firebug各个版本安装包

    总结来说,Firebug从1.7.3到1.12.7的每个版本都体现了Web开发工具的演进历程,提供了丰富的功能来帮助开发者调试和优化网页。尽管现在它已被内置的Firefox DevTools所替代,但了解并掌握Firebug的历史和使用方法,...

    firebug-1.8.2.zip

    总结来说,Firebug作为一款强大的Firefox插件,它提供了全方位的Web开发和调试功能,包括HTML、CSS和JavaScript的调试,以及网络请求的监控,极大地提升了开发者的工作效率。其开源性质更是促进了Web开发工具的进步...

    IE中使用firebug

    Firebug原本是Firefox浏览器的一个扩展,但这里提到的是在IE环境下的一种类似功能,可能是通过其他插件或工具实现的,因为原版的Firebug并不直接支持IE。 在Web开发中,Firebug是非常重要的工具,它提供了HTML、CSS...

    firebug插件

    总结来说,Firebug作为一款里程碑式的Web开发工具,它的设计理念和功能对后续的开发工具产生了深远影响。即便在今天,理解并掌握Firebug的使用技巧,对于理解Web开发的底层原理和提升开发能力仍然有着积极的意义。

    火狐浏览器的fireBug插件

    在Firefox 54版本之后,原生的开发者工具已经包含了FireBug的大部分功能,而FireBug作为一个独立插件不再更新。 **4. 其他相关工具** 虽然FireBug不再更新,但其设计理念和功能已被现代浏览器的开发者工具所继承。...

    firebug及其安装方法

    下面我们将详细介绍Firebug的功能以及如何进行安装。 **一、Firebug的主要功能** 1. **HTML查看与编辑**:Firebug可以让你直接查看网页的HTML结构,并允许你在浏览器中实时编辑,查看更改的效果。 2. **CSS调试**...

    Firebug离线xpi安装包

    总结来说,"Firebug离线xpi安装包"是一个供开发者在离线环境中安装和使用Firebug的文件,它包含了调试HTML、CSS、JavaScript、网络请求等多种功能,对于提升前端开发效率和解决问题有着重要作用。即使在当前有更先进...

    最新版fireBug插件

    尽管如此,随着Firefox的更新迭代,开发者逐渐转向了内置的开发者工具,这些工具集成了FireBug的大部分功能,并且在功能和性能上进行了进一步提升。 对于初学者来说,理解并熟练使用FireBug将大大提升他们的...

    httpwatch与firebug.

    虽然Firebug已经停止更新,但其很多功能已经被Firefox的内置开发者工具所继承和增强,如网络面板、元素审查等,这些工具依然对现代Web开发至关重要。 综上所述,HTTPWatch和Firebug是Web开发者不可或缺的工具,它们...

    firefox_firebug

    3. **JavaScript调试**:Firebug提供了JavaScript源代码查看和断点调试功能,可以跟踪变量值、调用堆栈和执行流程。 4. **网络面板**:监控HTTP和HTTPS请求,查看加载时间、大小等信息,帮助优化网页性能。 5. **...

    firebug 35

    3. JavaScript调试:JavaScript是Web开发的关键部分,Firebug提供了断点、步进执行、变量查看等调试功能。在Firebug 35中,它可能增强了对ES6新语法的支持,以及对于异步代码调试的改进,使得在Firefox 35上的...

    firebug 1.7

    Firebug 1.7是一款经典的Web开发和调试工具,它为Firefox浏览器提供了强大的功能,让开发者能够深入地洞察网页的结构、样式、脚本以及网络请求。在这个版本中,Firebug进一步提升了其性能和易用性,成为了当时Web...

    Firefox和相应的Firebug

    1. **学会使用快捷键**:掌握常用的Firebug快捷键能提高工作效率。 2. **适时禁用插件**:当遇到性能问题或未知错误时,可以禁用其他插件以排除干扰。 3. **善用文档**:查阅官方文档和在线教程,了解Firebug的最新...

    firebug1.45调试javascript工具

    Firebug 1.45是JavaScript开发者的一个重要工具,它为网页开发人员提供了一套集成在Firefox浏览器中的强大调试功能。这款插件在当时是非常流行的,尤其对于JavaScript的调试、性能分析以及HTML和CSS的调整来说,都是...

Global site tag (gtag.js) - Google Analytics