`
zhaoshg
  • 浏览: 258134 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Firebug中你不该错过的几个功能

阅读更多

Firebug 是Firefox的一个扩展,提供了诸多网页开发的辅助功能,如果你是一个网页开发人员,天天要和HTML/CSS/Javascript打交道,Firebug能大大提高你的工作效率。

Firebug的大部分功能都很直观,我最常使用的是Inspect CSS/DOM和Javascript debug,有时候会看看Net和YSlow 。还有一些功能,或大或小,不是上来就发现,但也是非常好用,不容错过:

获取XPATH

无论做userscriptbookmarklet 还是网页爬虫,有时候用五六行DOM实现的网页元素提取,用XPath一句就搞定了。以前定位一个元素的XPath主要靠眼,有Firebug就省眼了,先用Inspect定位网页元素,然后点右键,选Copy XPath,搞定。
拷贝xpath
这个XPath是从DOM树里来的,已经修正了网页上的一些错误,所以有时和实际的XPath有一些偏差,但一般都很容易调整。比如一些网页中table 里没有tbody,直接就是表格内容,DOM树会自动补上tbody,得到的xpath中也会有tbody,在实际使用的时候,和网页实际内容对应,就要 把tbody去掉。

javascript命令行

如果哪个脚本语言不提供带命令行的控制台(console),我就不玩了,:-p。善用命令行控制台(console),可以省下很多debug的时间。我以前介绍过jsenv 。Firebug也提供非常好用的javascript命令行控制台,可以直接和当前网页交互,输入命令的时候还能自动补齐。另外,一定不要忘记先看看这个命令列表

控制台API

我最爱用的javascript函数就是alert,偶尔把它放在循环里,我可以花一下午的时间点OK玩。现在是和alert说byebye的时间 了。Firebug提供了一套相当完备的javascript控制台API,可以将log直接输出到控制台而不再用跳出小窗口,提供多种log级别 (debug,info,warn,error)和分组功能,可以显示对象属性,可以记录stack trace,甚至提供timer和profiler,调试performance都不用发愁了。记得查看控制台API的说明

标尺

无论在网页布局还是做动态HTML,常常需要知道一个网页元素的相对位置。你可以装一个Measueit扩展自己量,也可以用Firebug里的标尺。用Inspector选中你要度量的元素,在右侧选中Layout标签,然后鼠标划过盒模型中央,标尺就会出现。
Firebugruler

在所有浏览器中使用Firebug

对不起,不是所有的功能,是不是有点失望。不过,至少你可以保证控制台API正常输出,并且提供命令行的支持,已经相当不错了。下载firebuglite文件 ,放在脚本目录下,然后在页面中加入:

<script language="javascript" type="text/javascript"
src="/path/to/firebug/firebug.js"></script>

用F12就可以召唤出Firebug了。

分享到:
评论

相关推荐

    IE中使用firebug

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

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

    这个压缩包包含了Firebug从1.7到1.12的不同版本,让我们逐一探讨这些版本中的关键更新和特性。 1. Firebug 1.7: - 在这个版本中,Firebug引入了对HTML5新特性的支持,如离线存储(localStorage和sessionStorage)...

    FireBug插件使用教程

    如果你不喜欢这样,可以按 CTRL+F12 或在前面操作后单击右上角的上箭头按钮,弹出一个新窗口作为 Firebug 的控制窗口。从图 2-1 中我们可以看到,因为我们开启 Firebug 的编辑、调试和监测功能,所以目前只有两个...

    最新版fireBug插件

    而"firebug-1.6.1.xpi"则是FireBug插件的安装文件,用户可以直接在Firefox浏览器中安装这个.xpi文件来添加FireBug扩展。 总的来说,FireBug是Web开发史上的一款里程碑式工具,它的出现极大地推动了前端开发的进步,...

    firebug2.0.19.xpi

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

    firebug各个版本安装包

    Firebug-1.7.3是Firebug系列的一个早期版本,它引入了许多功能,如DOM检查器、CSS编辑器、JavaScript控制台和网络面板。在这个版本中,开发者可以实时查看和修改页面元素,调试JavaScript代码,并追踪HTTP请求。这...

    safari浏览器的firebug

    在Safari中安装Firebug Lite,你需要下载`firebuglite.safariextz`这个文件,这是一个Safari扩展。双击该文件,Safari会自动处理并添加到浏览器的扩展列表中。一旦安装完成,你就可以在Safari的开发者菜单中启用...

    firebug及其安装方法

    Firebug是一款强大的Web开发工具,尤其对于前端开发者来说,它是一个不可或缺的利器。这款插件在Firefox浏览器上运行,提供了一整套功能,包括HTML、CSS、JavaScript的实时编辑、调试和性能分析。下面我们将详细介绍...

    firebug 35

    在"Firebug 35"这个版本中,我们主要关注的是它对Firefox 35浏览器的兼容和支持。 首先,Firebug的核心功能包括HTML、CSS、JavaScript的实时编辑和调试。这意味着用户可以直接在浏览器中查看和修改网页的结构、样式...

    firebug 1.7

    在这个版本中,Firebug进一步提升了其性能和易用性,成为了当时Web开发者不可或缺的辅助工具。 一、Firebug的调试功能 1. HTML调试:Firebug可以显示页面的HTML源代码,并允许实时编辑。开发者可以直接在浏览器中...

    firefox插件firebug

    Firebug是firefox的一个插件,Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。 你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。而且可以在线的时候修改dom非常弹大...

    httpwatch与firebug.

    综上所述,HTTPWatch和Firebug是Web开发者不可或缺的工具,它们提供的功能对于优化网页性能、调试代码和提升用户体验有着显著的作用。随着技术的发展,虽然原生开发者工具逐渐取代了这些独立插件,但理解它们的工作...

    firebug 1.7.0 官方版本

    需要注意的是,尽管Firebug曾是Web开发者不可或缺的工具,但随着浏览器内置开发者工具的发展,Firefox在2017年宣布将不再更新Firebug,并在后续版本中将其功能整合到了内置的开发者工具中。因此,虽然Firebug 1.7.0...

    firebug 1.62 中文版

    在Firebug 1.6.2这个版本中,包含以下几个核心知识点: 1. **JavaScript调试**:Firebug允许开发者在浏览器内直接查看和编辑JavaScript代码,设置断点,单步执行,查看变量值,以及追踪函数调用。这对于调试复杂的...

    FireBug离线安装版

    在这个“FireBug离线安装版”中,我们看到的文件是firebug-2.0.2-fx.xpi,这是一个Firefox扩展的安装包文件,用于在没有网络连接的情况下安装FireBug。 在描述中提到的"firebug-2.0.2-fx",表明这是FireBug的2.0.2...

    firebug +Firefox

    Firebug 1.11.4是该工具的一个版本,它针对Firefox浏览器进行了优化,以提供最佳的前端开发体验。"full-latest"可能指的是这个版本是最完整且最新的,包含了所有功能并保持了与最新Firefox版本的兼容性。 在描述中...

    Firebug中文 web_develope中 火狐2.0.0.14.rar

    让Firebug中文版和web_developer中文版配Firefox2.0.0.14这一组绝配为你服务为你解忧。下面教你一些最白菜的东东: 首先:必须安装Firefox2.0.0.14浏览器……555太白菜了,再将你硬盘上叫firebugcn.xpi和web_...

    firebug 1.2中文版

    在Firebug 1.2中文版中,我们主要聚焦于以下几个核心知识点: 1. **HTML调试**:Firebug允许开发者实时查看网页的HTML结构,包括元素的属性、样式以及它们在DOM树中的位置。你可以直接编辑HTML,实时看到页面变化,...

    firefox_firebug

    标题“firefox_firebug”指的是Firefox浏览器与Firebug插件的组合使用。Firebug是一款历史悠久且功能强大的网页开发者工具,它最初是为Firefox浏览器设计的,允许用户对网页的HTML、CSS、JavaScript等进行实时编辑、...

Global site tag (gtag.js) - Google Analytics