【问题标题】:Firebug-like debugger for Google Chrome用于 Google Chrome 的类似 Firebug 的调试器
【发布时间】:2010-09-23 09:57:25
【问题描述】:

有没有类似 Firebug 的东西可以在 Google Chrome 中使用?

我想要的基本功能:

  • 检查 HTML 源代码(选择元素、删除它们等)
  • 检查 CSS 值(内置解决方案有点奇怪)

【问题讨论】:

  • 看起来 Chrome 现在支持扩展,我们能否重新审视这一点,因为许多现有答案现在在技术上是不正确的。我们应该更新这个答案而不是开始一个新的答案。
  • @Nathan Koop:我可能是错的,但我不认为 Chrome 扩展系统强大到足以支持像 Firebug 这样的东西。
  • 查看此链接以获取浏览器上的萤火虫:getfirebug.com/releases/lite/chrome

标签: html css google-chrome debugging firebug


【解决方案1】:

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

欲了解更多信息,请参阅https://developers.google.com/chrome-developer-tools/

【讨论】:

  • ++ 这足以解决 Chrome 特定的问题。如果我想要更深入的反省,我可以用 Firebug 来做。现在有了 IE8 的新开发者模式,所有主流浏览器都内置了开发者模式。美好时光。
  • 啊,找了好久,但是firebug的html编辑功能也有,在同一个地方可以编辑css,开发者工具栏,双击一个元素,输入,然后回车,然后就可以编辑html了。
  • Chrome 开发者工具 (ctrl+shift+j) 确实支持像 Firebug 一样的 Javascript 调试。单击脚本选项卡,然后单击底部的第二个图标 (>=),其工具提示为“显示控制台”。从那里您可以执行 Javascript 命令,例如 Firebug 控制台。
  • 请记住,在某些基于 linux 的系统上,它不会自动安装,因此您需要手动安装:sudo apt-get install chromium-browser-inspector
  • 目前的dev build 4.0.xxxx有一套开发者工具。我以前知道检查元素的东西,但没有“网络”面板,它还不够好。但是现在有一个“资源”面板似乎运行良好,并且具有与 firebug 相同的过滤器(脚本、xhr、图像等)。我已经使用 Dev build 一个星期了,它看起来很稳定。我终于将我的默认浏览器设置为 chrome - 现在它也是我的开发浏览器了! :)
【解决方案2】:

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

http://getfirebug.com/lite.html

【讨论】:

  • 很好的链接!不知道IE版本
【解决方案3】:
【解决方案4】:

好吧,可以为 Google Chrome 启用 Greasemonkey 脚本,所以也许有一种方法可以使用这种方法安装 Firebug? Firebug Lite 也可以,但与使用全功能的感觉不一样:(

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

【讨论】:

    【解决方案5】:

    您可以在“书签栏”中设置此书签,以便在 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】:

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

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

      【讨论】:

      • 这是 Chrome 的官方扩展
      【解决方案7】:

      官方的 Firebug Chrome 扩展或者你可以自己下载和打包扩展。

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

      【讨论】:

      • 为了清楚起见:这是一个指向 firebug lite 扩展而不是 firebug 扩展的链接。
      • 之前提供的链接已损坏。请使用新链接更新此答案。
      【解决方案8】:

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

      【讨论】:

        【解决方案9】:

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

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

        要将 jQuery 嵌入到选定的选项卡中,请单击扩展按钮。

        【讨论】:

          【解决方案10】:

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

          【讨论】:

            【解决方案11】:

            【讨论】:

              【解决方案12】:

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

              1. 在撰写本文时,只有 Google DOM 检查器,不具备 Firebug 的所有功能

              2. Inspector 是 Firebug 的“精简版”:界面不如 IMO,两个最新版本的元素检查现在都很笨拙,但 Firebug 仍然更好;我发现自己正在努力寻找对 Chrome 的喜爱(因为它是一种更好、更快的浏览器体验),但对于开发工作,它对我来说仍然很糟糕。

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

              4. 不知何故它更容易阅读/使用 Firebug 可能是因为在几个关键领域易于导航、操作/修改文档?谁知道。我习惯了这个界面,我认为 Chrome Inspector 并没有那么好,尽管我承认这是一个主观的事情。

              5. Cookies/Net 选项卡在 Firebug 中对我非常有用。也许 Chrome Inspector 现在有这个?上次我检查它没有,因为 Chrome 在后台自行更新而无需您的干预(默认情况下会像所有优秀的霸主一样获得您的同意)。

              6. 1234563不。很抱歉说得这么直白,但这是事实。

              你看,现在每个人都想离开 Flash 来代替 jQuery,这是出于移动可访问性和交互性(iPhone、iPad、Android)的动机,而 JavaScript “突然”成为了一件大事(这是讽刺),所以这艘船已经航行了,火狐。作为 Mozilla 的粉丝,这让我很伤心。在 Firefox 升级其 JavaScript 引擎之前,Chrome 只是一个更好的浏览器。

              【讨论】:

              • Firefox 正在走下坡路。截至目前(2013),chrome devtools 比 firebug 强大得多……而且 firefox 都将精力集中在 Firefox OS 上,它甚至不接近 android frodo .. 他们甚至没有花太多精力来制作 js 和渲染更快。
              【解决方案13】:

              F12

              我喜欢快捷键

              【讨论】:

              • 一个人把 ctrl shift j :)
              【解决方案14】:

              F12(仅在 Linux 和 Windows 上)

              Ctrl I

              如果你在Mac上)

              【讨论】:

                【解决方案15】:

                忘记你所有需要这个独立于浏览器的检查器,dom updater

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

                只需添加书签并转到任何网页并单击该书签..

                这其实是 Mozilla 项目 Goggles ,太神奇了太神奇了……

                【讨论】:

                • 他们正在关闭它。
                猜你喜欢
                • 2010-09-05
                • 2013-08-30
                • 1970-01-01
                • 2010-11-12
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2014-05-04
                • 2015-10-05
                相关资源
                最近更新 更多