适用于Google Chrome的类似于Firebug的调试器

278

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

我想要的基本功能：

  • 检查HTML源（选择元素，将其删除等）
  • 检查CSS值（内置解决方案有些奇怪）
html  css  google-chrome  debugging  firebug 
— 塞巴斯蒂安·霍兹（Sebastian Hoitz）
source
9
好像Chrome现在支持扩展程序，我们可以重新考虑一下，因为许多现有答案现在在技术上都不正确。我们应该更新这个答案，而不是开始一个新的答案。
— 内森·库普
3
@Nathan Koop：我可能是错的，但我认为Chrome扩展程序系统的功能不足以支持Firebug之类的功能。
— Sasha Chedygov
1
检查此链接以获得浏览器上的萤火虫：getfirebug.com/releases/lite/chrome
— 技术人员

Answers:

243

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

有关更多信息，请参见https://developers.google.com/chrome-developer-tools/

— 德米特里·托尔巴（Dmitry Torba）
source
19
++这足以解决Chrome特定的问题。如果需要更深入的自省，可以使用Firebug。现在有了IE8的新开发人员模式，所有主要的浏览器都内置了开发模式。美好的时光。
— 枪炮
1
嗯，花了我一些时间才能找到它，但是firebug的html编辑功能也在那里，在可以编辑css，开发人员工具栏，双击元素，键入并按Enter的位置，你去，HTML编辑。
— 2009年
4
Chrome开发人员工具（ctrl + shift + j）确实支持Java调试，例如Firebug。单击脚本选项卡，然后单击底部的第二个图标（> =），其工具提示为“显示控制台”。从那里您可以执行Java命令，例如Firebug控制台。
— 皮埃尔·安托万·拉斐特
1
请记住，在某些基于Linux的系统上它不会自动安装，因此您需要手动安装：sudo apt-get installchrome-browser-inspector
— Manuel 2009年
1
当前的开发版本4.0.xxxx具有一组开发人员工具。我之前知道过检查元素的内容，但是没有“ Net”面板，这还不够好。但是，现在有一个“资源”面板似乎运行良好，并且具有与萤火虫相同的过滤器（脚本，xhr，图像等）。我已经使用Dev开发了一个星期，它似乎很稳定。我终于将默认浏览器设置为chrome-现在它也是我的开发浏览器！:)
— Mark J Miller
37

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

http://getfirebug.com/lite.html

— 格雷格斯
source
很棒的链接！不知道IE版本
— 帕特里克德信
15

作为每天使用Firebug / Chrome检查器的人添加一些话题：

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

  2. Inspector是Firebug的“精简版”：接口不如IMO好，两个最新版本中的元素检查现在都很笨拙，但是Firebug仍然更好。我发现自己想找到对Chrome的热爱（因为它提供了更好，更快的浏览器体验），但是对于开发工作而言，它仍然让我感到很困惑。

  3. 在Firebug中，实时预览/修改DOM / CSS仍然更好。经过计算的CSS和框模型视图在Firebug中更好；

  4. 某种程度上来说，阅读/使用Firebug更容易些，也许是因为它在多个关键区域中易于导航，操作/修改文档？谁知道。我已经习惯了该界面，尽管我承认这是一个主观的东西，但我认为Chrome Inspector并不那么好。

  5. Cookies / Net选项卡在Firebug中对我来说非常有用。也许Chrome检查器现在有这个？上次我没有检查它的原因是，Chrome浏览器会在后台自动进行更新，而无需您干预（默认情况下，您会像所有出色的霸主一样获得您的同意）。

  6. 最后一点：谷歌浏览器获得功能齐全的Firebug的那一天，就是Firefox基本上死于开发人员的那一天，因为Firefox有3年的时间使Firefox的布局引擎Gecko像WebKit一样快，而事实并非如此。坦白地说很抱歉，但这是事实。

您会看到，现在每个人都想摆脱Flash代替由移动可访问性和交互性（iPhone，iPad，Android）推动的jQuery（iPhone，iPad，Android），并且JavaScript突然“变得很重要”（这很讽刺），所以这艘飞船驶过了Firefox。作为Mozilla的粉丝，这让我很难过。在Firefox升级其JavaScript引擎之前，Chrome只是更好的浏览器。

— Negutron
source
Firefox正在走下坡路。截至目前（2013年），chrome devtools的功能比firebug强大得多……并且firefox都将精力集中在Firefox OS上，而Firefox OS甚至不与android frodo接近。他们甚至没有投入太多精力制作js和渲染快点。
— Phyo Arkar Lwin
9

您可以在“书签栏”中设置此书签，以使Firebug lite在Chrome / Chromium浏览器中始终可用（将其作为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);
— 曼努埃尔
source
4

jQuerify是将jQuery嵌入到Chrome Console的完美扩展，它非常简单。此扩展名还指示jQuery是否已经嵌入到页面中。

此扩展用于将jQuery嵌入到所需的任何页面中。它允许在控制台外壳中使用jQuery（您可以通过Ctrl+ Shift+ j“。来调用Chrome控制台。）。

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

— 安德烈
source
3

好吧，可以为Google Chrome 启用Greasemonkey脚本，所以也许可以使用这种方法来安装Firebug吗？Firebug Lite也可以使用，但是与使用功能齐全的功能不一样：(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-更好的指南/

— 彼得·莫滕森
source
3

这不能回答您的问题，但是，如果您错过了它，可以在Chrome浏览器上使用Chris Pederick的Web开发人员：https : //chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm 。

— 山姆·达顿
source
3

F12 （仅在Linux和Windows上）

要么

Ctrl ⇧ I

（⌥ ⌘ I如果您使用的是Mac）

— 仙农酮
source
1

如果您是在夜间使用PPA在Ubuntu上使用Chromium，则应该使用 chromium-browser-inspector

— 罗里
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.