适用于Google Chrome的Firebug调试器

时间:2008-11-21 07:33:24

标签: html css google-chrome debugging firebug

您可以在Google Chrome中使用Firebug吗?

我想要的基本功能:

  • 检查HTML源代码(选择元素,删除它们等)
  • 检查CSS值(内置解决方案很奇怪,不知何故)

15 个答案:

答案 0 :(得分:242)

Chrome中已经内置了类似Firebug的工具。只需右键单击页面上的任意位置,然后从菜单中选择“检查元素”。 Chrome有一个用于调试的图形工具(就像在Firebug中一样),因此您可以调试JavaScript。它还可以很好地进行CSS检查,甚至可以动态更改CSS渲染。

有关详细信息,请参阅https://developers.google.com/chrome-developer-tools/

答案 1 :(得分:37)

Firebug Lite支持检查HTML元素,计算CSS样式等等。由于它是纯JavaScript,因此可以在许多不同的浏览器中使用。只需在源代码中包含该脚本,或将书签添加到书签栏,只需单击一下即可将其包含在任何页面中。

http://getfirebug.com/lite.html

答案 2 :(得分:15)

只是添加一些谈话要点作为每天使用Firebug / Chrome Inspector的人:

  1. 在撰写本文时,只有Google DOM检查员,没有它没有Firebug的所有功能

  2. Inspector是Firebug的'精简版':接口不是很好的IMO,两个最近版本的元素检查现在都很笨重,但Firebug仍然更好;我发现自己试图找到对Chrome的热爱(因为它是一种更好,更快的浏览器体验),但对于开发工作来说,它对我来说仍然很糟糕。

  3. 在Firebug中,DOM / CSS的实时预览/修改仍然更好; Firebug中计算出的CSS和盒子模型视图更好;

  4. 不管怎么说,阅读/使用Firebug更容易,因为它可以在几个关键区域轻松导航,操作/修改文档?谁知道。我已经习惯了界面,我认为Chrome Inspector并不是那么好,尽管这是我承认的一个主观的事情。

  5. Cookie / Net标签对我来说对Firebug非常有用。也许Chrome Inspector现在有这个吗?上次我检查时没有,因为Chrome在没有您干预的情况下在后台自动更新(默认情况下获得您的同意,就像所有优秀的霸主一样)。

  6. 最后一点:谷歌Chrome获得功能齐全的Firebug的那天是Firefox基本上为开发人员而死的那一天,因为Firefox有3年的时间使Firefox的布局引擎Gecko和{{3}一样快他们没有。很抱歉直截了当地说这是事实。

  7. 你知道,现在每个人都希望摆脱Flash代替jQuery,以移动可访问性和交互性(iPhone,iPad,Android)为动力,而且JavaScript“突然”是一个大问题(那是讽刺),所以这艘船已经航行,Firefox。这让我很伤心,作为Mozilla的粉丝。在Firefox升级其JavaScript引擎之前,Chrome只是一个更好的浏览器。

答案 3 :(得分:14)

F12

我喜欢短信

答案 4 :(得分:12)

试试这个,它被称为Firebug Lite,显然适用于Chrome的测试版。

您也可以在以下位置找到它: https://chrome.google.com/extensions/

答案 5 :(得分:9)

您可以在“书签栏”中设置此书签,以便在Chrome / Chromium浏览器中始终提供Firebug lite(将其作为URL):

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

答案 6 :(得分:4)

答案 7 :(得分:4)

官方Firebug Chrome扩展程序,您也可以自行下载并打包扩展程序。

https://getfirebug.com/releases/lite/chrome/

答案 8 :(得分:4)

jQuerify是将jQuery嵌入Chrome控制台的完美扩展,并且非常简单。此扩展还指示jQuery是否已嵌入到页面中。

此扩展用于将jQuery嵌入到您想要的任何页面中。它允许在控制台shell中使用jQuery(您可以通过 Ctrl + Shift + j 来调用Chrome控制台。)。

要将jQuery嵌入所选标签,请单击扩展按钮。

答案 9 :(得分:3)

嗯,可以为Google Chrome启用Greasemonkey脚本,所以可能有办法使用这种方法安装Firebug吗? Firebug Lite也可行,但与使用全功能的感觉不同:(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide /

答案 10 :(得分:3)

这不能解答您的问题,但如果您错过了,Chris Pederick的Web Developer现在可用于Chrome:https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm

答案 11 :(得分:3)

F12 (仅适用于Linux和Windows)

Ctrl I

如果你在Mac上)

答案 12 :(得分:3)

忘掉所有你需要的浏览器独立检查员,dom updater

https://goggles.webmaker.org/en-US

只需添加书签并转到任意网页,然后点击该书签..

这实际上是Mozilla项目的Goggles,惊人的惊人惊人...

答案 13 :(得分:2)

答案 14 :(得分:1)

如果您使用每晚ppa在Ubuntu上使用Chromium,那么您应该拥有chromium-browser-inspector