280

您可以在 Google Chrome 中使用类似 Firebug 的东西吗？

我想要的基本功能：

  • 检查 HTML 源代码（选择元素、删除它们等）
  • 检查 CSS 值（内置的解决方案很奇怪，不知何故）
4

15 回答 15

244

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

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

于 2008-12-05T22:19:09.160 回答
37

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

http://getfirebug.com/lite.html

于 2008-12-09T16:35:07.200 回答
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. 在 Firebug 中，Cookies/Net 选项卡对我非常有用。也许 Chrome Inspector 现在有这个？上次我检查它没有，因为 Chrome 在后台自行更新而无需您的干预（默认情况下会像所有优秀的霸主一样获得您的同意）。

  6. 最后一点：Google Chrome 获得功能齐全的 Firebug 的那一天就是 Firefox 基本上为开发人员而死的那一天，因为 Firefox 有 3 年的时间让 Firefox 的布局引擎Gecko与WebKit一样快，而他们没有。抱歉说得这么直白，但这是事实。

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

于 2011-03-02T15:26:02.950 回答
14

F12

我爱快捷键

于 2011-12-15T11:08:35.767 回答
12

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

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

于 2009-12-17T20:22:34.857 回答
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);
于 2009-11-10T12:56:23.103 回答
4

或尝试用户脚本：http ://dev.chromium.org/developers/design-documents/user-scripts

于 2009-01-14T16:44:58.403 回答
4

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

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

于 2010-01-29T21:42:33.127 回答
4

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

此扩展用于将 jQuery 嵌入到您想要的任何页面中。它允许在控制台 shell 中使用 jQuery（您可以通过 ++". 调用 ChromeCtrl控制台Shift）j。

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

于 2010-07-22T09:43:56.340 回答
3

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

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

于 2009-05-29T10:55:56.067 回答
3

这不能回答您的问题，但如果您错过了，Chris Pederick 的Web 开发人员现在可用于 Chrome：https ://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm 。

于 2010-07-02T16:24:04.340 回答
3

F12（仅在 Linux 和 Windows 上）

或者

Ctrl ⇧</kbd> I

(⌥</kbd> ⌘</kbd> I if you're on Mac)

于 2011-12-15T11:16:53.253 回答
3

忘记你所有需要这个独立于浏览器的检查器，dom 更新器的一切

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

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

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

于 2013-10-14T17:56:09.473 回答
2

请尝试Google Chrome 的 Firebug Lite

于 2011-01-21T06:54:52.537 回答
1

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

于 2010-10-13T10:41:06.747 回答