Is there anything like Firebug that you can use within Google Chrome?
Essential features I would like:
- Inspect HTML source (select elements, delete them, etc.)
- check CSS values (the built-in solution is weird, somehow)
views:
92937answers:
12
+100
A:
While it's true that Google Chrome does not offer plug-ins, 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 inspector won't do JavaScript debugging* (like Firebug), but it does CSS inspection well and can even change CSS rendering on the fly.
*Correction: since this response was written, Chrome has replaced its command line debugger with a graphical tool (like in Firebug). So you can debug JavaScript, although some features (like GUI watch variables) are missing.
Proof of Concept
2008-12-05 22:19:09
++ This is good enough for troubleshooting Chrome-specific issues. If I want deeper introspection, I can do it with Firebug. Now with IE8's new developer mode, all the major browsers have builtin dev modes. Good times.
guns
2009-04-27 09:32:46
Ah, took me a bit to find it, but the html editing functionality of firebug is there as well, in the same place that you can edit the css, the developer toolbar, double click an element, type, and hit enter, and there you go, html edited.
Tchalvak
2009-10-17 04:01:31
The Chrome Developer Tools (ctrl+shift+j) does support Javascript debugging like Firebug. Click on the Scripts tab then on the second icon at the bottom (>=) that has a tooltip of "Show console". From there you can execute Javascript commands like the Firebug console.
Pierre-Antoine LaFayette
2009-11-08 08:02:41
Remember on some linux-based system it doesn't get installed automatically, so you need to install it manually:sudo apt-get install chromium-browser-inspector
Manuel
2009-11-10 13:00:23
The current dev build 4.0.xxxx has a set of developer tools. I knew about the inspect elements stuff before but without the "Net" panel it wasn't good enough. But there is now a "resources" panel that seems to be working pretty well and has all the same filters as firebug (scripts, xhr, images, etc). I've been using the Dev build for a week and it seems pretty stable. I just finally set my default browser to chrome - now it's my dev browser too! :)
Mark J Miller
2009-12-07 18:22:11
This supports http headers under "resources" as well (which is very important for debugging Ajax).
Jeff Davis
2010-02-09 20:36:50
+19
A:
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.
gregers
2008-12-09 16:35:07
+2
A:
Well, it is possible to enable Greasemonkey scripts for Google Chrome so maybe there is a way to sort of install Firebug using this method? Firebug Lite would also work, but it's just not the same feeling as using the full featured one :(
willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/
+6
A:
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):
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);
Manuel
2009-11-10 12:56:23
+7
A:
Try this, it's called Firebug Lite and apparently works with the beta version of Chrome.
https://chrome.google.com/extensions/detail/bnbbfjbeaefgipfjpdabmpadaacmafkj
Helgi Hrafn Gunnarsson
2009-12-17 20:22:34
+3
A:
The official Firebug Chrome extension or you can download and package the extension yourself. http://bit.ly/anKlnN.
joshatjben
2010-01-29 21:42:33
Just for clarity: this is a link to an firebug lite extension not a firebug extension.
NeuroScr
2010-05-08 02:28:40
A:
Manuel's answer is excellent. And I think if one is offline, just change the src reference to point to a local one would suffice, haven't try it but why not?
Don Don
2010-06-20 17:34:36
+1
A:
This doesn't answer your question but, in case you missed it, Web Developer is now available for Chrome: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm.
Sam Dutton
2010-07-02 16:24:04
A:
jQuerify is 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.
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".).
To embed jQuery into the selected tab click on extension button.
Andrey
2010-07-22 09:43:56
A:
If you are using Chromium on Ubuntu using the nightly ppa, then you should have the chromium-browser-inspector
Rory
2010-10-13 10:41:06