Tagged

firebug

A collection of 5 posts

firebug

firebug net面板详解

今天志刚问到Firebug的net面板的 onload是神马意思,我一时语塞,用Firebug这么多年了都木有仔细研究过。正好这两天和大猫舜子等童鞋一起研究@import css的问题,顺便把这个详细了解下吧。 Net面板 Net面板就是Firebug中的net tab,中文应该叫“网络”?它可以监控页面中的HTTP请求,然后将收集到的信息展现出来。当然,要使用这个功能,你要先点击Net字符右边的小三角将它启用。 PS:我这里的环境是Firefox 4+Firebug 1.7,旧版本的界面可能会稍有不同。 它会将页面中所有的请求/相应的完整过程整理好列出来。 上面的截图显示,前端观察首页的页面请求概况:共9个请求,每一个条目都包含相关资源一些信息: 请求类型(GET|POST) 请求地址(鼠标悬浮在URL列上时会完整显示) 状态及其描述(200 ok) 所属域名 资源大小 图形化的时间线 最底部一行会显示一个简单的统计信息。 请求/响应详情 点击url前面的+按钮后,该条目就会展开,显示该请求的详细信息: 可以看到这里有几个tab:

firebug

Firebug 1.5发布

Firebug 1.5在经历6个月的开发和36次alpha和beta版本之后,终于发布正式版了。 新版的Firebug 1.5有一些很不错的功能: 增强的元素查找器 更精确的NET面板计时 HTML 变化中的断点 右侧栏中的布局子面板中添加z-index和position属性 支持MathML和 SVG名字空间(同时可查找和编辑) XHR中断 增强的 HTML 编辑 控制栏和Net栏中添加Persist 按钮 独立的计算过的 CSS和 Style子面板 很多很多bug修正和稳定性增强 当然还有很多其它的改进,查看Firebug Release Notes以了解全部更新细节。 下载或升级你的Firebug:https://addons.mozilla.org/en-US/firefox/addon/1843/ 同时请注意,Firebug1.5 **不支持**Linux上的64位Firefox。

firebug

Firefox插件推荐:CSS Usage

css usage是一个基于firebug的firefox扩展,可以用来查看页面中的CSS的使用情况,可以清楚的查看css文件中所有的规则在你的网站中的真实的使用情况。可以查看一个网站中多个页面中的css使用情况——这个很好,可以看到CSS的在网站中的全局使用情况。 预览: 下载地址:https://addons.mozilla.org/en-US/firefox/addon/10704 主页地址:http://spaghetticoder.org/cssusage/ 用法: 打开你想要扫描的网站的页面,打开Firebug,切换到CSS Usage标签,然后点击”scan”按钮。 如果是用了大量ajax或者dhtml的网站中,打开尽可能多的隐藏的div/窗口/tab,以使CSS Usage爬取尽可能多的内容。 然后访问你的网站的其它页面。 每访问一个新的页面,请按一次”scan”按钮。当然,也可以选择autoScan按钮,这样就不用每次按Scan按钮了。 扫描的结果中,绿色的规则表示当前页面中有用到,黑色表示其它页面中用到,红色表示没有被扫描到(至少在当前页面),灰色是伪类(

firebug

YSlow出现较大更新并增加更强功能

今天Firefox自动提示有两个插件更新,打开看了一下,发现有一个是YSlow,仔细一看,我震惊了:版本从当前的1.0.2直升到2.0.0b3!这跨度太大了吧!不过,我还是怀着试一试的态度更新了,更新颇不顺利,失败了好几次,最后终于成功了。 打开YSlow界面 ,发现真的有了很大的改变: 新版本的YSlow主要有以下更新: 增加9条新的网站性能指标,加上原来的13条,共有22条指标 可自定义设置评价规则。新的YSlow有三个内置的规则:V2、V1、小型站和博客,V2的指标最多,包括所有22项指标,而V1则只包括上一个版本的13条指标。你可以完全设置自己的规则,这样就可以比较灵活,也更客观实际的分析自己的网站。 增加工具项,添加了一些网站的优化工具,比如Smush.it、JS Minified、 JS Beautified。 增加的这些工具中,值得一提的是Smush.it,这是Yahoo开发的一个图片优化工具,可以自动优化你的网站中使用的图片,将其优化并压缩,并支持打包下载,很方便。Smush.

firebug

网页在左,firebug在右:widerbug

相信各位网页设计师都很熟悉firefox的知名插件firebug了,这个插件给我们带来了巨大的方便。但是firebug一般出现在页面底部(或者把它拖出来成一个独立的窗口),你有没有想过让firebug出现在浏览器的右侧呢?command-tab为我们实现了这一功能,因为firebug是开源的,command-tab的站长Collin Allen修改了官方的firebug,让它出现在浏览器的右侧: 不过唯一不爽的是,这个插件和firebug算是兄弟吧,(或是姊妹?)所以他们不能共存,也就是,安装widerbug的时候,要先卸掉firebug(我没有卸载firebug直接安装的widerbug,安装后发现firebug被自动卸掉了)。 另外,比较好的地方是,该插件和firebug的发行版保持同步更新,现在最新版本是1.30。 支持Firefox 3.*,官方没有提到firefox2下的支持情况,不过根据前端观察的测试,firefox2下是可用的。 访问官方发布页面,或点击此处直接下载安装。