Google Chrome 4.0.249
for Element Inspector I cannot click an element in page to inspect.
Re: The day that Chrome gets a Firebug tool...
Google Chrome 4.0.249
for Element Inspector I cannot click an element in page to inspect.
Yes you can.Originally Posted by sitthykun
1) With Google Chrome open, right-click anywhere on the page.
2) Select Inspect Element
3) There is a magnifying glass icon on the bottom left, click it.
4) Click any element on the page to inspect.
(I'm using Chrome for mac, so there's a chance my layout could be different, I don't feel like booting up my PC to see. Bottom line, the magnifying glass where ever it is, allows you to inspect elements on the page just like Firebug.)
For my purposes, Chrome's "Inspect Element" feature works just as good as Firebug. The only time I used Firebug was to find out the names of divs or other details about a page's css code. Chrome's "Inspect Element" does just that.
I'll admit Firebug is better... I just like the way it works when you're inspecting elements, but maybe I'm just used to it, once I get used to Chrome's version I may like it better. But, at least Google got it right by making this a built in feature and not an add-on. And, there are always future versions of Chrome... maybe the "Inspect Element" feature will get better!
Last edited by chromezone; 12-12-2009 at 07:49 AM.
For CSS, you can modify, delete rules on the fly and add styles simply by adding it into an existing style. You can also modify selectors.
For HTML, you can modify, delete and add attributes on tags. You can also delete tags with "Del" key. The only missing features are "modify a tag name" and "add a new tag".
My favorite feature that firebug does not have is auto-completion in the javascript console.
source : http://webkit.org/blog/829/web-inspector-updates/
Last edited by check_ca; 12-12-2009 at 07:02 PM.
Or with Firebug, you can edit *anything* in the HTML/CSS. There is no comparison, Chrome needs Firebug or something like it.For CSS, you can modify, delete rules on the fly and add styles simply by adding it into an existing style. You can also modify selectors.
For HTML, you can modify, delete and add attributes on tags. You can also delete tags with "Del" key. The only missing features are "modify a tag name" and "add a new tag".
I agree with pupppet.
With firebug, working with CSS is much easier. One of the greatest advantages firebug has over Chrome's developer tools is the ability to alter the computed styles on the fly... it also uses an auto complete to help you find what CSS properties you're looking for and allows you scroll through lists of these (using the arrow key). The arrow keys can also be used to change numeric values and affect the way a page looks in real time. Basically everything that is defined is editable and once clicked becomes an input area.
I actually prefer IE's developer tools over Chrome's for CSS debugging.
Last edited by beerpj; 12-15-2009 at 04:47 PM.
Personally, I rarely need to add a tag or to change a tag name on the fly. Those 2 features don't miss me. For CSS, I've just discovered that it is also possible to add selectors on the fly. So the main differences for HTML/CSS editing are *only* those 2 missing features.
Those features are also available in Chrome's debugger.
Currently, Chrome's debugger has no completion on CSS properties, I think Webkit developers will add this feature soon...
Don't forget that if Firebug was ported on Chrome, it would need to be coded from scratch since there is no comparison between Chrome and Firefox APIs. Webkit's debugger is also a lot younger than Firebug.
Last edited by check_ca; 12-17-2009 at 05:34 PM.
I don't think you understand Firebug if you actually believe that's the only thing missing from Chrome's Inspector. In Firefox w/Firebug, hit F12, click the CSS or HTML tab, then click Edit. Do you see how you can edit the live code in any way you like? You can't do this in Chrome, not by a longshot.So the main differences for HTML/CSS editing are *only* those 2 missing features.
So, open Chrome, hit Ctrl-Maj-I, click on Elements and you have your HTML/CSS editor. Yes, I can edit the live code the way I like. I just can't add tags and rename existing tag names, but I can delete them and I can add/rename/delete attributes and their values in the debugger... Also, all I can do for CSS editing in Firebug, I can do it in Chrome's debugger... Javascript console with autocompletion is also better in Chrome than in Firebug.
If you think this compares to Firebug, more power to you. But we power users require the ability to edit anything, not just play with existing nodes/attributes.So, open Chrome, hit Ctrl-Maj-I, click on Elements and you have your HTML/CSS editor
Power users use an IDE with autocompletion, autoindentation and so on... A debugger is just useful to test some modifications (or to do profiling) but not to make an entire web page or a stylesheet
EDIT : on Chromium 4.0.286.0+, you can also edit HTML content exactly like in Firebug.
Last edited by check_ca; 12-30-2009 at 07:59 AM.
Posting Permissions
Reply With Quote