firebug更新1.12,新功能和改进解析

目前Firebug 最新版为 1.12 版,相比之前的版本又有了不少新功能和改进。几天的试用之后,我这里集中介绍下 firebug 的 1.12 更新。半年前的 1.11 版更新也引入了不少新功能,本文摘几条比较有用的放最后。

自动完成改进

新版 Firebug 对控制台的自动完成提示浮层做了改进,将 Firebug 的自己的控制台 Api 在浮层底部单独显示了出来。

网络和控制台支持多条件过滤

在“网络”和“控制台”两个面板下,默认显示的是全部内容,也可以根据顶部 Tab 筛选不同条件。现在 Firebug 支持同时选择多个过滤条件,方法是按住Ctrl(Mac 下是 Cmd)再选。题外话,Chrome 开发工具一直就支持这样多选。

复制 CSS 属性

新版 Firebug 复制 CSS 变得更容易了。在 CSS 源码上右键,可以方便的复制全部或部分内容,如下图:

新增网络过滤器

在“网络”面板下,之前专门显示 Flash 请求的标签改名为“插件”了,除了 Flash,还会显示 Silverlight 等其它插件请求。另外,本次更新还增加了一个“字体”的标签,用于显示 WebFont 请求(需要 Content-Type 为 font/ttf 或 font/woff)。

Dom 事件记录过滤器

之前的 Firebug 可以选择一个元素并记录它的事件行为。新版 Firebug 在记录事件时,可以指定事件类型,如下图。

要记录上面这个元素的 click 事件,可以只选择“mouse”事件。但是 mouse 事件没有进一步细分,控制台里基本全是 mousemove 信息,完全没法用。所以我更推荐用控制台提供的 monitorEvents 方法来完成此功能(Chrome 开发者工具同样支持):monitorEvents(document.body, ‘click‘);复制代码在命令行使用

这是个神奇的功能,在 Firebug 的很多面板都可以用。在一些对象(HTML 元素、HTTP 请求、CSS 规则Cookie 信息、JS 对象等)上右键并点击“在命令行使用”,就会自动在控制台命令行输入 $p。也就是说在控制台可以通过 $p 来使用这些对象,具体效果如下图:

控制台信息合并

这个功能没啥多说的,印象中 Chrome 一直都是这样。通过 console.info、console.log 等方法打印在控制台的信息,如果连续多次都是一样,会合并显示并给出次数。

HTTP 请求时间线浮层改进

在 Firebug 的“网络”面板下,鼠标停留在时间线(Timeline),会有浮层详细的展示这个请求的一些网络指标。现在这个指标使用了瀑布图,更一目了然。

实际上,这个功能在 Chrome 开发者工具也一直存在,只是位置不同:

侧面板支持隐藏

这个界面上的改动也没什么好说的。Firebug 的一些面板是分左右两栏的,在分割线旁边有个箭头,点一下就可以收起右栏。

引用控制台最近运算结果

这个功能上次介绍过,通过 $_,引用控制台最近一次运算结果。把示例直接搬过来:> 1+1

2

> $_+1

3复制代码getEventListeners 方法

getEventListeners 是 Firebug 控制台新增的方法。顾名思义,传一个 Element 或 window 进去,在控制台返回这个元素上绑定的事件集合。

复制为 cURL 命令

在“网络”面板下,在任何一条请求上右键选择“Copy as cURL”,就得到了一个 cURL 命令,可以直接用于终端发送相同的请求,前提是你的终端已经装好了 curl(Mac 毫无压力)。Chrome 同样支持。

Console.log 支持 %f 格式

上次还说到 console.log 的 %f 不支持指定位数,Firebug 新版就已经支持了。试了下 Chrome 还是不行。> console.log(‘money: %.2f‘, 909232.12233893);

money: 909232.12复制代码显示/隐藏堆栈中的参数

在调试 JavaScript 时,经常会用到堆栈功能。现在新版 Firebug 增加了一个选项,可以显示或隐藏堆栈中的参数。

CSS 面板的改进

CSS 面板也有了一些改进,增加了对 @media、@supports、@page、@-moz-keyframes、@-moz-document 等规则的显示。

1.11 版引入的功能

下面这几个功能是从 1.11 版开始支持的,个人感觉比较有用,一并介绍下。

include()。这也是一个控制台方法,用于快速引入 JS 文件到当前页面。有了它,我们就不用再创建 script 标签再插入到文档了。它的第一个参数接受一个 url 或别名;第二个参数用来定义别名,定义的别名是永久的,重启 firefox 仍然可用;不传参数时,include() 会显示当前已经定义的别名和对应的 url。如下图:

获取匹配元素。

这个功能是根据指定的 CSS 选择器,找到文档中所有与之匹配的元素。选择器可以在 CSS 规则上右键选择或在右侧直接输入。

Performance Timing 可视化。

Performance timing 是一个新的 Api,用来返回页面很多与性能有关的时间点。Firefox 实现了这一 Api,firebug 可以让它更直观的展示出来,只要在控制台输入 performance.timing 即可。如图(点击查看大图):

转载自:JerryQu

时间: 2024-10-15 03:39:53

firebug更新1.12,新功能和改进解析的相关文章

一张图看懂ANSYS17.0 流体 新功能与改进

一张图看懂ANSYS17.0 流体 新功能与改进 提交 我的留言 加载中 已留言 一张图看懂ANSYS17.0 流体 新功能与改进 原创2016-02-03ANSYS模拟在线模拟在线 模拟在线 微信号sim_ol 功能介绍这是数值模拟.仿真分析领域最大的公众号,没有之一!!! 点上方“模拟在线”查看更多“牛B”资讯! 感谢ANSYS公司对平台的友情支持,本次17.0的改进报告均为ANSYS提供(授权直接摘抄,确实给小编省事不少啊).本次首先带来是流体方面的改进和优化.后续陆续推送结构.电磁等各方

XenApp/XenDesktop 7.12新功能LHC解读

在今天,Citrix发布了期待已久的XenApp/XenDesktop新版本7.12,在7.12中有许多值得期待的新功能(访问Citrix edocs查看7.12文档).其中,本文将在此处解读新功能:Local Host Cache,简称LHC,中文名为本地主机缓存.虽然我们中的许多人都熟悉XenApp 6.5中的LHC功能,但那是基于IMA管理架构下的LHC.作为FMA管理架构下的LHC,和IMA管理架构下的LHC是不同的架构,下面我们就来说说这些关于LHC的内容. 一.IMA架构简述 IMA

Docker 1 12新功能探索(9) network基础

docker1.12中的network功能作了一定改进, 但是关于network应该如何使用,docker中的网络模型是如何设计的,当我们在run起来一个container而全然没有意识到network的时候,docker是怎样处理的,在这篇文章中,我们回去尝试一探究竟. docker1.12有关network的特性增加 特性 Built-in Virtual-IP based internal and ingress load-balancing using IPVS Routing Mesh

Docker 1 12新功能探索(7) 服务编排三剑客简单总结

docker内置编排功能和目前成熟的编排工具相比可能还略显弱势,但是毕竟它是docker原生态的工具,占有地利的得天独厚的优势.同时目前内置swarm/node/service"三剑客"所组成的组合也能对普通的编排和应用场景提供足够的支持.本文将对docker1.12中这三小件进行简单总结. docker swarm 操作 详细说明 init 初期化集群 join 以node(worker)或者manager的身份加入集群 join-token 管理join-token update

卫星地形图地图下载工具更新2.12版本功能更新Somap

Somap2.12版本增加了一下 坐标纠偏功能,可以批量转换坐标:国内在线地图因相关政策均存在纠偏问题,现有如下3中标准:WGS84:无偏移,国际坐标,GPS坐标(谷歌.必应等标注[无偏移]的地图或者GPS使用):支持WGS84.GCJ-02.BD-09互转.支持格式:Kml.Excel. 下载地址:SoMap2.12点击此处下载    https://pan.baidu.com/s/1_CC25YTlt4u-0AioWSYQqA 另外,增加了坐标系转换功能,可以支持Geotif等坐标转换 原文

Docker 1 12新功能探索(8) Remote Api 1 24

Docker的Remote Api并不是1.12才有的,Docker1.12的Remote Api升到了1.24.Remote api的使用在1.12中没有大的变化,稍微大一点的变化是到这个版本之后,二进制文件分裂成了主client的docker以及主server的dockerd了.在centos上通过systemd的配置变化不大,无非是将tcp://ip:port设定到启动的Option中而已,下面来看一下如何设定和简单使用. 事前确认 可以看到只有unix socket的方式 [[email

Docker 1 12新功能探索(4) 1分钟创建集群

在这篇文章里面我们将会通过创建一个极其简单的3个节点的集群来学习一下docker swarm 模式的使用方法.这个1.12版本中最引人关注的部分到底使用的感觉如何.因为没有在大型的生产环境中进行严格的比较,单从研究性质或者小规模的集群的创建的感觉来说和kubernetes的集群创建不相上下,使用方便,在准备妥当的情况下,手速快的朋友1分钟之内完全能够创建完毕. 事前确认 [[email protected] ~]# docker info |egrep 'Manager|Version' WAR

sqlserver2016新功能

SQL Server 2016中的新功能(数据库引擎) 2017年1月13日  23分钟阅读时长 作者 本主题适用于:  SQL Server(从2016开始)  Azure SQL数据库  Azure SQL数据仓库  并行数据仓库 本主题总结了SQL Server数据库引擎的SQL Server 2017版本中引入的增强功能. 新功能和增强功能增强了设计,开发和维护数据存储系统的架构师,开发人员和管理员的功能和生产力. 要查看其他SQL Server组件中的新功能 ,请参阅SQL Serve

Windows 10 20H1 2004新功能

Windows 10的年度更新版本20H1即将问世. 目前可以从insider preview渠道中获得.这个版本中看上去对搜索功能做了不小的改进.包括搜索的磁盘占用率以及搜索的一些展示方式. 其它的一些改进包括 Windows Subsystem for Linux的改进 https://www.cnblogs.com/qishine/p/12430933.html DirectX 12新功能预览 安全模式中支持Windows Hello的数字密码 支持网络摄像机 支持自动重启UWP程序 Xb