Html 适用于 Google Chrome 的类似 Firebug 的调试器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/308125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Firebug-like debugger for Google Chrome
提问by Sebastian Hoitz
Is there anything like Firebug that you can use within Google Chrome?
您可以在 Google Chrome 中使用 Firebug 之类的东西吗？
Essential features I would like:
我想要的基本功能：
- Inspect HTML source (select elements, delete them, etc.)
- check CSS values (the built-in solution is weird, somehow)
- 检查 HTML 源代码（选择元素、删除它们等）
- 检查 CSS 值（内置解决方案很奇怪，不知何故）
采纳答案by Dmitry Torba
There is a Firebug-like tool already built into Chrome. Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript. It also does CSS inspection well and can even change CSS rendering on the fly.
Chrome 中已经内置了一个类似 Firebug 的工具。只需右键单击页面上的任意位置，然后从菜单中选择“检查元素”。Chrome 有一个用于调试的图形工具（就像在 Firebug 中一样），因此您可以调试 JavaScript。它还可以很好地进行 CSS 检查，甚至可以即时更改 CSS 渲染。
For more information, see https://developers.google.com/chrome-developer-tools/
有关更多信息，请参阅https://developers.google.com/chrome-developer-tools/
回答by gregers
Firebug Lite supports to inspect HTML elements, computed CSS style, and a lot more. Since it's pure JavaScript, it works in many different browsers. Just include the script in your source, or add the bookmarklet to your bookmark bar to include it on any page with a single click.
Firebug Lite 支持检查 HTML 元素、计算出的 CSS 样式等等。由于它是纯 JavaScript，因此可以在许多不同的浏览器中运行。只需将脚本包含在您的源代码中，或将书签添加到您的书签栏，只需单击一下即可将其包含在任何页面上。
回答by negutron
Just adding some talking points as someone who uses Firebug / Chrome Inspectorevery day:
作为每天使用 Firebug / Chrome Inspector 的人，只需添加一些谈话要点：
At the time of writing, there's only Google DOM inspector and no it doesn't have all the features of Firebug
Inspector is a 'lite' version of Firebug: The interface is not as good IMO, element inspection in both recent versions is now clunky, but Firebug is still better; I find myself trying to find the love for Chrome (since it's a better, faster browser experience), but for development work, it still just sucks for me.
Live preview / modification of DOM / CSS is still way better in Firebug; calculated CSS and box model view are better in Firebug;
Somehow it's just easier to read/use Firebug maybe because of the ease of navigating, manipulating/modifying the document in several key areas? Who knows. I'm used to the interface and I think Chrome Inspector is not as good although this is a subjective thing I admit.
The Cookies/Net tab are extremely useful to me in Firebug. Maybe Chrome Inspector has this now? Last time I checked it did not, because Chrome updates itself in the background without your intervention (gets your consent by default like all good overlords).
Last point: The day that Google Chrome gets a fully-featured Firebug is the day Firefox basically dies for developers because Firefox had 3 years to make Firefox's layout engine Geckoas fast as WebKitand they didn't. Sorry to put it so bluntly but it's the truth.
在撰写本文时，只有 Google DOM 检查器，没有 Firebug 的所有功能
Inspector 是 Firebug 的“精简版”：界面不如 IMO，最近两个版本的元素检查现在都很笨拙，但 Firebug 仍然更好；我发现自己正在努力寻找对 Chrome 的热爱（因为它是一种更好、更快的浏览器体验），但对于开发工作，它对我来说仍然很糟糕。
Firebug 中 DOM/CSS 的实时预览/修改仍然更好；在 Firebug 中计算的 CSS 和框模型视图更好；
不知何故，它更容易阅读/使用 Firebug，也许是因为在几个关键区域导航、操作/修改文档很容易？谁知道。我已经习惯了这个界面，我认为 Chrome Inspector 没有那么好，尽管我承认这是一个主观的东西。
Cookies/Net 选项卡对我在 Firebug 中非常有用。也许 Chrome Inspector 现在有这个？上次我检查时没有，因为 Chrome 在没有您干预的情况下在后台自行更新（默认情况下会像所有优秀的霸主一样获得您的同意）。
最后一点：Google Chrome 获得功能齐全的 Firebug 的那一天是 Firefox 对开发人员来说基本上消亡的那一天，因为 Firefox 有 3 年时间让 Firefox 的布局引擎Gecko与WebKit一样快，而他们没有。很抱歉说得这么直白，但这是事实。
You see, now everyone wants to move away from Flash in lieu of jQuery motivated by mobile accessibility and interactivity (iPhone, iPad, Android) and JavaScript is 'suddenly' a big deal (that's sarcasm), so that ship has sailed, Firefox. And that makes me sad, as a Mozilla fanperson. Chrome is simply a better browser until Firefox upgrades their JavaScript engine.
你看，现在每个人都想摆脱 Flash 来代替 jQuery，以移动可访问性和交互性（iPhone、iPad、Android）和 JavaScript 为“突然”的大问题（这是讽刺），所以这艘船已经航行了，火狐。这让我很伤心，作为一个 Mozilla 粉丝。在 Firefox 升级其 JavaScript 引擎之前，Chrome 只是一个更好的浏览器。
回答by Angel.King.47
F12
F12
I love shortkeys
我爱快捷键
回答by Teekin
Try this, it's called Firebug Liteand apparently works with the beta version of Chrome.
试试这个，它被称为Firebug Lite，显然适用于测试版的 Chrome。
You can also find it at: https://chrome.google.com/extensions/
您也可以在以下位置找到它：https: //chrome.google.com/extensions/
回答by Manuel
You can set this bookmarklet in your "Bookmarks Bar" in order to have Firebug lite always available in Chrome/Chromium browser (put this as the URL):
您可以在“书签栏”中设置此书签，以使 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);
回答by joshatjben
The official Firebug Chrome extension or you can download and package the extension yourself.
官方 Firebug Chrome 扩展程序或者您可以自己下载并打包扩展程序。
回答by Andrey
jQuerifyis the perfect extension to embed jQuery into Chrome Console and is as simple as you can imagine. This extension also indicates if jQuery has been already embedded into a page.
jQuerify是将 jQuery 嵌入到 Chrome 控制台的完美扩展，并且非常简单。此扩展还指示 jQuery 是否已嵌入到页面中。
This extension is used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by Ctrl+ Shift+ j".).
此扩展用于将 jQuery 嵌入到您想要的任何页面中。它允许在控制台 shell 中使用 jQuery（您可以通过Ctrl+ Shift+ j".调用 Chrome 控制台）。
To embed jQuery into the selected tab click on extension button.
要将 jQuery 嵌入到选定的选项卡中，请单击扩展按钮。
回答by kenorb
回答by kenorb
Well, it is possible to enable Greasemonkeyscripts for Google Chrome so maybe there is a way to sort of install Firebug using this method? Firebug Litewould also work, but it's just not the same feeling as using the full featured one :(
好吧，可以为 Google Chrome启用Greasemonkey脚本，所以也许有一种方法可以使用这种方法安装 Firebug？Firebug Lite也可以使用，但与使用全功能的感觉不同:(
willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/
willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/
