firebug详细使用方法

Firebug是网页浏览器 Mozilla Firefox下的一款开发类插件,
现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发
JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,
给Web开发者带来很大的便利。例如 Yahoo! 的网页速度优化建议工具 YSlow。
Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM以及JavaScript代码,下面给大家介绍下Firebug的详细使用方法:

操作方法

  • 01

    对于网页开发人员来说,Firebug是Firefox浏览器中最好的插件之一, 也可以说Firebug的CSS调试器是专为网页设计师们量身定做的;那么如何安装firebug呢?首先进入浏览器的

  • 02

    进入附加组件之后,然后在搜索框中搜索Firebug附加组件,找到之后安装即可,安装完成后重启浏览器就行了,如下图所示:

  • 03

    下面来说说Firebug的详细使用方法, Firebug可以随时编辑页面: 在HTML标签中,点击窗口上方的“inspect”命令,然后再选择页面中的文本节点,你可以对其进行修改,修改结果会马上反应在页面中。

  • 04

    Firebug有6个主要的Tab按钮,本经验将主要介绍这几方面的功能,下面说的是 Console 控制台:

  • 05

    Fire的查看和修改HTM代码功能: 利用Inspect检查功能,我们还可以用鼠标在页面中直接选择一些区块,查看相应的HTML源代码和CSS样式表,真正的做到所见即所得,如果你使用了外部编辑器修改了当前网页,可以点击Firebug的reload图片重新载入网页,它会继续跟踪你之前用Inspect选中的区块,方便调试。

  • 06

    Firebug的DOM功能: 该功能主要用于查看页面DOM信息,通过提供的搜索功能实现DOM的快速准确定位,并可双击来实现DOM节点属性或值的修改。

  • 07

    Firebug的脚本(Javascript)功能: 脚本功能主要是一个脚本调试器,可以进行单步调试、断点设置、变量查看等功能,同时通过右边的监控功能来实现脚本运行时间的查看和统计,提高运行效率。

  • 08

    Firebug的网络(Net)功能:该标签功能主要用来监控网页各组成元素的运行时间的信息,方便找出其中运行时间较慢的部分,进一步优化运行效率。

  • 09

    使用Firebug插件在附加组件中打开Firebug启用开关,启用开关默认未开,如果未打开此功能,那么很可能会出现点击后Firebug插件无效的情况;

(0)

相关推荐

  • airdrop详细使用方法 ios和os x10.10分享文件步骤

    苹果的AirDrop是一项随OS X Lion一同问世的文件分享功能。使用airdrop可以实现跨iOS和OS X 10.10分享文件,那么具体要怎么使用AirDrop呢?下文小编就为大家带来AirD ...

  • 让IIS支持Flv的详细设置方法步骤

    国内大多都是Win2003的主机,FLV格式文件上传服务器后不能播放,默认是没有指定输出FLV这种格式的虽然FTP里面可以看见,但无法通过http访问,也就无法播放了。原因是,WIN2003加强了II ...

  • 一站到底游戏电脑版详细安装方法

    一站到底是又江苏卫视打造的一款答题节目,因为这个节目可以让我们学会很多的知识,所以很多游戏也开始效仿,现在一站到底游戏已经出了安卓版,那么如何在电脑上玩呢?下面小编给大家带来了详细的安装方法 详细安装 ...

  • win10中GRADS出现FAST_CWD pointer错误的详细解决方法

    现在很多用户已经升级win10系统,但是还是系统陆续出现一些问题.由于工作需求,很多设计工作者们都会在win10系统电脑中安装GrADS(Grid Analysis and Display Syste ...

  • 手机输入法键盘夜间模式详细设置方法

    在使用手机时,我们肯定会用到手机输入法输入文本,在夜晚没有灯光照亮的情况下,手机屏幕的光亮会让我们觉得很刺眼,如果将手机输入法改为夜间模式就能缓解这个问题,下面小编就来为介绍手机键盘输入法夜间模式的设 ...

  • UG10.0详细安装方法

    下面介绍UG10.0详细安装方法. 操作方法 01 在网络上下载UG10.0软件,将其解压.解压后安装包内容如下图: 02 把安全软件退出. 03 把防火墙关闭. 04 在安装包"破解文件& ...

  • 交换机配置方法 网络交换机的详细配置方法

    交换机配置方法 网络交换机的详细配置方法(图文教程) 交换机本地配置 谈起交换机本地配置,首先我们来看一下交换机的物理连接.交换机的本地配置方式是通过计算机与交换机的"Console&quo ...

  • QQ变声器的详细使用方法

    今天小编要和大家分享的是QQ变声器的详细使用方法,希望能够帮助到大家. 操作方法 01 在我们的手机桌面上找到手机QQ并点击它,如下图所示. 02 点击一对话框,如下图所示. 03 点击屏幕左下方的说 ...

  • PhotoShop中3D变换滤镜的详细使用方法

    PS基础教程! PhotoShop中3D变换滤镜的详细使用方法! 本例教程中为大家介绍PS中的一个新功能3D变换滤镜的详细使用方法! 滤镜在PS中使用的比较多!教程比较详细!初学者应多加以练习!请看教 ...