这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 听听看 > 正文
Firefox的必备插件
2014年01月15日 听听看 ⁄ 共 2263字 等你评论

前端开发人员特别热衷于使用Firefox浏览器,Firefox有着丰富的组件,大大降低开发成本,提高了工作效率。

用这些开发工具能解决的问题:

列出页面中所有的JS/CSS的内容

"一次性列出甚至是总览页面的所有 JS/CSS的内容"是前端开发者们为了提升工作效率而提出的一项最基本的需求,特别是当某个页面引入多个外部(external)JS/CSS 的时候,这种需求就显得尤为重要。事实上,我们日常的调试环境里就有类似的工具足以满足这一要求,而且颇为方便。下面我介绍其中的两种YSlow (Based on Firebug) 和 Web Developer。它们都是想当著名的 Firefox 扩展,这恐怕也是 Firefox 深受前端开发人员喜爱的原因之一吧。

YSlow

YSlow 是 Yahoo! Developer Network 推出的一款主要用以分析页面执行性能的 Firefox 扩展,全名其实是 YSlow for Firebug。因此在这里需要提请大家注意:YSlow 是基于 Firebug 接口编写而成的,使用前请先安装Firebug。

Web Developer

Web Developer 是一款老牌的前端开发辅助型扩展,与 Firebug不同的是:它主要通过集成 Firefox 的内置机制(如 DOM 查看、Cookie 管理、页面信息展示等),辅以自身所提供的数种功能(如页面元素属性控制器、页面标尺、标准验证等)。 个人感觉它与 Firebug 的区别在于:前者致力于信息罗列,后者擅长于动态调试。显然,对于今天我们所要完成的工作,它足够了。

查看及编辑指定HTML元素的CSS

各浏览器的html、dom和css开发工具,操作方式大同小异,其中以firefox的firebug功能最为强大,操作也稍为复杂一点,只要了解了其中一个工具的操作方式,其他工具的操作都可以举一反三,快速上手。

工具:Firebug
简介:Firebug几乎是前台开发者的不二选择,其具备六大功能(firebug的六个主菜单):Console(控制台)、HTML(Html查看器)、 CSS(Html查看器)、Script(脚本调试器)、Dom(Dom查看器)、Net(网络状况监视),其中HTML为启动firebug后的默认视图,可以实时修改dom结构,css等

查看HTTP连接状态

作为一个前端开发者,在完成工作时,我们时刻要关注页面的性能以及前端页面对服务器的开销。要尽可能的减少页面的http请求数。还有我们在调试页面的时候,比如查看一个ajax返回了什么东西,或者就是查看一图片的缓存过期时间等。我们都要查看http链接状态。那如何查看我们的页面的http请求数以及连接状态呢?

firebug

比如我们要查看阿里巴巴中文站的http链接状态,首先我们打开它,按 F12->网络,默认网络面板是禁用的,点击启用

查看脚本动态生成的HTML

查看源代码是看不到js动态生成的代码的。我们需要通过工具来查看。
比如在啊里巴巴中文站首页右下有您可能感兴趣的商品推荐,这是js生成的,当用户拉动滚动条时动态生成内容。如何查看动态生成的html?

Firefox

firefox下选中内容,右键查看选中部分源代码。

调试cookie

cookie是Web浏览器存储的少量命名数据,它与某个特定的网页或网站关联在一起。cookie最初是为服务器端的编程设计的,不过我们可以利用 JavaScript堆客户端cookie进行持久性的储存及读写操作,从而为web应用程序赋予一种简单的记忆力。因此,调试cookie也成为了前端 工程师的必备技能之一。

不过cookie的调试却一直相当困难,甚至在一些原生的浏览器中我们无法看到cookie的信息。不过现在,我们有了调试cookie的利器。 基于Firefox的firebug的插件Firecookie

Firecookie这个插件是要基于firebug的,所以我们的firefox浏览器一定得先安装firebug,之后安好 firecookie,便可以看到firebug多出了一个标签cookies。

  1. 创建cookie,我们可以很轻松的创建一个包含cookie所有属性的调试用cookie。
  2. 清除该站点的所有cookie,这可以很方便的为站点调试cookie创建及是否生效,而不必如普通ie浏览器一样必须把所有的本地cookie删掉了。
  3. 过滤cookie用的,有两个可选项,一为显示被阻止的cookie,二为按cookie的path属性过滤。

调试脚本的性能

通过YSlow来检查整个页面的性能

安装

前提:
1. FireFox浏览器
2. FireBug插件

调试方法

安装完成后,打开ff可以直接在firebug插件里面看到有YSlow选项卡,在状态栏的右边也可以看到有YSlow的图标出现
点击FireBug插件上方的grade可以看到YSlow针对于页面的性能评级,这是针对于"提高网页效率的14条准则"来评估的。

Firefox

友荐云推荐
×