Chrome开发者工具和Firebug的一些简单比较
Firebug是Firefox下著名的网页调试工具,而Chrome的开发者工具同样非常优异。今天我就简单的比较一下两者,同时也是对自己推文的一个总结和回顾。
在查看DOM上,两者虽然在具体操作方式上有区别,但大体功能是一致的。不过Firebug还可以额外的复制HTML,innerHTML,XPath,CSSPath,是个亮点。
Script调试上,Firebug就比较简陋了,不仅有时需要刷新页面才能调试,并且都是常规项目。而Chrome开发者工具不仅可以即时调试,而且可以直观的添加Event Listener,可谓相当便捷。
Firebug额外还有一个CSS调试的功能,可以直接调试CSS文件中的各个CSS定义,比较方便。Chrome开发者工具在这方面暂有所欠缺。
Firebug在Net面板下,切换查看各个请求非常麻烦,需要每个加号减号的收缩展开,尤其是要往前回顾的时候。而Chrome下的Network就没有这个问题,可以方便的点叉关掉或直接在左侧切换。并且Net是悬浮预览,而Network则是直接全部预览,要直观一些。而且在对XHR请求时下断点上,Chrome开发工具可以根据URL匹配,而Firebug只能断在所有请求上。差距立现。
Firebug比较有意思的是DOM面板,可以查看当前全局所有的变量声明情况。
而Chrome开发者工具有Resource面板,可以查看当前网站的cookie、local storage等内容。有Profile面板,可以非常详尽的显示profile JavaScript的结果,而不像Firebug那样集成在一起显示的很简陋。Audits面板,与YSlow差不多。
在控制台方面,Chrome开发者工具和Firebug也各有所长。Chrome开发者工具的自动完成只能显示一个,但查看运行结果可以进一步追踪堆栈,不仅仅只是字符串化的内容。而Firebug则可以给出浮动菜单显示所有的自动完成备选项,但结果是一个字符串内容而已。Firebug会在控制台中冗余的显示XHR请求,无论你选上面哪个筛选,都不能单纯过滤掉这些请求。但Chrome的控制台则是很专一的显示Error,Warning等内容,同时也可以在选项中设置为显示XHR请求。不过毕竟XHR请求的显示可以在Network面板里查看,所以默认不打开也是比较合理的。这可能也和Firebug各个功能模块化相互独立有关系。
Firebug可以用第三方编辑器打开代码,并且可以匹配在特定网站自动打开Firebug,并在状态栏或工具栏图标上显示当前页面的错误数量,这些都是Chrome开发者暂时做不到的。
Chrome的开发者工具是随着Chrome的升级而升级,且不会影响Chrome本身的速度。但Firebug是独立扩展,有较多报告及本人使用经历,均表明Firebug会较大程度的拖慢Firefox的速度,并且会导致浏览器假死。但也正由于Firebug的扩展身份,导致存在大量Firebug的扩展,如FirePHP等。虽然Chrome目前也开放了一部分这方面的API接口,但目前除了官方的Page Speed,还鲜有第三方扩展的出现。
Chrome的开发者工具目前随着Chrome的高速更新而更新着,且最近有Firebug的开发者跳槽到Google阵营。而Firebug却要面临和Firefox内置的控制台和调试器的竞争和冲突,前途并不明朗,也曾有Firebug贡献者称要考虑这个项目的生死。
2011-9-25 18:06 更新:发现Firebug的搜索是跨越所有模块的,搜索结果可以自由的上下跳转,并囊括DOM,所有Script。而Chrome开发工具只是在当前作用域有效,需要手动切换,并没有方便的导航,不能自由的向前向后。
以上都是个人陋见,欢迎指正。
转载于:https://www.cnblogs.com/ayanamist/archive/2011/09/23/2186318.html
Chrome开发者工具和Firebug的一些简单比较相关推荐
- 请参阅:Chrome开发者工具中的悬停状态
我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
- Chrome开发者工具关于网络请求的一个隐藏技能
这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子. 抓取帖子用的JavaScript函数如下: function getPostByAJAX(req ...
- 在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
- chrome开发者工具功能拾遗:Sources面板篇
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能.也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工 ...
- 程序员的你是否熟练掌握Chrome开发者工具?
写在前面 再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈^_^ 回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发 ...
- Chrome开发者工具关于网络请求的一个隐藏技能 1
这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子. 抓取帖子用的JavaScript函数如下: function getPostByAJAX(req ...
- Chrome开发者工具使用小技巧
正所谓不用Chrome的开发者不合格,不晓得Chrome开发者工具进行web调试也不是合格的web开发者.所以本文总结了Chrome开发者工具使用的一些小技巧. 一:首先来说下如何打开开发者工具吧: ...
- Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]
我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...
最新文章
- MyBatis-Plus 通用IService的使用
- Dev-C++ 5.11安装教程
- CodeForces - 456C Boredom(线性dp)
- [jQuery] 你知道自定义事件吗?jQuery里的fire函数是什么意思,什么时候用?
- jdbc获取结果行数_java – 如何判断从JDBC执行更改的行数
- php 字符串比较txt,PHP读到txt中文字符串比较失败
- php极光推送教程,laravel框架使用极光推送消息操作示例
- mysql 联合索引 性能_mysql:联合索引及优化
- 【Python】Pygame模块设计游戏
- C++socket编程(六):6.3 并发测试工具ab的使用(apache工具)
- 2015 2020 r4烧录卡 区别_行业新闻2020年中国智能门锁行业发展现状分析
- 高通手机 进入 高通9008模式
- 海外版TikTok培训课程怎么选择
- 医院病房监护系统和图书管理系统数据流图
- 【Derivation】随机过程及应用(三) - 高斯分布/正态分布的期望和方差
- 大家好,欢迎您加入这个集体!
- java方向考什么证_java认证证书两个工作方向
- js版四舍六入五成双方法
- 神经网络模型的模型假设,神经网络模型预测控制
- 【机器学习】关联规则挖掘算法 + 三大案例实战 + Apriori算法 + Python代码实现