我是一名初学者的网页开发者,多次推荐使用Firebug来进行调试。然而迄今为止,我仅使用Chrome内置的开发者工具进行调试。这个工具似乎可以完成Firebug所能做的所有事情,而且更清洁、更有组织,这是一个额外的好处。
随着我的调试技能越来越高级,是否有Firebug具备但是Chrome开发者工具没有的功能呢?如果有,它们是什么?
我是一名初学者的网页开发者,多次推荐使用Firebug来进行调试。然而迄今为止,我仅使用Chrome内置的开发者工具进行调试。这个工具似乎可以完成Firebug所能做的所有事情,而且更清洁、更有组织,这是一个额外的好处。
随着我的调试技能越来越高级,是否有Firebug具备但是Chrome开发者工具没有的功能呢?如果有,它们是什么?
我一开始就使用Firebug,就像发明火的神器一样方便。但是Chrome推出了它的调试器,我尝试了一下。我继续使用Firebug,并关注Chome的开发工具,直到JSON工具在v12中添加后,我再也找不到理由不切换了。
Chrome的DevTools非常强大,因为它具有:
更新:两年后,我必须向Firefox团队表示祝贺,他们取得了巨大进展。尽管如此,Chrome团队和调试器每月都会跨越巨大的进步,引领着行业。我会更新上面的列表,但坦白地说,这会填满整个页面。
在切换到Chrome浏览器后,我还没有遇到任何Firebug功能的遗漏。
Chrome开发者工具接管了Firebug的功能,因此所有主要功能和熟悉的特性都在那里(例如$0
和console
对象)。
有一些小差异,例如DevTools没有CSS面板(尽管CSS样式表可以在Elements面板中进行操作)。
Chrome工具还有Timeline,Profiles和Storage面板。 Timeline面板记录了加载、CSS渲染和JavaScript解析。 Profile面板对资源使用情况进行分析,而Storage面板则显示并允许更改站点的数据库、本地存储、会话存储和Cookie。
最后,两个工具都有自己的微小差异,这使得各种操作更容易或更难一些。我的建议是在Firefox中使用Firebug,在Webkit浏览器中使用DevTools,因为只有Firebug Lite适用于Chrome,它缺少正常Firebug拥有的许多功能(而DevTools内置于Chrome)。
我觉得使用Firebug更加舒适。目前我想不起来具体的例子,但有时我会尝试在Safari或Chrome中调试一些东西,感觉很麻烦,然后就启动Firefox并快速完成任务。
DOM选项卡是一个优点。它比Chrome的相应选项更易访问和布局更合理。我也更喜欢Firebug中将DOM和其他JS对象记录到控制台的方式。
Firebug插件像Pixel Perfect也非常有用。我不知道是否存在类似Chrome的工具。
总的来说,这并不重要,因为你必须在两个浏览器中进行测试。还有IE,所以最好将其与IE的开发工具(已经有所改进,但与FF或Webkit相比仍然不够好)进行比较。
我认为在Firebug中没有特别高级的功能,而在Chrome中却没有,你会错过什么。
编辑: 这个现在已经不是事实了,因为 Chrome Dev Tools 已经实现了这个功能。
Firebug 可以搜索页面上加载的所有脚本。Chrome Dev Tools 只能搜索当前选择的脚本,据我所知。
在 Chrome 中,当您编辑 HTML 时,必须按 TAB 或 ENTER 键退出“编辑模式”,才能看到页面上的更改。
在 Firebug 中,您也可以直接输入 HTML 代码。在 Chrome 中,您必须右键单击并选择“编辑 HTML”。否则,它将显示为 <b>bold</b>。
我真的想换成 Chrome,因为它似乎运行更快,但对我来说实时编辑太重要了。
搜索:
Firebug中的搜索选项定义明确,因为它易于访问,我们可以使用区分大小写和正则表达式搜索关键字。
DOM:
在Firebug中,可以使用各种过滤选项(如显示用户定义属性、显示用户定义函数等)轻松访问DOM结构。
Cookies:
Firebug允许我们创建自己的cookies并提供导出cookies的功能。
网络/Net:
Firebug有一个Net面板,而DevTools称之为Network。两者都可用于分析加载资源的所有请求及其状态。在Firebug中,我们可以轻松了解资源的远程IP。
源代码:
尽管DevTools中提供了源代码编辑,但我认为使用源代码编辑时,Firebug更好,因为如果您想在DevTools中编辑CSS文件,则必须转到Sources面板,然后按Ctrl+O查找文件。然后才能编辑文件。在Firebug中,您可以在每个菜单选项卡下轻松找到源代码编辑。
支持dojo:
曾经我是一个dojo开发人员,通过使用Dojo Firebug Extension,Firebug可以轻松扩展以支持dojo开发。
Firebug拥有的鼠标选择功能非常好用,但是我在Chrome开发者工具中找不到它。
这让我很困扰,因为我在firebug中找不到它的快捷键,而chrome则完全没有这个功能。
作为一个新手开发者,所以在开发过程中仍然大多使用鼠标。