firebug1.12 更新

发表于 5年以前  | 总阅读数:1311 次

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

自动完成改进

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

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

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

复制 CSS 属性

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

Copy CSS Properties

新增网络过滤器

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

New Net Panel Filters

Dom 事件记录过滤器

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

Filter for DOM Events Log

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


monitorEvents(document.body, 'click');

在命令行使用

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

Use in Command Line

控制台信息合并

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

Group Console Messages

HTTP 请求时间线浮层改进

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

Firefox Timeline

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

Chrome Timeline

侧面板支持隐藏

这个界面上的改动也没什么好说的。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。如下图:

Include Command

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

CSS Query Selector Tool

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

点击查看大图

专题「开发工具」的其他文章 »

  • 开始使用 Vagrant (Aug 23, 2015)
  • 搭建 ngrok 服务实现内网穿透 (Apr 19, 2015)
  • Chrome 32 开发者工具的几个变化 (Jan 19, 2014)
  • Genymotion:超赞的安卓虚拟机 (Nov 28, 2013)
  • 打造 Mac 下的完美开发环境 (Oct 09, 2013)
  • 如何在 Mac 下使用 Fiddler (Sep 13, 2013)
  • 看懂 Fiddler 的瀑布图 (Sep 04, 2013)
  • [小Tip]用好浏览器的控制台 (Aug 11, 2013)
  • firebug1.10更新 (Jul 16, 2012)
  • [小Tip]ABP扩展对前端开发的影响 (Mar 29, 2012)
 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:8月以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:8月以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:8月以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:8月以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:8月以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:8月以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:8月以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:8月以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:8月以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:8月以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:8月以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:8月以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:8月以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:8月以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:8月以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:8月以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:8月以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:8月以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:8月以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:8月以前  |  398次阅读  |  详细内容 »
 相关文章
为Electron程序添加运行时日志 4年以前  |  19631次阅读
Node.js下通过配置host访问URL 5年以前  |  5643次阅读
用 esbuild 让你的构建压缩性能翻倍 4年以前  |  5384次阅读
 目录