Just Sword Wang's Blog

uedbet手机官网下载-uedbet手机app下载

Firebug 1.9于1月6日发布,新版本带来了诸多新的实用功能,为此我翻译了这篇关于新特性的文章:Firebug 1.9 New Features

/* ----------- translation begins ----------- */

Firebug 1.9 已经发布,和往常一样我又有了这样一个机会,来介绍一些被引入的新特性。

firebug logo

首先来看看下面的兼容性列表:

  • Firebug 1.7.3 适用于 Firefox 4.0
  • Firebug 1.9 适用于 Firefox 5.0 – 11.0
  • Firebug 1.10 适用于 Firefox 12.0 (nightly)
  • Firebug 1.10 alpha 1 下周面世,你也可以同时在Firefox最新版上使用 Firebug 1.9b6。

    这是一个所有新特性的纲要:

  • Firebug UI 停靠
  • 复制JSON相应到剪切板
  • 显示语法错误的位置
  • 网络面板的新的列:协议
  • 快速从页面中移除元素
  • 函数对象:displayName属性
  • 每个控制台日志都有了源信息
  • 重新发送HTTP请求
  • 条件断点的工具提示
  • 在DOM面板里添加监控
  • 来自游览器缓存的响应头
  • 字体查看器(Font Viewer)
  • 字体工具提示
  • 数组项的工具提示
  • Firebug UI 停靠

    Firebug UI 可以停靠在浏览器窗口的所有4个边缘。打开开始按钮(start button)的弹出菜单,选择Firebug UI 位置(Firebug UI Location) 子菜单并且最后选择你最喜欢的停靠位置。

    firebug new features

    复制JSON相应到剪切板

    你是否在处理 AJAX 以及 JSON?Firebug允许你监视JSON相应并拷贝JSON树的部分到剪切板。展开HTTP请求(在控制台或网络面板里),选择JSON选项卡右键JSON树打开上下文菜单。

    firebug new features

    显示语法错误的位置

    控制台面板里显示一个箭头,指向语法错误的准确位置。

    firebug new features

    网络面板的新的列:协议

    网络面板提供了一个新的协议列,用来显示每个HTTP请求的协议。你可以使用这列通过协议来排序所有的请求,或者只列出https请求。这一列默认不显示,你需要在列标题上右键定制需要的列。

    firebug new features

    快速从页面中移除元素

    众所周知的“查看元素(Inspector )”特性允许快速移除页面中选中的元素。只要查看该元素并按下Delete键,就能移除当前页面高亮的元素。

    firebug new features

    函数对象:displayName属性

    Firebug也支持 displayName 函数对象属性。你可以使用这个属性来为匿名函数指定自定义的名称。Firebug将会使用此属性来显示堆栈跟踪(stack traces)。

    firebug new features

    每个控制台日志都有了源信息

    这只是一个简单的新功能。每个在控制台里显示的日志都有其源(文件URL和行号)。当然,Firebug会在你点击这些源链接的时候显示源。

    firebug new features

    重新发送HTTP请求

    网络面板允许重新发送一个已经存在的HTTP请求。只需右键它并在弹出的上下文菜单里选择重新发送(Resend)。好用又简单。

    firebug new features

    条件断点的工具提示

    脚本面板为条件断点显示工具提示,你不再需要为了查看当前断点的条件而特意打开条件编辑器。

    firebug new features

    在DOM面板里添加监控

    DOM面板里引入了一个新的*添加监控(Add Watch)*命令。这允许开发者找到特定的对象和域(可能深达结构的数层)并将其直接放到脚本面板的“监控”窗口,这样可以进一步检查和监视它。

    firebug new features

    来自游览器缓存的响应头

    网络面板现在甚至显示来自游览器缓存的响应头。只需展开HTTP请求并检查Header页,在底部有个新的区域(如果响应来自缓存的话)

    firebug new features

    字体查看器(Font Viewer)

    Firebug引入了字体查看器(主要是应对 *.woff 文件),并集成在网络面板。如果你的页面加载了这些文件,你可以展开对于的请求,并查看所有下载字体的元信息。这非常酷!

    firebug new features

    字体工具提示

    还有一个为设计者的贴心支持,如果你将鼠标移动到CSS面板的字体的上(或在样式边栏),你将会看到一个字体预览的提示信息。

    firebug new features

    数组项的工具提示

    另一个精巧的改进有关于调试和监控一个数组值时使用提示。如果移动鼠标到一个数组括号,你能看到实际的值,看下面的截屏。

    firebug new features

    /* ----------- translation ends ----------- */

    可见,Firebug 1.9的改进非常之多,而且很多都是非常实用的功能。在我之前写的 WOFF和Google Font API 里我曾抱怨Firebug不支持woff格式的字体预览,这个问题也在新版的Firebug里解决了。希望未来的 Firebug 愈发犀利,让苦憋的前端攻城师人人有口饭吃...


    评论加载中...

    Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。